Monaca Onsen UI Discord Chat Github Repo

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.


  • Onsen UI

    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();