Search code examples
htmljquerycssslick.js

How to start Slick Slider from Left in center mode

enter image description here

Hey Stackoverflow members. I have a slick slider. i want to start from left. Is there any way with centermode: true. Because center is essential. Here is the codepen demo link below. I want slider number 1 to start from left and if it goes to slider 2 it must be on center.

I am trying to create a section like this in Our teams and tools section in this link: https://ware2go.co/our-solution/

Codepen Demo Link

 $(".center").slick({
        dots: true,
    infinite: false,
        centerMode: true,
        slidesToShow: 3,
        slidesToScroll: 1,
   variableWidth: true
});
Solution

  • Complete HTML, CSS, jQuery Code 

    jQuery( document ).ready(function() {

  jQuery("ul.tabs li").on("click", function(){

    jQuery("ul.tabs li").removeClass("active");
    jQuery(this).addClass("active")

  });

  var slideWidth = jQuery('.tabs').outerWidth()

  jQuery('.tabs').slick({
      infinite: false,
      slidesToShow: 7,
      slidesToScroll: 7,
      dots: false,
      arrows: true,
      variableWidth: true,
      focusOnSelect: true,
      centerMode: true,
      centerPadding: slideWidth,
      draggable: true,
      swipeToSlide: true,
  });


  jQuery(".tabs .slick-track").addClass("removeTransform");

  jQuery(".tabs .slick-slide").click(function(){

      var getid = jQuery(this).data('slick-index');

      if( getid > 3 ) {
          jQuery(".tabs .slick-track").removeClass("removeTransform");
      }
      else {
          jQuery(".tabs .slick-track").addClass("removeTransform");
      }
  });
  
 });
    ul.tabs {
    list-style-type: none;
    display: flex;
    margin: 0;
}
ul.tabs li {
    padding: 10px 30px;
    background: #E6E6E6;
    border-radius: 32px;
    color: #000000;
    font-size: 18px;
    margin-right: 15px;
    cursor: pointer;
}
ul.tabs li:last-child {
    margin-right: 0;
}
ul.tabs li.active {
    color: #E7FE78;
    background: #F15E22;
}
ul.tabs .removeTransform {
    transform: none !important;
}
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

 <ul class="tabs">
  <li data-id="fb" class="active">F&B</li>
  <li data-id="social">Social</li>
  <li data-id="web3">Web3</li>
  <li data-id="fecomb">E-Com</li>
  <li data-id="edtech">EdTech</li>
  <li data-id="medtech">MedTech</li>
  <li data-id="fintech">FinTech</li>
  <li data-id="fintech">FinTech 2</li>
  <li data-id="fintech">FinTech 3</li>
  <li data-id="fintech">FinTech 4</li>
  <li data-id="social">Social</li>
  <li data-id="web3">Web3</li>
  <li data-id="fecomb">E-Com</li>
  <li data-id="edtech">EdTech</li>
  <li data-id="medtech">MedTech</li>
  <li data-id="fintech">FinTech</li>
  <li data-id="fintech">FinTech 2</li>
  <li data-id="fintech">FinTech 3</li>
  <li data-id="fintech">FinTech 4</li>
</ul>