Как зафиксировать позицию слайда?

Question

Есть слайдер из n элементов

Если я выделяю например 3, и жму next, у меня должно получится вот так:

Т.е 3 осталась на месте, а все следующие слайды как бы "прошли сквозь" этот слайд. Иначе говоря 3 меняется местами с каждым следующим слайдом.

Поведение странное, никогда не доводилось такого не то что решать, даже видеть в действии. Может кто решал подобного рода задачи. Если есть слайдер на котором такое реализовать легче, либо такое есть из "коробки", то будет замечательно.

$(document).ready(function(){

  $('.slider').slick({
    dots: false,
    infinite: false,
    speed: 300,
    slidesToShow: 5,
    slidesToScroll: 1,
    responsive: [
      {
        breakpoint: 1024,
        settings: {
          slidesToShow: 3,
        }
      },
      {
        breakpoint: 600,
        settings: {
          slidesToShow: 2,
        }
      },
      {
        breakpoint: 480,
        settings: {
          slidesToShow: 1,
        }
      }
    ]
  });

  $('.slide').on('click', function() {
    $(this).toggleClass('locked');
  });

});

body {
  background: #FFF;
  padding: 20px;
  font-family: Helvetica;
}

.slider {
  color: #333;
  padding:0 0 30px;
}

.slide {
  font-size: 90px;
  width: 150px;
  padding:10px 0;
  margin:20px 15px;
  text-align: center;
  border: 1px solid #999;
}
.slide.locked { background: rgba(255,255,0,0.5); }

.slick-prev, .slick-next {
  position: absolute;
  bottom:0;
}
.slick-next { left:80px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css" rel="stylesheet"/>
<div class="slider">
  <div class="slide">1</div>
  <div class="slide">2</div>
  <div class="slide">3</div>
  <div class="slide">4</div>
  <div class="slide">5</div>
  <div class="slide">6</div>
  <div class="slide">7</div>
  <div class="slide">8</div>
  <div class="slide">9</div>
</div>

БЛОГ НА HUSL

Как зафиксировать позицию слайда?

Ответы (0 шт):