javascript - Slick Slider Carousel 同步行重叠(w/JSFiddle)。我难住了

Question

我正在构建一个网站，该网站利用 ken wheeler 的灵活 slider 来显示图像。这个想法是在顶部 slider 上有一个大图像，然后在底部 slider 上有几个较小的图像，以反射(reflect)顶部的图像。但是，当我从一张幻灯片导航到另一张幻灯片时，顶部和底部 slider 图像重叠。到目前为止，这个问题出现在 chrome、firefox 和 safari 上。

预期(图片链接): https://i.imgur.com/b20qHsi.png

实际: https://i.imgur.com/ZstQjns.png

自己看这里: https://treasuredtransportation.com/inventory/porsche1964.html

JSFiddle: http://jsfiddle.net/3e7fzuxL/5/

抱歉，我知道 JS Fiddle 看起来很乱，尽管它似乎在复制我的问题。在使用圆点导航到幻灯片 5 和 6 后，我在 JSFiddle 中出现了这个问题。

我已经尝试过使用 display:block;然而，在 slider 的 img 标签上并没有解决问题。这是我用来控制 slider 的 javascript、css 和 html 代码。请注意，我使用的是 Slick 的自适应高度、 slider 同步、延迟加载和淡入淡出功能。

Javascript

$('.slider-for').slick({
    lazyLoad: 'ondemand',
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    fade: true,
    asNavFor: '.slider-nav',
    adaptiveHeight: true, //Removing adaptie
    nextArrow: '<i class="fa fa-chevron-right nav-button-right"></i>',
    prevArrow: '<i class="fa fa-chevron-left nav-button-left"></i>',
    infinite: true,
  });

  $('.slider-nav').slick({
    lazyLoad: 'ondemand',
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: true,
    centerMode: true,
    infinite: true,
    focusOnSelect: true,
  });

CSS

/*Control Image Size On Car Pages For Desktop  */
/*See Image Control media query for mobile*/
.car-image-size{
  padding:25%;
}

/* Prevent Bottom Slides from Overlapping top ones */
.car-image-size img{
  display:block;
}
.slider-nav img{
  display:block;
}

/* Slick car Slider margin adjustment for screen size
see media query */
.adapt-to-screen{
  margin-top: -15%;
  margin-bottom: -15%;
}

HTML顶部轮播(单个大图像，第一个“car-image-size”div 为每个图像重复，在第一个图像延迟加载之后)

<!--Slick Carousel-->
    <div class="slider-for adapt-to-screen">


      <!--Images in Top carousel -->
      <div class="car-image-size">
        <div class="numbertext">1 / 24</div>
        <img src="./carimages/porsche-1964/porsche-one.jpg" style="width:100%;">
        <h3 class="text is-overlay is-family-sans-serif has-text-weight-bold"></h3>
      </div>
      <div class="car-image-size">
        <div class="numbertext">2 / 24</div>
        <img data-lazy="./carimages/porsche-1964/porsche-two.jpg" style="width:100%;">
        <div class="text is-overlay is-family-sans-serif has-text-weight-bold"></div>
      </div>

底部轮播

<div class="slider-nav">
      <div style="padding:10px;">
        <p> <img src="./carimages/porsche-1964/porsche-one.jpg"> </p>
      </div>
      <div style="padding:10px">
        <p> <img data-lazy="./carimages/porsche-1964/porsche-two.jpg"></p>
      </div>

它会像顶部轮播一样对每张图片重复进行延迟加载。

我可以从 javascript 中删除 adaptiveheight 设置，这是一个快速修复，但我的网站看起来很难看。关于如何解决此问题的任何想法？

Answer 1

请在全 View 中查看，我使用 lazyload 进行渐进。

//My Sliders
$('.slider-for').slick({
    lazyLoad: 'progressive',
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: true,
    fade: true,
    asNavFor: '.slider-nav',
    adaptiveHeight: true, 
    infinite: true,
	
	
  });


		
  $('.slider-nav').slick({
    lazyLoad: 'ondemand',
    slidesToShow: 3,
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: true,
    centerMode: true,
    infinite: true,
    focusOnSelect: true,
  });

	

.slick-slide-small {
  background: #3a8999;
    color: white;
	
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
	
}

.slick-slide {
	background: #3a8999;
    color: white;
	
    font-size: 30px;
    font-family: "Arial", "Helvetica";
    text-align: center;
    /* my padding padding: 25%; */
    
}

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

.slick-dots {
	 bottom: -30px;
}

.slick-slide:nth-child(odd) {
     background: #e84a69;
}

/* My CSS */

/* Control Image Size On Car Pages For Desktop  */

/* See Image Control media query for mobile */
.car-image-size{margin-bottom:10px;}
.car-image-size img {
	width:110px; margin:0 auto; display:block
}

/* Slick car Slider margin adjustment for screen size
see media query */
.adapt-to-screen { 
}

	
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css"/>	
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
	 
	
	 <div class="slider-for adapt-to-screen">


      <!--Images in Top carousel -->
      <div  class="car-image-size slick-slide">
        <img data-lazy="https://via.placeholder.com/150" />
      </div>
      <div class="car-image-size slick-slide">
        <img data-lazy="https://via.placeholder.com/150" />
      </div>
       <div class="car-image-size slick-slide">
        <img data-lazy="https://via.placeholder.com/150" />
      </div>
       <div class="car-image-size slick-slide">
        <img data-lazy="https://via.placeholder.com/150" />
      </div>
       <div class="car-image-size slick-slide">
        <img data-lazy="https://via.placeholder.com/150" />
      </div>
       <div class="car-image-size slick-slide">
        <img data-lazy="https://via.placeholder.com/150" />
      </div>
      </div>
      
      
      <!--Bottom Carousel-->
      <div class="slider-nav">
      <div>
         <img data-lazy="https://via.placeholder.com/150" />
      </div>
      <div>
        <img data-lazy="https://via.placeholder.com/150" />
      </div>
      <div>
        <img data-lazy="https://via.placeholder.com/150" />
      </div>
      <div>
        <img data-lazy="https://via.placeholder.com/150" />
      </div>
      <div>
        <img data-lazy="https://via.placeholder.com/150" />
      </div>
      <div>
        <img data-lazy="https://via.placeholder.com/150" />
      </div>
      
      </div>