在Slick滑块中实现缩放功能

Question

我在项目中实现了光滑的滑块。

每当我选择第二个滑块缩略图时，第一个滑块就会正常工作。

我希望在第一个滑块中的每个图像上悬停缩放功能，这是常规滑块。

此外，我必须在常规滑块的左侧放置小缩略图滑块。

我怎样才能做到这一点？

＆＃13;

＆＃13;

$(".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,
});

＆＃13;

<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">
    		<img src="http://placehold.it/350x300?text=1">
    		<img src="http://placehold.it/350x300?text=2">
    		<img src="http://placehold.it/350x300?text=3">
    		<img src="http://placehold.it/350x300?text=4">
    		<img src="http://placehold.it/350x300?text=5">
    	</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>

＆＃13;

＆＃13;

＆＃13;

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">
    		<img src="http://placehold.it/350x300?text=1">
    		<img src="http://placehold.it/350x300?text=2">
    		<img src="http://placehold.it/350x300?text=3">
    		<img src="http://placehold.it/350x300?text=4">
    		<img src="http://placehold.it/350x300?text=5">
    	</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>