CODEWITHSUNDEEP
layoutcarouselonsen-ui
rich
rich

Reputation: 1227

Onsen Carousel - Show Current Item In Centre

I am attempting to create a carousel using Onsen, easy enough however I want the currently selected item to be the one in the centre.

I have the initial index of the 5 items set to 2, and the item-width set to 30%. This allows more than one item to be shown and the third item the initially selected one. Does anybody have any ideas on how to make the selected item always show as the middle one?

I am also going to be changing this to an infinite carousel, which shouldn't be too tricky, but it may be something to keep in mind.

Basic code is below... thanks.

<ons-carousel modifier="brand-carousel direction="horizontal" item-width="30%" initial-index="2" swipeable>
    <ons-carousel-item><img src="img/img1.png"/></ons-carousel-item>
    <ons-carousel-item><img src="img/img1.png"/></ons-carousel-item>
    <ons-carousel-item><img src="img/img1.png"/></ons-carousel-item>
    <ons-carousel-item><img src="img/img1.png"/></ons-carousel-item>
    <ons-carousel-item><img src="img/img1.png"/></ons-carousel-item>
</ons-carousel>

Upvotes: 1

Views: 978

Answers (1)

Munsterlander
Munsterlander

Reputation: 1386

The ons-carousel items are stored in a zero index array. If you are dynamically adding items, just simply get the array length, divide by 2 and round to an integer. Using JS, you can specify the specific active item by using, setActiveCarouselItemIndex(index, options);. For more information, reference the user guide located here: https://onsen.io/guide/overview.html#UsingCarousel

Edit: Here is complete 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" />
    <meta http-equiv="Content-Security-Policy" content="default-src * data:; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,300italic,300,400italic,500,700,700italic,500italic' rel='stylesheet' type='text/css'>
    <title>Onsen UI 2.0 Quickstart</title>

    <script src="components/loader.js"></script>
    <script src="lib/onsenui/js/onsenui.js"></script>

    <link rel="stylesheet" href="lib/onsenui/css/onsenui.css" type="text/css" media="all" />
    <link rel="stylesheet" href="lib/onsenui/css/onsen-css-components.css" type="text/css" media="all" />

    <style>
        ons-carousel-item {
          display: table;
          text-align: center;
        }

        .item-label {
          display: table-cell;
          vertical-align: middle;
          color: white;
          line-height: 1;
          font-size: 48px;
          font-weight: bold;
        }

        .cover-label {
          text-align: center;
          position: absolute;
          left: 0px;
          width: 100%;
          bottom: 10px;
          color: white;
        }
    </style>

    <script>
        function setIndex(){
          var cnt = document.getElementById('myC').getCarouselItemCount();
          var midItem = Math.floor(cnt/2);
          document.getElementById('myC').setActiveCarouselItemIndex(midItem);
        }
    </script>

</head>

<body>
 <ons-page>
  <ons-carousel swipeable overscrollable auto-scroll fullscreen id="myC">
    <ons-carousel-item style="background-color: gray;">
      <div class="item-label">GRAY
      <ons-button onclick="setIndex()">Click Me</ons-button></div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #085078;">
      <div class="item-label">BLUE</div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #373B44;">
      <div class="item-label">DARK</div>
    </ons-carousel-item>
    <ons-carousel-item style="background-color: #D38312;">
      <div class="item-label">ORANGE</div>
    </ons-carousel-item>
    <ons-carousel-cover>
      <div class="cover-label">Swipe left or right</div>
    </ons-carousel-cover>
  </ons-carousel>
</ons-page>

</body>
</html>

Upvotes: 1

Related Questions