CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Alex
Alex

Reputation: 683

Slideshow is getting stuck on final image

I'm currently trying to implement Javascript to slideshow through images like a carousel (developing for IE8 / IE9, otherwise CSS transitions / bootstrap would be the easier option)

The issue I have is that for the second group of images, it is getting stuck on the final image and not looping round like the first group.

There is also no way to set the interval differently, I tried adding separate ID's but got no luck, checking here to make sure the Javascript is correct.

JS

function slideSwitch() {
    var $active = $('#slideshow IMG.active');

    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');

    var $next =  $active.next().length ? $active.next() : $('#slideshow IMG:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});

HTML

<a href="#">
    <div id="slideshow">
        <img src="images/chelsey.png" alt="" class="active"/>
        <img src="images/rob.png" alt="" />
        <img src="images/chris.png" alt="" />
        <img src="images/alex.png" alt="" />
    </div>
</a>

<a href="#">
    <div id="slideshow">
        <img src="images/ross.png" alt="" class="active"/>
        <img src="images/miryam.png" alt="" />
        <img src="images/jo.png" alt="" />
        <img src="images/katie.png" alt="" />
    </div>
</a>

CSS

#slideshow {
    position:relative;
    height:350px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}

Upvotes: 1

Views: 57

Answers (1)

matthias_h
matthias_h

Reputation: 11416

You are using the same id for both slideshows, but ids have to be unique. You can just switch to classes. In addition, the function has to iterate over multiple slideshows, e.g. by using jQuery each(). Adjusted your Fiddle: 

function slideSwitch() {

    $(".slideshow").each(function () {
        var $active = $(this).find(".active");
        if ($active.length == 0) {
            $active = $(this).find("IMG:last");
        }
        var $next = $active.next().length ? $active.next() : $(this).find("IMG:first");

        $active.addClass('last-active');

        $next.css({
            opacity: 0.0
        })
            .addClass('active')
            .animate({
            opacity: 1.0
        }, 1000, function () {
            $active.removeClass('active last-active');
        });
    });
}

$(function () {
    setInterval("slideSwitch()", 5000);
});
.slideshow {
    position:relative;
    height:350px;
}
.slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
}
.slideshow IMG.active {
    z-index:10;
}
.slideshow IMG.last-active {
    z-index:9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<a href="#">
   <div class="slideshow">
       <img src="http://lorempixel.com/400/200/sports/1/" alt="" class="active"/>
        <img src="http://lorempixel.com/400/200/sports/2/" alt="" />
   </div>
 </a>
 <a href="#">
   <div class="slideshow">
     <img src="http://lorempixel.com/400/200/sports/1/" alt="" class="active"/>
     <img src="http://lorempixel.com/400/200/sports/2/" alt="" />
   </div>
 </a>

Upvotes: 1

Related Questions