光滑的滑块轮播同步行重叠（带有JSFiddle）。我很沮丧

时间：2019-04-25 23:14:38

标签： javascript jquery html css slick.js

我正在建立一个利用ken Wheeler的光滑滑块显示图像的网站。这个想法是在顶部滑块上放一个大图像，然后在底部滑块上放几个较小的图像，这些图像在顶部反射。但是，当我从一张幻灯片导航到另一张幻灯片时，顶部和底部的滑块图像会重叠。到目前为止，此问题发生在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;在滑块的img标签上，但是并不能解决问题。这是我的javascript，css和html代码来控制滑块。请注意，我正在使用Slick的adaptiveHeight，滑块同步，延迟加载和淡入淡出功能。

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设置，这是一个快速解决方案，但是我的网站看起来很丑。关于如何解决此问题的任何想法？

1 个答案:

答案 0 :(得分：0)

请以全屏查看，我使用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>

相关问题
最新问题