{"action":"closed","issue":{"url":"https://api.github.com/repos/touchstonejs/touchstonejs/issues/49","labels_url":"https://api.github.com/repos/touchstonejs/touchstonejs/issues/49/labels{/name}","comments_url":"https://api.github.com/repos/touchstonejs/touchstonejs/issues/49/comments","events_url":"https://api.github.com/repos/touchstonejs/touchstonejs/issues/49/events","html_url":"https://github.com/touchstonejs/touchstonejs/issues/49","id":62232429,"number":49,"title":"FlexLayouts and Swiper.js","user":{"login":"KeKs0r","id":2970814,"avatar_url":"https://avatars.githubusercontent.com/u/2970814?v=3","gravatar_id":"","url":"https://api.github.com/users/KeKs0r","html_url":"https://github.com/KeKs0r","followers_url":"https://api.github.com/users/KeKs0r/followers","following_url":"https://api.github.com/users/KeKs0r/following{/other_user}","gists_url":"https://api.github.com/users/KeKs0r/gists{/gist_id}","starred_url":"https://api.github.com/users/KeKs0r/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/KeKs0r/subscriptions","organizations_url":"https://api.github.com/users/KeKs0r/orgs","repos_url":"https://api.github.com/users/KeKs0r/repos","events_url":"https://api.github.com/users/KeKs0r/events{/privacy}","received_events_url":"https://api.github.com/users/KeKs0r/received_events","type":"User","site_admin":false},"labels":[{"url":"https://api.github.com/repos/touchstonejs/touchstonejs/labels/suggestion","name":"suggestion","color":"fef2c0"}],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":5,"created_at":"2015-03-16T23:09:15Z","updated_at":"2015-08-04T02:32:25Z","closed_at":"2015-08-04T02:32:25Z","body":"Hi,\r\n\r\nI am trying to build the new version of my app with touchstone and I am loving it so far. I am completely aware that it is still in a very early stage. I wanted to swiper.js in order to build a subnavigation for on of my views. Unfortunately the swiper.js containers do not seem to work with the Flexlayout.\r\n\r\nIs there a plan to build a swiper component for touchstone itself? If not I am willing to build one, based on swiper.js if others are interested and somebody can lead me into the right direction.\r\n\r\nHere is my current approach:\r\n```javascript\r\nmodule.exports = React.createClass({\r\n    displayName: \"swiper_view\",\r\n    getInitialState: function(){\r\n        return {\r\n            activeSlide: 0\r\n        }\r\n    },\r\n    componentDidMount: function() {\r\n        var self = this;\r\n        this.swiper = new Swiper (this.refs.swiper.getDOMNode(), {\r\n            direction: 'horizontal',\r\n            loop: false,\r\n            onSlideChangeEnd: self._onSlideChangeEnd\r\n        });\r\n    },\r\n    _onSlideChangeEnd: function(swiper){\r\n       this.setState({activeSlide: swiper.activeIndex});\r\n    },\r\n    _handleToggle: function(slide){\r\n        this.swiper.slideTo(slide);\r\n    },\r\n    render: function(){\r\n        return (\r\n            <UI.FlexLayout className={this.props.viewClassName}>\r\n                <UI.Headerbar label=\"Swiper Container\" />\r\n                <UI.Headerbar height=\"36px\" className=\"Subheader\">\r\n                    <UI.Toggle value={this.state.activeSlide} onChange={this._handleToggle} options={[\r\n                        { label: 'Slide 1', value: 0 },\r\n                        { label: 'Slide 2', value: 1 },\r\n                        { label: 'Slide 3', value: 2 }\r\n                    ]} />\r\n                </UI.Headerbar>\r\n                <UI.FlexBlock grow>\r\n                    <div className=\"swiper-container\" ref=\"swiper\">\r\n                        <div className=\"swiper-wrapper\">\r\n                            <div className=\"swiper-slide\">\r\n                                <UI.FlexBlock scrollable grow >\r\n                                    This is the main container that should show content and be scrollable!\r\n                                    Content can be very long!\r\n                                </UI.FlexBlock>\r\n                            </div>\r\n                            <div className=\"swiper-slide\">\r\n                                <UI.FlexBlock scrollable grow >\r\n                                    This is the content of the second slide, which can be reached by clicking on the\r\n                                    subnavigation or swiping on the screen.\r\n                                    <br /><br /> <br /><br /><br /> <br />\r\n                                    Now more content\r\n                                    <br /><br /> <br /><br /><br /> <br />\r\n                                    And more!\r\n                                </UI.FlexBlock>\r\n                            </div>\r\n                            <div className=\"swiper-slide\">\r\n                                <UI.FlexBlock scrollable grow >\r\n                                    Last Slide\r\n                                </UI.FlexBlock>\r\n                            </div>\r\n                        </div>\r\n                    </div>\r\n                   <UI.Footerbar height=\"50px\" type=\"default\">\r\n                      <UI.FooterbarButton icon=\"ion-trophy\" disabled />\r\n                      <UI.FooterbarButton icon=\"ion-earth\" />\r\n                      <UI.FooterbarButton icon=\"ion-bag\" />\r\n                      <UI.FooterbarButton icon=\"ion-ios7-person\" />\r\n                      <UI.FooterbarButton icon=\"ion-more\" />\r\n                  </UI.Footerbar>\r\n                </UI.FlexBlock>\r\n            </UI.FlexLayout>\r\n        );\r\n    }\r\n});\r\n```\r\n\r\nThe Problem with it is, that within the different slides, the scrolling flexbox is not working. Even if there is more content I cant scroll, although the scrollbar is visible."}}