Resize carousel sub-items

Muhammad Nasser Alnaimi

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”

Muhammad Nasser Alnaimi

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.

Muhammad Nasser Alnaimi

@김요섭 Yes I did. The width is correct but the positioin is not.

asialgearoid

ons-carousel-item isn’t really designed to be used outside of an ons-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 an ons.ready callback:

document.getElementById('carousel')._show();