Multiple slick sliders on the same page

I put 4 pieces of Slick Slider (Slider Syncing) - this is where there is one big picture at the top, and a carousel of small ones at the bottom, and when you click they increase. The problem is that when you scroll or click on a small image, the images in all sliders are updated. How to solve the problem. Wrapping them in different classes and writing them in js is not an option. I attach the code:

$('.last-works__gallery-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.last-works__gallery-nav'
  });
  $('.last-works__gallery-nav').slick({
    slidesToShow: 2,
    slidesToScroll: 1,
    asNavFor: '.last-works__gallery-for',
    dots: true,
    centerMode: true,
    focusOnSelect: true
  });
.last-works__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 100%;
}

.last-works__gallery {
  position: relative;
  width: 220px
}

.last-works__gallery-for .last-works__gallery-item {
  padding-bottom: 380px;
  background-size: cover !important;
  border-radius: 3px;
}

.last-works__gallery-nav {
  position: initial;
  width: 100%;
  top: 0;
 
}
.last-works__item{
  margin: 20px;
}
.last-works__gallery-nav .draggable {
  top: calc(100% - 55px);
  position: absolute;
  max-width: 120px;
}

.last-works__gallery-nav .slick-slide {
  margin: 0 8px;
}

.last-works__gallery-nav .last-works__gallery-item {
  padding-bottom: 40px;
  border-radius: 3px;
  position: relative;
  background-size: cover !important;
  border: 2px solid transparent;
}

.last-works__gallery-nav .slick-current .last-works__gallery-item {
  border: 2px solid #FF7A00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick-theme.css">
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick.js">
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>

<div class="last-works"> 
      <div class="container"> 
        <div class="row"> 
 
          <div class="last-works__items"> 

<div class="last-works__item col-12 col-lg-6"> 
              <div class="last-works__gallery">
                <div class="last-works__gallery-for"> 
                  <div class="last-works__gallery-item" style="background: url(https://img5.goodfon.ru/wallpaper/nbig/8/9c/abstraktsiia-fon-kartinka-sinii-goluboi-smeshenie-tsvetov-kr.jpg) no-repeat center"> 
                  </div>
                  <div class="last-works__gallery-item" style="background: url(https://s1.1zoom.ru/big0/235/Poppies_Summer_Grasslands_Trees_562184_1270x1024.jpg) no-repeat center">
                  </div>
                  <div class="last-works__gallery-item" style="background: url(https://klike.net/uploads/posts/2019-03/1551772531_1.jpg) no-repeat center"> 
                  </div>
                  <div class="last-works__gallery-item" style="background: url(https://klike.net/uploads/posts/2018-07/1531483091_1.jpg) no-repeat center">
                  </div>
                  <div class="last-works__gallery-item" style="background: url(https://nibler.ru/uploads/posts/2011-01/1294780123_0_50fe9_8d97464a_xl.jpg) no-repeat center"> 
                  </div>
                </div>
                <div class="last-works__gallery-nav">
                                    <div class="last-works__gallery-item" style="background: url(https://img5.goodfon.ru/wallpaper/nbig/8/9c/abstraktsiia-fon-kartinka-sinii-goluboi-smeshenie-tsvetov-kr.jpg) no-repeat center"> 
                  </div>
                  <div class="last-works__gallery-item" style="background: url(https://s1.1zoom.ru/big0/235/Poppies_Summer_Grasslands_Trees_562184_1270x1024.jpg) no-repeat center">
                  </div>
                  <div class="last-works__gallery-item" style="background: url(https://klike.net/uploads/posts/2019-03/1551772531_1.jpg) no-repeat center"> 
                  </div>
                  <div class="last-works__gallery-item" style="background: url(https://klike.net/uploads/posts/2018-07/1531483091_1.jpg) no-repeat center">
                  </div>
                  <div class="last-works__gallery-item" style="background: url(https://nibler.ru/uploads/posts/2011-01/1294780123_0_50fe9_8d97464a_xl.jpg) no-repeat center"> 
                  </div>
                </div>
              </div></div>
            <div class="last-works__item col-12 col-lg-6"> 
              <div class="last-works__gallery">
                <div class="last-works__gallery-for"> 
                  <div class="last-works__gallery-item" style="background: url(https://img5.goodfon.ru/wallpaper/nbig/8/9c/abstraktsiia-fon-kartinka-sinii-goluboi-smeshenie-tsvetov-kr.jpg) no-repeat center"> 
                  </div>
                  <div class="last-works__gallery-item" style="background: url(https://s1.1zoom.ru/big0/235/Poppies_Summer_Grasslands_Trees_562184_1270x1024.jpg) no-repeat center">
                  </div>
                  <div class="last-works__gallery-item" style="background: url(https://klike.net/uploads/posts/2019-03/1551772531_1.jpg) no-repeat center"> 
                  </div>
                  <div class="last-works__gallery-item" style="background: url(https://klike.net/uploads/posts/2018-07/1531483091_1.jpg) no-repeat center">
                  </div>
                  <div class="last-works__gallery-item" style="background: url(https://nibler.ru/uploads/posts/2011-01/1294780123_0_50fe9_8d97464a_xl.jpg) no-repeat center"> 
                  </div>
                </div>
                <div class="last-works__gallery-nav">
                                    <div class="last-works__gallery-item" style="background: url(https://img5.goodfon.ru/wallpaper/nbig/8/9c/abstraktsiia-fon-kartinka-sinii-goluboi-smeshenie-tsvetov-kr.jpg) no-repeat center"> 
                  </div>
                  <div class="last-works__gallery-item" style="background: url(https://s1.1zoom.ru/big0/235/Poppies_Summer_Grasslands_Trees_562184_1270x1024.jpg) no-repeat center">
                  </div>
                  <div class="last-works__gallery-item" style="background: url(https://klike.net/uploads/posts/2019-03/1551772531_1.jpg) no-repeat center"> 
                  </div>
                  <div class="last-works__gallery-item" style="background: url(https://klike.net/uploads/posts/2018-07/1531483091_1.jpg) no-repeat center">
                  </div>
                  <div class="last-works__gallery-item" style="background: url(https://nibler.ru/uploads/posts/2011-01/1294780123_0_50fe9_8d97464a_xl.jpg) no-repeat center"> 
                  </div>
                </div>
              </div>
            </div>
          </div>
         
        </div>
      </div>
    </div>
Author: vantal, 2020-06-23
Source

2 answers

If you can't set unique classes, then iterate over the parent .last-works__gallery, and add a slider to each. And don't forget to link the navigation to the parent $(this)

$( ".last-works__gallery" ).each(function(index) {
  $('.last-works__gallery-for', $(this)).slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: $(this).find('.last-works__gallery-nav')
  });
  $('.last-works__gallery-nav', $(this)).slick({
    slidesToShow: 2,
    slidesToScroll: 1,
    dots: true,
    centerMode: true,
    focusOnSelect: true,
    asNavFor: $(this).find('.last-works__gallery-for')
  });
});
.last-works__items {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  max-width: 100%;
}

