Question

I’m using a Carousel example from this website.
For one single carousel on the page it works well, but when I have multiple carousels on the same page, it shows navigation buttons only for the top carousel, and when the top one moves, all the other move along.
I am trying to make each one of them move independently…

              <script src="/Scripts/jMyCarousel.js" type="text/javascript"></script>
              ...

             foreach(something)
             {
              <div class="jMyCarousel">
                 <ul>
                    <li>image1</li>
                    <li>image1</li>
                    ...
                 </ul>
              </div>
             }
              ...

             <script type="text/javascript">
                $(function() {
                $(".jMyCarousel").jMyCarousel({ visible: '50%', eltByElt: true });
                });
             </script>

As far as I know, if in the script (the last part) I’m using the class (for example “.jMyCarousel”) it should create a new carousel for each item that has this class name.. but here it isn’t the case.

Any idea how to make each carousel independent?

Answer 1

Don’t use the selector ‘as is’. That’s not a true iteration. Use an iterator and for each loop apply the behaviour. Example:

$(".jMyCarousel").each(function(){ 
    $(this).jMyCarousel({ visible: '50%', eltByElt: true });
});

I posted my comment as an answer so you can close the question 🙂