4

I am using carousel and want to have indicators (highlight the current one) and next/previous togglers.

<ons-page>
  <ons-toolbar>
    <div class="center">Carousel</div>
  </ons-toolbar>
  <ons-carousel swipeable overscrollable auto-scroll fullscreen var="myCarousel">
    <ons-carousel-item style="background-color: gray;">
      <div class="item-label">GRAY</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-cover>
      <div class="cover-label">1 2 3</div>
    </ons-carousel-cover>
  </ons-carousel>
</ons-page>

Sorry for a stupid question but I read documentation and all references and haven't got an idea how to make it working. My codepen is here: http://codepen.io/onsen/pen/xbbzOQ

qqruza
  • 1,385
  • 4
  • 20
  • 41

2 Answers2

6

You can use postchange event to change the style of the current item, for example.

HTML:

<ons-carousel-cover>
  <div class="cover-label">
    <span class="indicators"> 1 </span>
    <span class="indicators"> 2 </span>
    <span class="indicators"> 3 </span>
    <span class="indicators"> 4 </span>
  </div>
</ons-carousel-cover>

JS:

document.querySelectorAll('.indicators')[0].style.color = 'red';

document.addEventListener('ons-carousel:postchange', function(event){
    document.querySelectorAll('.indicators')[event.lastActiveIndex].style.color = 'white';
    document.querySelectorAll('.indicators')[event.activeIndex].style.color = 'red';
});

Working here: http://codepen.io/frankdiox/pen/QyLVqM

Fran Dios
  • 3,482
  • 2
  • 15
  • 26
  • Thank you @FranDios but how can I add Next and Previous togglers? With ability to hide Previous on the first slide and Next on the last one. I do really appreciate your help! – qqruza Dec 03 '15 at 09:14
  • 2
    @qqruza It's the same procedure, just hiding and showing divs instead of coloring them. I updated the codepen, have a look. – Fran Dios Dec 03 '15 at 10:54
  • You are a superstar! So this code should go to my module.controller (I have got a few ones)??? or to the separate JS file? – qqruza Dec 03 '15 at 11:08
  • also please check this codepen: http://codepen.io/anon/pen/MKgRgv there is a very strange behavior going on – qqruza Dec 03 '15 at 15:01
  • 1
    I am sorry but I don't know how is your app structure, that's something you should decide. Also, there is no strange behavior in that codepen, it's only a 404 error. Try removing 'v' from `v2.0.0-beta.1` in the URL. Please consider marking this answer as accepted if it answers what you were asking in the question. – Fran Dios Dec 03 '15 at 15:35
  • I cannot enough thank you my friend! But what I realise that your solution seems not working with onsen-ui 2.0 beta. But this is probably needs to be addressed to them @FranDios. – qqruza Dec 03 '15 at 15:45
  • @qqruza There are differences between OnsenUI 1 and 2. Use `id="carousel"` instead of `var="carousel"` and get the element by ID instead of using variable `carousel` as before. Also change the event name from `ons-carousel:prechange` to just `prechange`. I think that's enough. – Fran Dios Dec 04 '15 at 01:58
  • Hi @FranDios, I also have an issue with onsen carousel and I think your code above can be helpful in my situation too. Can you please explain what your code does and how it works, just so I know what to change for my situation. Or I can just ask a new question and you can answer on it? – sj.meyer Dec 10 '15 at 12:47
  • @NutCracker1 You just need to listen to the `postchange` event that `ons-carousel` fires every time it changes and do the actions you need in that moment. The event object contains information about the current carousel index and the previous one, so you just need to modify CSS accordingly (i.e. hiding "prev" button when the new index is 0, etc.). If this explanation is not enough please open a new question :) – Fran Dios Dec 10 '15 at 13:01
  • @FranDios, I opened a new question here: http://stackoverflow.com/questions/34203275/onsen-ui-combining-carousel-with-range-input-action-listeners-methods – sj.meyer Dec 10 '15 at 13:35
0

ons-carousel-cover tag removed from version 2

i have made some changes to make it working on v2

1- taking out the indicators from ons-carousel container

2- adjust CSS to meet the requirements

3- Updating javascript for listener and next/prev button 

document.querySelector('ons-carousel').addEventListener('postchange', function() { ... }).

checkout working code here : https://codepen.io/tarekadra/pen/dyYqQLo

Tarek Adra
  • 500
  • 5
  • 12