带有多个幻灯片间隔的jQuery幻灯片不起作用

Question

I've set up a jquery slideshow borrowing some code from someone else. I wanted to use the same logic to animate three slideshow panes at once (They should all move and pause at the same time)

However, when using the following code, only the third pane works as expected and I'm not sure why. Can anyone help explain why and look at fixing it?

It may be that I have to try a different method to achieve this, which is fine, but I'd like to at least understand what the problem is. I've got the working Jsfiddle here as well. What should happen is that each window should, after 10 seconds, move to the next slide, then after ten seconds it should go back to the original slide. Only the third window is doing this properly, the others are skipping the interval

 <div class='windows'>

    <div id='sliderWindow1' class='sliderWindow'>

            <ul class='slidesWindow'>
            <!-- Trend Graph -->
                <li class='slideWindow'>
                    <div id='trendGraph'>Pane 1</div> <!--jscript to get chart -->
                </li>
                <!-- total number of votes -->
                <li class='slideWindow'>
                    <div id='totalVotes'>Pane 2</div> <!--jscript to get chart -->
                </li>
                <li class='slideWindow'>
                    <div id='trendGraph2'>Pane 1</div> <!--jscript to get chart -->
                </li>
            </ul>

    </div>



    <div id='sliderWindow2' class='sliderWindow'>
        <ul class='slidesWindow'>

            <!-- Related Polls -->
                <li class='slideWindow'>
                    <div id='related'>Pane 1b</div> <!--jscript to get chart -->
                </li>
                <!-- Likes -->
                <li class='slideWindow'>
                    <div id='likesAndLiker'>Pane 2b</div> <!--jscript to get chart -->
                </li>
                <li class='slideWindow'>
                    <div id='relatedPolls2'>Pane 1b</div> <!--jscript to get chart -->
                </li>

            </ul>

    </div>

    <div id='sliderWindow3' class='sliderWindow'>
        <ul class='slidesWindow'>
            <!-- Your Vote -->
                <li class='slideWindow'>
                    <div id='yourLike'>Pane 1c</div> <!--jscript to get chart -->
                </li>
                <!-- total number of votes -->
                <li class='slideWindow'>
                    <div id='OtherThing'>Pane 2c</div> <!--jscript to get chart -->
                </li>
                <li class='slideWindow'>
                    <div id='yourLike2'>Pane 1c</div> <!--jscript to get chart -->
                </li>
            </ul>

    </div>



</div>

Jscript

 $(document).ready(function(){
//configuration
    var width = 100;
    var animationSpeed = 1000;
    var pause = 12000;
    var currentID = 0;
    var currentSlide = 1;
    var height = 100;
    var StopCounting = true;

    //cache DOM     
    var $Slider = $('.sliderWindow');
    var $SlideContainer = $Slider.find(".slidesWindow");
    var $Slides = $SlideContainer.find(".slideWindow");
    var $SlidesLength = 3;
    var interval;


    $Slider.on('mouseenter', pauseSlider).on('mouseleave', startSlider);

//begin the slide show
startSlider();              

function startSlider(){

            //set interval
            interval = setInterval(function(){
                console.log(currentSlide + " of " + $SlidesLength);
                //margin left -720
                $SlideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
                //callback
                currentSlide++;
                currentID++;

                //if this is the last slide go to position one (0px)
                if(currentSlide === $SlidesLength){

                currentSlide = 1;
                $SlideContainer.css('margin-left', 0);
                StopCounting = true;
                }


                });

            }, pause);
    }

    //pause the slider by clearing the interval
    function pauseSlider(){
    clearInterval(interval);
    }

 });//end of document ready

CSS

 .windows {
  height: 200px;
 width: 100%;
 display: inline-block;
 margin-top: 20px;
 background-color: #C2F0FF;
 }

 .sliderWindow {
 margin-left: 10%;
 height: 100px;
 /*width: 20%;*/
 width: 100px;
 background-color: #2EB8E6;
 display: inline;
 float: left;
 overflow: hidden;
 }

 .slidesWindow{
 display: block;
 width: 300px;
 height: 100px;
 margin: 0;
 padding: 0;
 }

 .slideWindow {
 float: left;
 list-style-type: none;
 /*width: 100%;*/
 width: 100px;
 height: 100px;
 }

Answer 1

From the JSfiddle, I could not figure out the exact response you are looking for. But I think I ran into a similar problem when I used multiple accordion elements in bootstrap/jquery the other day. The solution to the issue was to rename the div id and class id's the second and third time I was using the accordion. The analogy for you would be to check you div id and class id names and see if you can change their names in the second and third copies of the element.

Answer 2

I located the answer, the problem is where the "current slide" was adding up. This adds up for each slide that animates, and therefore "current slide" should start at 0 and Slide length should be equal to the number of slides times the number of windows.

Therefore the answer is:

$(document).ready(function(){
//configuration
    var width = 100;
    var animationSpeed = 1000;
    var pause = 12000;
    var currentID = 0;
    var currentSlide = 0;
    var height = 100;
    var StopCounting = true;

    //cache DOM     
    var $Slider = $('.sliderWindow');
    var $SlideContainer = $Slider.find(".slidesWindow");
    var $Slides = $SlideContainer.find(".slideWindow");
    var $SlidesLength = 6;
    var interval;


    $Slider.on('mouseenter', pauseSlider).on('mouseleave', startSlider);

//begin the slide show
startSlider();              

function startSlider(){

            //set interval
            interval = setInterval(function(){

                //margin left -720
                $SlideContainer.animate({'margin-left': '-='+width}, animationSpeed, function(){
                //callback
                currentSlide++;
                currentID++;
                    alert(currentSlide);

                //if this is the last slide go to position one (0px)
                if(currentSlide === $SlidesLength){

                currentSlide = 0;
                $SlideContainer.css('margin-left', 0);
                StopCounting = true;
                }


                });

            }, pause);
    }

    //pause the slider by clearing the interval
    function pauseSlider(){
    clearInterval(interval);
    }

});