.last-works__gallery {
  position: relative;
  width: 220px
}

.last-works__gallery-for .last-works__gallery-item {
  padding-bottom: 380px;
  background-size: cover !important;
  border-radius: 3px;
}

.last-works__gallery-nav {
  position: initial;
  width: 100%;
  top: 0;
}

.last-works__item {
  margin: 20px;
}

.last-works__gallery-nav .draggable {
  top: calc(100% - 55px);
  position: absolute;
  max-width: 120px;
}

.last-works__gallery-nav .slick-slide {
  margin: 0 8px;
}

.last-works__gallery-nav .last-works__gallery-item {
  padding-bottom: 40px;
  border-radius: 3px;
  position: relative;
  background-size: cover !important;
  border: 2px solid transparent;
}

.last-works__gallery-nav .slick-current .last-works__gallery-item {
  border: 2px solid #FF7A00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick.css">
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick-theme.css">
<link rel="stylesheet" href="https://kenwheeler.github.io/slick/slick/slick.js">
<script src="https://kenwheeler.github.io/slick/slick/slick.js"></script>

<div class="last-works">
  <div class="container">
    <div class="row">

      <div class="last-works__items">

        <div class="last-works__item col-12 col-lg-6">
          <div class="last-works__gallery">
            <div class="last-works__gallery-for">
              <div class="last-works__gallery-item" style="background: url(https://img5.goodfon.ru/wallpaper/nbig/8/9c/abstraktsiia-fon-kartinka-sinii-goluboi-smeshenie-tsvetov-kr.jpg) no-repeat center">
              </div>
              <div class="last-works__gallery-item" style="background: url(https://s1.1zoom.ru/big0/235/Poppies_Summer_Grasslands_Trees_562184_1270x1024.jpg) no-repeat center">
              </div>
              <div class="last-works__gallery-item" style="background: url(https://klike.net/uploads/posts/2019-03/1551772531_1.jpg) no-repeat center">
              </div>
              <div class="last-works__gallery-item" style="background: url(https://klike.net/uploads/posts/2018-07/1531483091_1.jpg) no-repeat center">
              </div>
              <div class="last-works__gallery-item" style="background: url(https://nibler.ru/uploads/posts/2011-01/1294780123_0_50fe9_8d97464a_xl.jpg) no-repeat center">
              </div>
            </div>
            <div class="last-works__gallery-nav">
              <div class="last-works__gallery-item" style="background: url(https://img5.goodfon.ru/wallpaper/nbig/8/9c/abstraktsiia-fon-kartinka-sinii-goluboi-smeshenie-tsvetov-kr.jpg) no-repeat center">
              </div>
              <div class="last-works__gallery-item" style="background: url(https://s1.1zoom.ru/big0/235/Poppies_Summer_Grasslands_Trees_562184_1270x1024.jpg) no-repeat center">
              </div>
              <div class="last-works__gallery-item" style="background: url(https://klike.net/uploads/posts/2019-03/1551772531_1.jpg) no-repeat center">
              </div>
              <div class="last-works__gallery-item" style="background: url(https://klike.net/uploads/posts/2018-07/1531483091_1.jpg) no-repeat center">
              </div>
              <div class="last-works__gallery-item" style="background: url(https://nibler.ru/uploads/posts/2011-01/1294780123_0_50fe9_8d97464a_xl.jpg) no-repeat center">
              </div>
            </div>
          </div>
        </div>
        <div class="last-works__item col-12 col-lg-6">
          <div class="last-works__gallery">
            <div class="last-works__gallery-for">
              <div class="last-works__gallery-item" style="background: url(https://img5.goodfon.ru/wallpaper/nbig/8/9c/abstraktsiia-fon-kartinka-sinii-goluboi-smeshenie-tsvetov-kr.jpg) no-repeat center">
              </div>
              <div class="last-works__gallery-item" style="background: url(https://s1.1zoom.ru/big0/235/Poppies_Summer_Grasslands_Trees_562184_1270x1024.jpg) no-repeat center">
              </div>
              <div class="last-works__gallery-item" style="background: url(https://klike.net/uploads/posts/2019-03/1551772531_1.jpg) no-repeat center">
              </div>
              <div class="last-works__gallery-item" style="background: url(https://klike.net/uploads/posts/2018-07/1531483091_1.jpg) no-repeat center">
              </div>
              <div class="last-works__gallery-item" style="background: url(https://nibler.ru/uploads/posts/2011-01/1294780123_0_50fe9_8d97464a_xl.jpg) no-repeat center">
              </div>
            </div>
            <div class="last-works__gallery-nav">
              <div class="last-works__gallery-item" style="background: url(https://img5.goodfon.ru/wallpaper/nbig/8/9c/abstraktsiia-fon-kartinka-sinii-goluboi-smeshenie-tsvetov-kr.jpg) no-repeat center">
              </div>
              <div class="last-works__gallery-item" style="background: url(https://s1.1zoom.ru/big0/235/Poppies_Summer_Grasslands_Trees_562184_1270x1024.jpg) no-repeat center">
              </div>
              <div class="last-works__gallery-item" style="background: url(https://klike.net/uploads/posts/2019-03/1551772531_1.jpg) no-repeat center">
              </div>
              <div class="last-works__gallery-item" style="background: url(https://klike.net/uploads/posts/2018-07/1531483091_1.jpg) no-repeat center">
              </div>
              <div class="last-works__gallery-item" style="background: url(https://nibler.ru/uploads/posts/2011-01/1294780123_0_50fe9_8d97464a_xl.jpg) no-repeat center">
              </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
 2
Author: Kjuri, 2020-06-23 18:56:44
  1. Building a collection of classes
  2. Initialize each element of the collection in a loop

var slick_view = document.querySelectorAll(".po-slider-view");
var slick_nav = document.querySelectorAll(".po-slider-nav");
    for (var i = 0; i < slick_view.length; i++) {
        $(slick_view[i]).slick({
            slidesToShow: 1,
            slidesToScroll: 1,
            arrows: false,
            fade: true,
            asNavFor: slick_nav[i]
        });
        $(slick_nav[i]).slick({
            slidesToShow: 3,
            slidesToScroll: 1,
            asNavFor: slick_view[i],
            dots: false,
            centerMode: true,
            focusOnSelect: true,
            vertical: true,
            verticalSwiping: true
        });
    }
 0
Author: Дмитрий, 2020-06-25 08:49:00