Onsen Carousel initial-index doesn't work?

David Hope

Hello again,

I’m trying to use the Onsen Carousel in my project.

The issue that i have is that I need to set the initial index of the Carousel in my page.

However, the initial-index=“X” doesn’t work at all. which means the carousel always loads the first Carousel item/element.

This is my entire working code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="mobile-web-app-capable" content="yes" />
  <title>Onsen UI</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-rc.15/js/onsenui.js"></script>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-rc.15/css/onsenui.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/onsen/2.0.0-rc.15/css/onsen-css-components.css">



</head>

<body>
<ons-navigator id="myNavigator" page="home.html"></ons-navigator>

<ons-template id="home.html">
  <ons-page id="home">
  <ons-toolbar>
    <div class="left">
      <ons-toolbar-button onclick="prev()">
        <ons-icon icon="md-chevron-left"></ons-icon>
      </ons-toolbar-button>
    </div>
    <div class="center">Carousel</div>
    <div class="right">
      <ons-toolbar-button onclick="next()">
        <ons-icon icon="md-chevron-right"></ons-icon>
      </ons-toolbar-button>
    </div>
  </ons-toolbar>

  <ons-carousel initial-index="2" fullscreen swipeable auto-scroll overscrollable id="carousel" >
    <ons-carousel-item style="background-color: #085078;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
        BLUE
      </div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #373B44;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
        DARK
      </div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #D38312;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
        ORANGE
      </div>
    </ons-carousel-item>
  </ons-carousel>
</ons-page>

</ons-template>

</body>
</html>

If you just copy and paste this code and run it, you should see that the Carousel loads but its always set at the first item.

Could someone please advise on this issue?

Any help would be appreciated.

David Hope

Here is a very strange thing.

I found this code on Google and tested it and the initial-index worked fine BUT the issue with this is that the Carousel is inside the list which is not what I want!

When I take the Carousel out of the list, the initial-index stops working again!!

<ons-page >
  <ons-toolbar>
    <div class="center">Carousel with List</div>
  </ons-toolbar>
  
  <ons-list >
    <ons-list-item ng-repeat="a in [1,2,3]" auto-scroll fullscreen>
      <ons-carousel swipeable style="height: 72px; width: 100%;" initial-index="1" auto-scroll fullscreen>

	
	    <ons-carousel-item style="background-color: #085078;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
        BLUE 222222222222
      </div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #373B44;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
        DARK 22222222222
      </div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #D38312;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
        ORANGE 222
      </div>
    </ons-carousel-item>
		
	<ons-carousel-item style="background-color: #D38312;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
        ORANGE 222
      </div>
    </ons-carousel-item>
	
		<ons-carousel-item style="background-color: #D38312;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
        ORANGE 222fghfgh
      </div>
    </ons-carousel-item>
	
	
		<ons-carousel-item style="background-color: #D38312;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
        ORANGE 222dfgdfgdfgdfgdfgdfgdfg
      </div>
    </ons-carousel-item>
	
	
		<ons-carousel-item style="background-color: #D38312;">
      <div style="text-align: center; font-size: 30px; margin-top: 20px; color: #fff;">
        ORANGE 222ioyturtfgdfbgdfgdgdfgdfg
      </div>
    </ons-carousel-item>
		
		
      </ons-carousel>
    </ons-list-item>
  </ons-list>
</ons-page>

**IMPORTAN: But the code only works if its outside of ons-template **

misterjunio

@David-Hope I took a look at your problem and what’s causing it is a timing issue. For instance that doesn’t happen to me locally with Onsen UI’s latest version but it does happen with the same latest version in the tutorial app due to the way the library is loaded and so on. There is no easy fix for now, what I can suggest (and I know is nowhere near ideal) is to wait for the element to load and then use the setActiveIndex(index, [options]) method to change to your intended item.

David Hope

This post is deleted!

David Hope

This post is deleted!

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Onsen Carousel initial-index doesn't work?