在滑動滑塊中實現縮放功能

Question

我已經在項目中實施了滑動滑塊。

每當我選擇第二個滑塊縮略圖時，第一個滑塊將正常工作。

我想要將縮放功能懸停在第一個滑塊（即常規滑塊）的每個圖像上。

此外，我必須在常規滑塊左側放置小縮略圖滑塊。

我該如何做到這一點？

$(".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>