The script does not work when there is more than one slider on the page

Question

I have a slider on the page that switches images


  
    
      @if(!empty($article_block_images))
        @foreach($article_block_images as $article_block_image)
          
            @if($loop->first)
              {{ $article_block_image->title }}
            @endif
          
        @endforeach
      @endif
      @if(!empty($article_block_images))
        @foreach($article_block_images as $article_block_image)
          
            
              
              
              
            
          
        @endforeach 
      @endif
      
        @if($articleBlockImagesCount > 1)
          @if(!empty($article_block_images)) 
            @foreach($article_block_images as $article_block_image)
              first) class="img-to-select__item  selected" @else class="img-to-select__item" @endif>
                
              
            @endforeach 
          @endif
        @endif

$('.img-to-select__item').click(function () {
  $('.img-to-select__item').removeClass('selected');
  $(this).addClass('selected');
  let index = $(this).index();
  $('.main-image').hide();
  $('.main-image').eq(index).show();
  $('.custom-carousel__title > span').html($(this).children('img').attr('data-title'));
});

It works when there is only one such slider on the page, here is an example

https://jsfiddle.net/a9yvdu75/

Here the code is slightly different from mine, but in general the principle is the same

When there are two sliders on the page, then everything does not work correctly, here is an example

https://jsfiddle.net/9std8k3u/

How can this be fixed?

I tried this

$('.img-to-select__item').click(function () {
  let currentSelection = $(this);

  $('.img-to-select__item').removeClass('selected');
  $(currentSelection).addClass('selected');
  let index = $(currentSelection).index();
  $(currentSelection).closest('.img-to-select').prevAll('.main-image').hide();
  $(currentSelection).closest('.img-to-select').prevAll('.main-image').eq(index).show();
  $(currentSelection).closest('.img-to-select').prevAll('.custom-carousel__title > span').find('span').html($(currentSelection).children('img').attr('data-title'));
});

Everything seems to work, but when you select a preview picture, the main one displays not the one you need, but the neighboring one

user_401278 · Answer

You need to get elements from your clicked element with $(this).

https://api.jquery.com/closest/

https://api.jquery.com/prevall/

$('.img-to-select__item').click(function () {
  let currentSelection = $(this);
  let imgToSelect = $(currentSelection).closest('.img-to-select');
  let imgURL = $(currentSelection).find('img').attr('src');
  let imgTitle = $(currentSelection).find('img').attr('data-title');
  
  $('.img-to-select__item').removeClass('selected');
  $(currentSelection).addClass('selected');
  
  
  $(imgToSelect).prevAll('.main-image').find('img').attr('src', imgURL);
  $(imgToSelect).prevAll('.custom-carousel__title').find('span').html(imgTitle);
  
  // debug infos
  //console.clear();
  //console.log(imgURL);
  //console.log(imgTitle);
});

.custom-carousel {
  text-align: center;
}
.main-image > img {
  width:50px;
}
.img-to-select > .img-to-select__item > img {
  height:30px;
  width: 30px;
}
.img-to-select {
  overflow: hidden; 
  display: flex; 
  justify-content:space-around;
}
.img-to-select > .img-to-select__item {
   display: flex; 
   justify-content:space-around;
}

.img-to-select > .img-to-select__item.selected {
   border: 2px
}

The script does not work when there is more than one slider on the page

1 Answers