CODEWITHSUNDEEP
javascriptjquerycss
dario
dario

Reputation: 15

multiple slideshow with same script

I have this code right for my aim but it works for a single slideshow; with multiple slideshow, wherever I mouseover, it makes all slideshows run, depending on same class, but if I try to assign different class, it's a mess:

function slideImages(){
      var $active = $('.portfolio_slider .active');
      var $next = ($('.portfolio_slider .active').next().length > 0) ? $('.portfolio_slider .active').next() : $('.portfolio_slider img:first');
      $next.css('z-index',2);
      $active.css('z-index',1);
      $next.animate({left:0},"fast",function(){

              $next.addClass('active');
        });
    }

    $(document).ready(function(){

    $('.portfolio_slider').on('mouseover', function(){
        setInterval(slideImages, 400);
        $(this).off('mouseover');

    })
})

css:

.portfolio_slider{position:relative; width:100px; height:250px; overflow:hidden;}
.portfolio_slider img{position:absolute;left:100px;}
.portfolio_slider img.active{left:0}

I'm quite new to js-jquery...any help?

html:

<div class="portfolio_slider"> 
<img class="active" src="1.jpg" width="100" height="170">
<img src="2.jpg" width="100" height="170">
<img src="3.jpg" width="100" height="170">
<img src="5.jpg" width="100" height="170">
<img src="6.jpg" width="100" height="170">
<img src="1.jpg" width="100" height="170">

</div>

Upvotes: 0

Views: 199

Answers (1)

Scimonster
Scimonster

Reputation: 33399

You should pass the slider you want to use to the slideImages function, and then only use its elements.

function slideImages(slider){ // slider is the element
      var $active = $('.active', slider); // search for .active in this element
      var $next = ($('.active', slider).next().length > 0) ? $('.active', slider).next() : $('img:first', slider);
      $next.css('z-index',2);
      $active.css('z-index',1);
      $next.animate({left:0},"fast",function(){

              $next.addClass('active');
        });
    }

    $(document).ready(function(){

    $('.portfolio_slider').on('mouseover', function(){
        var _this = this; // save it for other context
        setInterval(function(){
            slideImages(_this);
        }, 400);
        $(this).off('mouseover');

    });
});

Upvotes: 1

Related Questions