Slick Slider Carousel Sync Rows Overlapping (w/ JSFiddle). I'm stumped

Question

I'm building a website that utilizes ken wheeler's slick slider to display images. The idea is to have one large image on the top slider then have a few smaller images on the bottom slider that reflect the image on top. However when I navigate from one slide to another the top and bottom slider images overlap. So far this issue occurs on chrome, firefox, and safari.

Expected (link to image): https://i.imgur.com/b20qHsi.png

Actual: https://i.imgur.com/ZstQjns.png

See it for yourself here: https://treasuredtransportation.com/inventory/porsche1964.html

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

Sorry I know the JS Fiddle looks very messy although it seems to be replicating my issue nonetheless. The issue occurs for me in the JSFiddle after navigating with the dots to slide 5 and 6.

I've already tried using display:block; on the slider's img tags however that did not fix the problem. Here's my javascript , css, and html code to control the slider. Note that I am using Slick's adaptiveHeight, slider syncing, lazyload, and fade features.

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 Top Carousel (Single Large Image, the first "car-image-size" div is repeated for each image, after the first image they lazy load)

<!--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>

Bottom Carousel

<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>

It repeats for each image with lazy load like the top carousel.

I can remove the adaptiveheight setting from the javascript and thats a quick fix but then my site looks ugly. Any ideas on how I can fix this?

According to me it's a CSS issue. Class name (.car-image-size) don't use padding align it to center with some other method like: (width:50%; margin:0 auto; display:block) and Class Name (.adapt-to-screen) don't use margin. — chander shekhar
Thanks for the suggestion chander shekhar . Unfortunately that did not work. — Alder French

chander shekhar chander shekhar · Accepted Answer · 2019-04-29T06:59:01

Please check this in full view, i use lazyload to progressive.

//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>

Slick Slider Carousel Sync Rows Overlapping (w/ JSFiddle). I'm stumped

1 Answers