Slick.js 3 слайда, только хотите, чтобы центральный слайд был «активным» для события клика - PullRequest
Новая
       5

Slick.js 3 слайда, только хотите, чтобы центральный слайд был «активным» для события клика

0 голосов
/ 01 октября 2019

Тестирование карусели изображений, где я хочу, чтобы только центральное изображение имело класс "пятно-активный" и было кликабельным. если пользователь нажимает на активный центр, миниатюра открывает модал, который я уже установил. Моя проблема сейчас заключается в том, что все три слайда (3 из них) имеют класс «slick-active». Есть ли способ сделать это с slick.js? или кастом js? 

html:

<div class="container">
<div class="row">
    <div class="col-12">
        <div class="carousel-slider">
            <div class="inner">
                <a class="modal-trigger--video" data-fancybox href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
                    <img src="poster-thumbnail.png"
                         class="img-fluid"
                         alt="Test">
                </a>
            </div>
            <div class="inner"><a class="modal-trigger--video" data-fancybox
                                  href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
                <img src="poster-thumbnail.png"
                     class="img-fluid"
                     alt="Test">
            </a></div>
            <div class="inner"><a class="trigger--video" data-fancybox
                                  href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
                <img src="carousel-poster-thumbnail.png"
                     class="img-fluid"
                     alt="Test">
            </a></div>
            <div class="inner"><a class="trigger--video" data-fancybox
                                  href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
                <img src="poster-thumbnail.png"
                     class="img-fluid"
                     alt="Test">
            </a></div>
            <div class="inner"><a class="trigger--video" data-fancybox
                                  href="https://www.youtube.com/watch?v=_sI_Ps7JSEk">
                <img src="poster-thumbnail.png"
                     class="img-fluid"
                     alt="Test">
            </a></div>
        </div>
    </div>
</div>


jquery:
  $(document).ready(function () {
    $('.carousel-slider').slick({
        dots: true,
        infinite: true,
        speed: 300,
        slidesToShow: 3,
        slidesToScroll: 1
    });
 });
...