Скрыть активный слайд в слайдере asNavFor в слайдере Slick - PullRequest
Новая
       88

Скрыть активный слайд в слайдере asNavFor в слайдере Slick

0 голосов
/ 25 февраля 2020

Вопрос

Есть ли способ скрыть активный в настоящий момент слайд от слайдера в Slick Slider?

Мотивация

Я создаю слайдер Featured Posts. Один пост будет размещен на видном месте, а остальные посты будут отображаться в виде предварительного просмотра в столбце на боковой панели. Всего будет отображаться 5 сообщений одновременно.

Это довольно легко сделать с помощью Slick Slider (1.9.0), но у него есть одна проблема: раздел «оставшиеся сообщения» должен только показывать оставшиеся посты, а не текущий пост. Поэтому, когда сообщение выбрано, оно должно прокручиваться в поле зрения ползунка, и показанный слайдер сообщений изменится на использование слайда с тем же индексом.

Описание действия

В основном, начальное состояние должно быть:

Избранный слайдер: слайд 1 виден, все остальные скрыты. Оставшийся слайдер: слайд 1 скрыт, слайды 2-5 видимы.

Если я нажму на слайд 2 с оставшегося слайдера:

Избранный слайдер: слайд 2 виден, все остальные скрыты , Оставшийся ползунок: слайд 2 скользит вне поля зрения, слайд 3 становится новым верхним сообщением, за которым (по порядку) 4, 5, 1.

JS Fiddle

Вот JS Скрипка, над которой я работаю: https://jsfiddle.net/zak_rhm/Lks61ah7/71/

HTML

<div id="Large_Slider">
    <!-- Should only show one slide at a time. -->
    <article class="slide">
        <h2>Slide 1</h2>
    </article>
    <article class="slide">
        <h2>Slide 2</h2>
    </article>
    <article class="slide">
        <h2>Slide 3</h2>
    </article>
    <article class="slide">
        <h2>Slide 4</h2>
    </article>
    <article class="slide">
        <h2>Slide 5</h2>
    </article>
</div>
<ul id="Small_Slider">
    <!-- Should only show four slides at a time, never show the slide in #Large_Slider -->
    <li id="slide">Slide 1</li>
    <li id="slide">Slide 2</li>
    <li id="slide">Slide 3</li>
    <li id="slide">Slide 4</li>
    <li id="slide">Slide 5</li>
</ul>

JavaScript (jQuery) 

var $slider_lg = $("#Large_Slider")
var $slider_sm = $("#Small_Slider")

$slider_lg.slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  asNavFor: '#Small_Slider',
  dots: true,
  fade: true
});

$slider_sm.slick({
  arrows: false,
  slidesToShow: 4,
  slidesToScroll: 1,
  asNavFor: '#Large_Slider',
  focusOnSelect: true,
  vertical: true,
  verticalSwiping: true
});

1 Ответ

0 голосов
/ 27 февраля 2020

Это должно сделать то, что вы ищете: https://jsfiddle.net/kmsv5xn8/

Я изменил ваш HTML так, чтобы раздел «Small_Slider» начинался с # 2 и каждый слайд имел data-sm-slide атрибут: 

<ul id="Small_Slider" class="slick-slider">
  <li id="sm-slide-2" class="slide slide--sm" data-sm-slide="2">
    <img src="https://via.placeholder.com/640x480.png/0f9/333?text=Slide+2" alt="Slide 2" height="48" width="64" class="slide--sm__img" />
    <span class="slide--sm__title">Slide 2</span>
  </li>
  <li id="sm-slide-3" class="slide slide--sm" data-sm-slide="3">
    <img src="https://via.placeholder.com/640x480.png/f09/fff?text=Slide+3" alt="Slide 3" height="48" width="64" class="slide--sm__img" />
    <span class="slide--sm__title">Slide 3</span>
  </li>
  <li id="sm-slide-4" class="slide slide--sm" data-sm-slide="4">
    <img src="https://via.placeholder.com/640x480.png/f90/333?text=Slide+4" alt="Slide 4" height="48" width="64" class="slide--sm__img" />
    <span class="slide--sm__title">Slide 4</span>
  </li>
  <li id="sm-slide-5" class="slide slide--sm" data-sm-slide="5">
    <img src="https://via.placeholder.com/640x480.png/90f/fff?text=Slide+5" alt="Slide 5" height="48" width="64" class="slide--sm__img" />
    <span class="slide--sm__title">Slide 5</span>
  </li>
  <li id="sm-slide-1" class="slide slide--sm" data-sm-slide="1">
    <img src="https://via.placeholder.com/640x480.png/09f/333?text=Slide+1" alt="Slide 1" height="48" width="64" class="slide--sm__img" />
    <span class="slide--sm__title">Slide 1</span>
  </li>
</ul>

Он учитывает начальное смещение, однако для отображения правильных слайдов я отключил свойство focusOnSelect: true и вместо него добавил прослушиватель событий: 

$slider_sm.on("click", "li.slide", function() {
  var slideNo = $(this).attr("data-sm-slide") - 1;
  $slider_lg.slick("slickGoTo", slideNo);
})

Соответствующий индекс слайда берется из атрибута data-* и обновляет основную карусель; поскольку Slick использует свойство asNavFor, остальное позаботится обо всем остальном.

...