CODEWITHSUNDEEP
javascriptjquerycarouselslick.js
clarkf
clarkf

Reputation: 711

How to fix slick centerMode if the slidesToShow is less than the slick items

If the items are more than 6 the centerMode is working fine, but if the items is less than 6 slides doesn't center correctly.

I'm trying to implement a JS functionality that if the slide items in the html is less than 6 the centerMode will still working or disabled.

Im trying to follow this example but I cant replicate because the source site are not found: Slick slider centermode not working when more slides than slidestoshow variable

Check my code below and you can also check the codepen here: https://codepen.io/graydirt/full/vYMxpQE

$(function() {

  $('.slider-for').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    arrows: false,
    fade: true,
    asNavFor: '.slider-nav'
  });
  
// Set preferred slidesToShow
var slidesToShow = 5;
var childElements = $('.slider-nav').children().length;
// Check if we can fulfill the preferred slidesToShow
if( slidesToShow > (childElements-1) ) {
    // Otherwise, make slidesToShow the number of slides - 1
    // Has to be -1 otherwise there is nothing to scroll for - all the slides would already be visible
    slidesToShow = (childElements-1);
}
  
  $('.slider-nav').slick({
    slidesToShow: slidesToShow,
    /*slidesToShow: 5,*/
    slidesToScroll: 1,
    asNavFor: '.slider-for',
    dots: false,
    centerMode: true,
    centerPadding: '70px',
    focusOnSelect: true,
    variableWidth: false,
    rows: 0,
    responsive: [
      {
        breakpoint: 992,
        settings: {
          slidesToShow: 3,
        }
      },
      {
        breakpoint: 576,
        settings: {
          slidesToShow: 1,
        }
      }
    ]
  });
  
});
img {
  max-width: 100%;
  height: auto;
}

.slider-style-for {
  & img {
    width: 100%;
  }
}

.slider-style-nav {
  & .slider-nav__items {
    width: 260px;
  }
  & .slick-next {
    right: 0;
  }
  & .slick-prev {
    left: 0;
  }
  & .slick-next:before, 
  & .slick-prev:before {
    color: black;
  }
}



div[aria-hidden="true"] img {
  opacity: .3;
}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<div class="container">
  <div class="row">
    <div class="col-12">
      <div class="slider slider-for slider-style-for">
        <div>
          <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
        </div>
        <div>
           <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
        </div>
        <div>
          <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
        </div>
        <div>
          <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
        </div>
        <div>
          <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
        </div>
      </div>
      
      <div class="slider slider-nav slider-style-nav">
        <div class="m-2 slider-nav__items">
          <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
        </div>
        <div class="m-2 slider-nav__items">
          <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
        </div>
        <div class="m-2 slider-nav__items">
          <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
        </div>
        <div class="m-2 slider-nav__items">
          <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
        </div>
        <div class="m-2 slider-nav__items">
          <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Views: 61

Answers (0)

Related Questions