Slickスライダー - ポップアップで3つのスライドを表示

Question

以下のコードは、スライドをクリックするとカルーセル全体をポップアップさせる滑らかなカルーセルです。それは滑らかなスライダで行われます。

一度に1つのスライダが表示され、3つのスライドを表示する必要があるため、ポップアップカルーセルに問題があります。なぜそれが動作しないのかわからないので、slidesToShow: 3があります。 .. アイデア？組み込み

コード：

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
    <script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
    <script src="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.js" type="text/javascript" charset="utf-8"></script> 

    <link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.css"> 
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"> 
    <link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/gh-pages/bower_components/slick-carousel/slick/slick-theme.css"> 

CSS：

.slider { 
     width: 50%; 
     margin: 100px auto; 
    } 

    .slick-slide { 
     margin: 0px 20px; 
    } 

    .slick-slide img { 
     width: 100%; 
    } 

    .slick-prev:before, 
    .slick-next:before { 
     color: black; 
    } 

HTML：

<section class="center slider"> 
    <div class="single"> 
     <a href="http://placehold.it/350x300?text=1"> 
     <img src="http://placehold.it/350x300?text=1"> 
     </a> 
    </div> 
    <div class="single"> 
     <a href="http://placehold.it/350x300?text=2"> 
     <img src="http://placehold.it/350x300?text=2"> 
     </a> 
    </div> 
    <div class="single"> 
     <a href="http://placehold.it/350x300?text=3"> 
     <img src="http://placehold.it/350x300?text=3"> 
     </a> 
    </div> 
    <div class="single"> 
     <a href="http://placehold.it/350x300?text=4"> 
     <img src="http://placehold.it/350x300?text=4"> 
     </a> 
    </div> 
</section> 

JS：

<script type="text/javascript"> 
    $(document).on('ready', function() { 


     $(".center").slick({ 
     dots: true, 
     infinite: true, 
     centerMode: true, 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     mobileFirst: true 
     }); 

     $('.center').slickLightbox({ 
     itemSelector: 'a', 
     navigateByKeyboard: true, 
     dots: true, 
     infinite: true, 
     centerMode: true, 
     slidesToShow: 3, 
     slidesToScroll: 1, 
     mobileFirst: true 
     }); 

    }); 
    </script> 

Answer 1

：他のすべてのオプションについては

$('.center').slickLightbox({ 
    slick: { 
     itemSelector: 'a', 
     navigateByKeyboard: true, 
     dots: true, 
     infinite: true, 
     centerMode: true, 
     slidesToShow: 3, 
     slidesToScroll: 1, 
     mobileFirst: true 
    } 
    }); 

はここをチェック：https://github.com/mreq/slick-lightbox

$(document).ready(function() { 
 
    $(".center").slick({ 
 
    dots: true, 
 
    infinite: true, 
 
    centerMode: true, 
 
    slidesToShow: 1, 
 
    slidesToScroll: 1, 
 
    mobileFirst: true 
 
    }); 
 

 
    $('.center').slickLightbox({ 
 
    slick: { 
 
     itemSelector: 'a', 
 
     navigateByKeyboard: true, 
 
     dots: true, 
 
     infinite: true, 
 
     centerMode: true, 
 
     slidesToShow: 3, 
 
     slidesToScroll: 1, 
 
     mobileFirst: true 
 
    } 
 
    }); 
 
});

.slider { 
 
    width: 50%; 
 
    margin: 100px auto; 
 
} 
 

 
.slick-slide { 
 
    margin: 0px 20px; 
 
} 
 

 
.slick-slide img { 
 
    width: 100%; 
 
} 
 

 
.slick-prev:before, 
 
.slick-next:before { 
 
    color: black; 
 
}

<link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.css"> 
 
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"> 
 
<link rel="stylesheet" type="text/css" href="https://mreq.github.io/slick-lightbox/gh-pages/bower_components/slick-carousel/slick/slick-theme.css"> 
 

 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script> 
 
<script src="https://mreq.github.io/slick-lightbox/dist/slick-lightbox.js" type="text/javascript" charset="utf-8"></script> 
 

 

 

 

 
<section class="center slider"> 
 
    <div class="single"> 
 
    <a href="http://placehold.it/350x300?text=1"> 
 
     <img src="http://placehold.it/350x300?text=1"> 
 
    </a> 
 
    </div> 
 
    <div class="single"> 
 
    <a href="http://placehold.it/350x300?text=2"> 
 
     <img src="http://placehold.it/350x300?text=2"> 
 
    </a> 
 
    </div> 
 
    <div class="single"> 
 
    <a href="http://placehold.it/350x300?text=3"> 
 
     <img src="http://placehold.it/350x300?text=3"> 
 
    </a> 
 
    </div> 
 
    <div class="single"> 
 
    <a href="http://placehold.it/350x300?text=4"> 
 
     <img src="http://placehold.it/350x300?text=4"> 
 
    </a> 
 
    </div> 
 
</section>

Answer 2

jQueryは使用しませんが、私は時々Slickを行います。同じマークアップから別のインスタンスを開始しようとしているようですが、slickjsにインスタンスが既に存在している可能性があります。slickLightbox - 素早く読んで、slickjsのプラグイン/拡張機能です。

私は、各スライドパネルにリスナーを追加することをお勧めします。クリックすると、slickLightboxの新しいインスタンスが作成されます。これには別のマークアップが必要です（インスタンスが衝突しないように、両方を分けておくこと）。

// mind typos, did this quickly, but the syntax should be similar 
    var panels = document.querySelectorAll('.slick .single') 
    panels.addEventListener('click', function() { 
     $('.cloned-markup').slickLightbox({ 
     itemSelector: 'a', 
     navigateByKeyboard: true, 
     dots: true, 
     infinite: true, 
     centerMode: true, 
     slidesToShow: 3, 
     slidesToScroll: 1, 
     mobileFirst: true 
     }); 
    }) 

、余分なマークアップ：あなたはこのようにカルーセルする滑らかなオプション渡す必要があり

<div class="cloned-markup"> 
    <div class="single"> 
     <a href="http://placehold.it/350x300?text=1"> 
     <img src="http://placehold.it/350x300?text=1"> 
     </a> 
    </div> 
    <div class="single"> 
     <a href="http://placehold.it/350x300?text=2"> 
     <img src="http://placehold.it/350x300?text=2"> 
     </a> 
    </div> 
    <div class="single"> 
     <a href="http://placehold.it/350x300?text=3"> 
     <img src="http://placehold.it/350x300?text=3"> 
     </a> 
    </div> 
    <div class="single"> 
     <a href="http://placehold.it/350x300?text=4"> 
     <img src="http://placehold.it/350x300?text=4"> 
     </a> 
    </div> 
</div>