CODEWITHSUNDEEP
jqueryhtmlcss
twinaholic
twinaholic

Reputation: 125

Adding more than one jquery image slider

I've been breaking my head on this, I'm trying to have more than one image slider on a page but can't seem to get it to work. This slider does work but when I duplicate the slider to add more and then when you click next to slide the image slider all the other sliders are effected causing them all to slide, I'm trying to make it so when you click on that one slider for only that one slider to be effected not all.

If you need any more code or some more explanation, let me know and I'll be more then happy to give more.

*Side note - I've tried using "$(this)" but doesn't work I just get an error I guess because I'm not using it right although I have used it before on other projects. 

 function changeSlide(direction){

            var currentImg = $('.active');
            
            var nextImg = currentImg.next();
            
            var prevImg = currentImg.prev();
            
            if(direction == 'next'){
                if(nextImg.length)
                    nextImg.addClass('active');
    
                else
                    $('.NxtImg1 img').first().addClass('active');
            } else{
                if (prevImg.length)
                    prevImg.addClass('active');
                else 
             $('.NxtImg1 img').last().addClass('active');
            }
            
            currentImg.removeClass('active');
        }
        
  
                .injuryimg{
                    width: 100%;
                    height: auto;
                    display: flex;
                    flex-wrap: wrap;
                }
                .prev{
                    margin: 0px auto;
                    margin-left: 0px;
                    padding: 8px 5px;
                    background: #555;
                    color: #fff;
                    display: inline-block;
                    width: fit-content;
                    height: auto;
                    cursor: pointer;
                }
                .next{
                    margin: 0px auto;
                    margin-right: 0px;
                    padding: 8px 5px;
                    background: #555;
                    color: #fff;
                    display: inline-block;
                    width: fit-content;
                    height: auto;
                    cursor: pointer;
                }

                
                .NxtImg1{
                    width: 100%;
                    height: 300px;
                    display: block;
                    overflow: hidden;
                }

                
                .NxtImg1 img{
                    width: 100%;
                    height: auto;
                    display: none;

                }

                .NxtImg1 img.active{
                    display: block;
                    width: 100%;
                    height: auto;

                }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  class="injuryimg">
                <div class="NxtImg1">
                    <img class="active" src="https://image.shutterstock.com/z/stock-photo-white-empty-information-mock-up-on-city-bus-stop-blank-vertical-billboard-near-paved-road-with-red-653925340.jpg">
                    <img src="https://image.shutterstock.com/z/stock-photo-glass-city-bus-stop-with-mock-up-of-information-poster-vertical-blank-billboard-near-road-empty-656736946.jpg">
                    <img src="https://image.shutterstock.com/z/stock-photo-horizontal-blank-information-banner-standing-near-wooden-stage-empty-mock-up-of-poster-in-urban-741343954.jpg">
                </div>
                <a class="prev" onclick="changeSlide('prev')">Prev</a><a class="next" onclick="changeSlide('next')" >Next</a>
            </div>

  <div  class="injuryimg">
                <div class="NxtImg1">
                    <img class="active" src="https://image.shutterstock.com/z/stock-photo-white-empty-information-mock-up-on-city-bus-stop-blank-vertical-billboard-near-paved-road-with-red-653925340.jpg">
                    <img src="https://image.shutterstock.com/z/stock-photo-glass-city-bus-stop-with-mock-up-of-information-poster-vertical-blank-billboard-near-road-empty-656736946.jpg">
                    <img src="https://image.shutterstock.com/z/stock-photo-horizontal-blank-information-banner-standing-near-wooden-stage-empty-mock-up-of-poster-in-urban-741343954.jpg">
                </div>
                <a class="prev" onclick="changeSlide('prev')">Prev</a><a class="next" onclick="changeSlide('next')" >Next</a>
            </div>

Upvotes: 1

Views: 189

Answers (3)

Pete
Pete

Reputation: 58412

You need to pass the element that is clicked into your function so you can then only find the elements in regards to the container that you are in

