Slickスライダでズーム機能を実装する

Question

プロジェクトで滑らかなスライダを実装しました。

2番目のスライダサムネイルを選択すると、最初のスライダが適切に機能します。

通常のスライダである最初のスライダのすべての画像にカーソルを置くとズーム機能が必要になります。

また、通常のスライダの左側に小さいサムネイルスライダを配置する必要があります。

どうすればこの問題を解決できますか？

$(".regular").slick({ 
 
    dots: false, 
 
    infinite: true, 
 
    slidesToShow: 2, 
 
    slidesToScroll: 1, 
 
    asNavFor: '.slider-nav', 
 
    autoPlay: true 
 
}); 
 
$('.slider-nav').slick({ 
 
    slidesToShow: 0, 
 
    slidesToScroll: 0, 
 
    asNavFor: '.regular', 
 
    dots: false, 
 
    focusOnSelect: true, 
 
    arrows: false, 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/> 
 
<style> 
 
html, body { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 

 
    * { 
 
     box-sizing: border-box; 
 
    } 
 

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

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

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

 
    .slick-prev:before, 
 
    .slick-next:before { 
 
     color: black; 
 
    } 
 
    .slider-nav img{width: 15%;display: inline-block !important;float: left;margin: 10px 8px;} 
 
</style> 
 

 
    <section class="slider regular"> 
 
     <div> 
 
      <img src="http://placehold.it/350x300?text=1"> 
 
     </div> 
 
     <div> 
 
      <img src="http://placehold.it/350x300?text=2"> 
 
     </div> 
 
     <div> 
 
      <img src="http://placehold.it/350x300?text=3"> 
 
     </div> 
 
     <div> 
 
      <img src="http://placehold.it/350x300?text=4"> 
 
     </div> 
 
     <div> 
 
      <img src="http://placehold.it/350x300?text=5"> 
 
     </div> 
 
     <!-- <div> --> 
 
      <!-- <img src="http://placehold.it/350x300?text=6"> --> 
 
     <!-- </div> --> 
 
     </section> 
 
     <section class="slider slider-nav"> 
 
    \t \t <img src="http://placehold.it/350x300?text=1"> 
 
    \t \t <img src="http://placehold.it/350x300?text=2"> 
 
    \t \t <img src="http://placehold.it/350x300?text=3"> 
 
    \t \t <img src="http://placehold.it/350x300?text=4"> 
 
    \t \t <img src="http://placehold.it/350x300?text=5"> 
 
    \t </section> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>

Answer 1

.slider.regular img:hover { 
    transform: scale(1.1); 
} 

のような単純なものではホバー上の画像を拡大縮小するために仕事をするだろう。必要に応じてtransition効果を追加できます。

$(".regular").slick({ 
 
    dots: false, 
 
    infinite: true, 
 
    slidesToShow: 2, 
 
    slidesToScroll: 1, 
 
    asNavFor: '.slider-nav', 
 
    autoPlay: true 
 
}); 
 
$('.slider-nav').slick({ 
 
    slidesToShow: 0, 
 
    slidesToScroll: 0, 
 
    asNavFor: '.regular', 
 
    dots: false, 
 
    focusOnSelect: true, 
 
    arrows: false, 
 
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/> 
 
<style> 
 
html, body { 
 
     margin: 0; 
 
     padding: 0; 
 
    } 
 

 
    * { 
 
     box-sizing: border-box; 
 
    } 
 

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

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

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

 
    .slick-prev:before, 
 
    .slick-next:before { 
 
     color: black; 
 
    } 
 
    .slider-nav img{width: 15%;display: inline-block !important;float: left;margin: 10px 8px;} 
 

 
    .slider.regular img:hover { 
 
     transform: scale(1.1); 
 
    } 
 
</style> 
 

 
    <section class="slider regular"> 
 
     <div> 
 
      <img src="http://placehold.it/350x300?text=1"> 
 
     </div> 
 
     <div> 
 
      <img src="http://placehold.it/350x300?text=2"> 
 
     </div> 
 
     <div> 
 
      <img src="http://placehold.it/350x300?text=3"> 
 
     </div> 
 
     <div> 
 
      <img src="http://placehold.it/350x300?text=4"> 
 
     </div> 
 
     <div> 
 
      <img src="http://placehold.it/350x300?text=5"> 
 
     </div> 
 
     <!-- <div> --> 
 
      <!-- <img src="http://placehold.it/350x300?text=6"> --> 
 
     <!-- </div> --> 
 
     </section> 
 
     <section class="slider slider-nav"> 
 
    \t \t <img src="http://placehold.it/350x300?text=1"> 
 
    \t \t <img src="http://placehold.it/350x300?text=2"> 
 
    \t \t <img src="http://placehold.it/350x300?text=3"> 
 
    \t \t <img src="http://placehold.it/350x300?text=4"> 
 
    \t \t <img src="http://placehold.it/350x300?text=5"> 
 
    \t </section> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.min.js"></script>