Resize carousel sub-items
-
I am using ons-carousel inside ons-splitter-side with width 100%. When the screen is rotated (or resized) the width of carousel sub-items is not being updated. Here is an example:
<ons-splitter> <ons-splitter-side id="menu" side="left" width="100%" collapse swipeable> <ons-carousel id="carousel" fullscreen width="100%"> <ons-carousel-item> <ons-list> <ons-list-item onclick="fn.load('home.html')" tappable> Home </ons-list-item> <ons-list-item onclick="fn.next()" tappable> Settings </ons-list-item> <ons-list-item onclick="fn.load('about.html')" tappable> About </ons-list-item> </ons-list> </ons-carousel-item> <ons-carousel-item> <ons-list> <ons-list-item onclick="fn.back()" tappable>Back</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> <ons-list-item tappable>A</ons-list-item> </ons-list> </ons-carousel-item> </ons-carousel> </ons-splitter-side> <ons-splitter-content id="content" page="home.html"></ons-splitter-content> </ons-splitter> <template id="home.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="fn.open()"> <ons-icon icon="md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center"> Main </div> </ons-toolbar> <p style="text-align: center; opacity: 0.6; padding-top: 20px;"> Swipe right to open the menu! </p> </ons-page> </template> <template id="settings.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="fn.open()"> <ons-icon icon="md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center"> Settings </div> </ons-toolbar> </ons-page> </template> <template id="about.html"> <ons-page> <ons-toolbar> <div class="left"> <ons-toolbar-button onclick="fn.open()"> <ons-icon icon="md-menu"></ons-icon> </ons-toolbar-button> </div> <div class="center"> About </div> </ons-toolbar> </ons-page> </template>
Javascript
window.fn = {}; window.fn.open = function() { var menu = document.getElementById('menu'); menu.open(); }; window.fn.load = function(page) { var content = document.getElementById('content'); var menu = document.getElementById('menu'); content.load(page) .then(menu.close.bind(menu)); }; window.fn.next = function(){ var carousel = document.getElementById('carousel'); carousel.next(); } window.fn.back = function(){ var carousel = document.getElementById('carousel'); carousel.prev(); }
Try to run this example, then resize the area then click on “Settings”
-
I noticed that the width is correct, but the position is wrong. transform: translate3d
-
Have you tried width in px? just for testing…
In my case, Onsen Carousel was working weird when I use % in width not px. But after using px, it is solved.
-
@김요섭 Yes I did. The width is correct but the positioin is not.
-
ons-carousel-item
isn’t really designed to be used outside of anons-page
, and so in this case won’t initiliase properly. This means that the resize handler doesn’t get added, which causes the issue you are seeing.I would recommend against using the
ons-carousel
in this way. If you want to work around the initialisation not working, you could do the following inside anons.ready
callback:document.getElementById('carousel')._show();