CODEWITHSUNDEEP
javascripthtmljquery
Lorenzo Franzone
Lorenzo Franzone

Reputation: 143

How to control a single carousel in a page with more carousels?

I'am studying and experimenting with javascript and jquery*. I'm creating an image slider, one works correctly, but when I decided to try to insert more than one on the same page, I realized that, of course, the controls to go to the next and previous images affect all the sliders on the page. I would like to click on one of them to check only the corresponding carousel ... do you have any advice to implement in my code? thank you very much.

HTML

<div class="slider">
  <div class="images">
    <img class="first active" src="https://source.unsplash.com/1600x900/?nature" alt="">
    <img src="https://source.unsplash.com/1600x900/?water" alt="">
    <img src="https://source.unsplash.com/1600x900/?food" alt="">
    <img class="last" src="https://source.unsplash.com/1600x900/?business" alt="">
  </div>
  <div class="nav">
    <div class="next">></div>
    <div class="prev"><</div>
  </div>
</div>
  
<div class="slider">
  <div class="images">
    <img class="first active" src="https://source.unsplash.com/1600x900/?nature" alt="">
    <img src="https://source.unsplash.com/1600x900/?water" alt="">
    <img src="https://source.unsplash.com/1600x900/?food" alt="">
    <img class="last" src="https://source.unsplash.com/1600x900/?business" alt="">
  </div>
  <div class="nav">
    <div class="next">></div>
    <div class="prev"><</div>
  </div>
</div>
```

-----
JS
-----
```
$('.next').on('click',function(){
    goNext();
});

$('.prev').on('click',function(){
    goPrev();
});


function goNext(){
    var imgActive = $('img.active');
    var imgNext = $('img.active').next();

    if(imgActive.hasClass('last') == true){
        imgActive.removeClass('active');
        $('img.first').addClass('active');
    } else{
        imgActive.removeClass('active');
        imgNext.addClass('active');
    }
}

function goPrev(){
    var imgActive = $('img.active');
    var imgPrev = $('img.active').prev();

    if(imgActive.hasClass('first') == true){
        imgActive.removeClass('active');
        $('img.last').addClass('active');
    } else{
        imgActive.removeClass('active');
        imgPrev.addClass('active');
    }
}
```

Upvotes: 0

Views: 105

Answers (1)

Will
Will

Reputation: 1193

What you can do is call the parent slider instead of manipulating objects throughout the document.

I didn't test the code below but assuming your code works on all sliders, this should work as intended:

$('.next').on('click',function(){
    goNext($(this));
});

$('.prev').on('click',function(){
    goPrev($(this));
});


function goNext(control){

    var slider = control.parents(".slider");
    var imgActive = slider.find('img.active');
    var imgNext = slider.find('img.active').next();

    if(imgActive.hasClass('last') == true){
        imgActive.removeClass('active');
        slider.find('img.first').addClass('active');
    } else{
        imgActive.removeClass('active');
        imgNext.addClass('active');
    }
}

function goPrev(control){

    var slider = control.parents(".slider");
    var imgActive = slider.find('img.active');
    var imgPrev = slider.find('img.active').prev();

    if(imgActive.hasClass('first') == true){
        imgActive.removeClass('active');
        slider.find('img.last').addClass('active');
    } else{
        imgActive.removeClass('active');
        imgPrev.addClass('active');
    }
}

Upvotes: 1

Related Questions