function changeSlide(currentElem, direction) {

  var $container = $(currentElem).closest('.injuryimg');  // find the closest parent container to the button that has been clicked with this class
  var currentImg = $container.find('.active');    // only get the active image within that container
  var nextImg = currentImg.next();
  var prevImg = currentImg.prev();

  if (direction == 'next') {
    if (nextImg.length)
      nextImg.addClass('active');
    else
      $container.find('img').first().addClass('active');
  } else {
    if (prevImg.length)
      prevImg.addClass('active');
    else
      $container.find('img').last().addClass('active');
  }

  currentImg.removeClass('active');
}
.injuryimg {
  width: 100%;
  height: auto;
  display: flex;
  flex-wrap: wrap;
}

.prev {
  margin: 0px auto;
  margin-left: 0px;
  padding: 8px 5px;
  background: #555;
  color: #fff;
  display: inline-block;
  width: fit-content;
  height: auto;
  cursor: pointer;
}

.next {
  margin: 0px auto;
  margin-right: 0px;
  padding: 8px 5px;
  background: #555;
  color: #fff;
  display: inline-block;
  width: fit-content;
  height: auto;
  cursor: pointer;
}

.NxtImg1 {
  width: 100%;
  height: 300px;
  display: block;
  overflow: hidden;
}

.NxtImg1 img {
  width: 100%;
  height: auto;
  display: none;
}

.NxtImg1 img.active {
  display: block;
  width: 100%;
  height: auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="injuryimg">
  <div class="NxtImg1">
    <img class="active" src="https://image.shutterstock.com/z/stock-photo-white-empty-information-mock-up-on-city-bus-stop-blank-vertical-billboard-near-paved-road-with-red-653925340.jpg">
    <img src="https://image.shutterstock.com/z/stock-photo-glass-city-bus-stop-with-mock-up-of-information-poster-vertical-blank-billboard-near-road-empty-656736946.jpg">
    <img src="https://image.shutterstock.com/z/stock-photo-horizontal-blank-information-banner-standing-near-wooden-stage-empty-mock-up-of-poster-in-urban-741343954.jpg">
  </div>
  <a class="prev" onclick="changeSlide(this, 'prev')">Prev</a><a class="next" onclick="changeSlide(this, 'next')">Next</a>
</div>

<div class="injuryimg">
  <div class="NxtImg1">
    <img class="active" src="https://image.shutterstock.com/z/stock-photo-white-empty-information-mock-up-on-city-bus-stop-blank-vertical-billboard-near-paved-road-with-red-653925340.jpg">
    <img src="https://image.shutterstock.com/z/stock-photo-glass-city-bus-stop-with-mock-up-of-information-poster-vertical-blank-billboard-near-road-empty-656736946.jpg">
    <img src="https://image.shutterstock.com/z/stock-photo-horizontal-blank-information-banner-standing-near-wooden-stage-empty-mock-up-of-poster-in-urban-741343954.jpg">
  </div>
  <a class="prev" onclick="changeSlide(this, 'prev')">Prev</a><a class="next" onclick="changeSlide(this, 'next')">Next</a>
</div>

Upvotes: 1

Adder
Adder

Reputation: 5868

Attaching the slider function with jQuery preserves this and makes using $(this) possible. Using closest to find the super-element having the desired filter condition.

function changeSlidePrev(){
    var $parent = $(this).closest('.NxtImg1');
    var currentImg = $parent.find('.active');
    var prevImg = currentImg.prev();

    if (prevImg.length)
        prevImg.addClass('active');
    else 
        $parent.find('img').last().addClass('active');

    currentImg.removeClass('active');
}

function changeSlideNext(){
    var $parent = $(this).closest('.NxtImg1');
    var currentImg = $parent.find('.active');

    var nextImg = currentImg.next();
        if(nextImg.length)
            nextImg.addClass('active');
        else
            $parent.find('img').first().addClass('active');

    currentImg.removeClass('active');
}

$(document.body).on('click','.prev', changeSlidePrev);
$(document.body).on('click','.next', changeSlideNext);

//and remove changeslide from <a class="prev" onclick="changeSlide('prev')">Prev</a> etc.

Upvotes: 0

Mick
Mick

Reputation: 917

It changes both sliders because, this will target both slide shows:

var currentImg = $('.active');

Instead you should use the event from the click handler, to find out which one to change the image on.

Upvotes: 1

Related Questions