I want to achieve the slide design shown below in picture with SLICK slider

Question

I wanted to achieve the same design shown in the image. I can do the design, but whenever I use slick slider to give gap to left and right the alignment is going crazy. Anyone can help please?

Here is the code

var $st = $('.pagination');
var $slickEl = $('.center');

$slickEl.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
  var i = (currentSlide ? currentSlide : 0) + 1;
  $st.text(i + ' of ' + slick.slideCount);
});

$slickEl.slick({
  centerMode: true,
  centerPadding: '0px',
  slidesToShow: 3,
  focusOnSelect: true,
  dots: false,
  infinite: true,
    speed: 300,
  responsive: [
    {
      breakpoint: 768,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 3
      }
    },
    {
      breakpoint: 480,
      settings: {
        arrows: false,
        centerMode: true,
        centerPadding: '40px',
        slidesToShow: 1
      }
    }
  ]
});

.slide-container{
    position: relative;
    margin: 0 auto;
    padding: 100px 0;
}

.slick-active { 
  padding: 20px 0; 
}

.slick-center { 
  transform: scale(1);
    opacity: 1 !important;
}

.slick-slide:not(.slick-active) { 
  margin: 20px 0; 
}

.child { 
  width:100%; 
}

.slide:not(.slick-active) { 
  cursor: pointer; 
}

.pagination {
  text-align: center; 
  color: #000;
  font-size: 1.2rem;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css"/>

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick.min.js"></script>

<div class="slide-container">
      <div class="slider center">       
          <div class="slide">
            <img src="images/hero-article-1.jpg" alt="1">
          </div>
          <div class="slide">
            <img src="images/hero-article-1.jpg" alt="2">
          </div>
          <div class="slide">
            <img src="images/hero-article-1.jpg" alt="3">
          </div>
          <div class="slide">
            <img src="images/hero-article-1.jpg" alt="4">
          </div>
          <div class="slide">
            <img src="images/hero-article-1.jpg" alt="5">
          </div>
          <div class="slide">
            <img src="images/hero-article-1.jpg" alt="6">
          </div>

      </div>
      <div class="pagination"></div>
</div>

Each time I add padding or margin to the current slide it breaks. Seems I'm missing something.

Does this answer your question? [How add spaces between Slick carousel item](https://stackoverflow.com/questions/30999076/how-add-spaces-between-slick-carousel-item) — Karan, Dec 26 '19 at 07:24

score 1 · Answer 1 · answered Dec 26 '19 at 07:44

I recommend you stylize your slides only if navigation is showing:

.slick-dotted .slick-current img {
  transform: scale(1.1);
}

You will got a result like this:

$(document).on('ready', function() {
  $(".center").slick({
    dots: true,
    infinite: true,
    centerMode: true,
    slidesToShow: 1,
    slidesToScroll: 3
  });
});

html,
body {
  margin: 0;
  padding: 0;
}

* {
  box-sizing: border-box;
}

.slider {
  width: 50%;
  margin: 100px auto;
}

.slick-slide {
  margin: 10px 20px;
}

.slick-slide img {
  width: 100%;
  transform: scale(0.9);
}

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

.slick-dotted .slick-current img {
  transform: scale(1.1);
}

<link href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick-theme.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script><script src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<section class="center slider">
  <div>
    <img src="http://placehold.it/350x300?text=1">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=2">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=3">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=4">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=5">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=6">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=7">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=8">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=9">
  </div>
</section>
<section class="center slider">
  <div>
    <img src="http://placehold.it/350x300?text=1">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=2">
  </div>
  <div>
    <img src="http://placehold.it/350x300?text=3">
  </div>
</section>

score 0 · Answer 2 · answered Dec 26 '19 at 07:16

0

Use margin instead of padding for gapping.

.slick-active { 
  margin: 20px 0; 
}

answered Dec 26 '19 at 07:16

vikas nirwal

29
1

Actually it is not working that way. I only wanted margin for the "slick-center". But whenever I add it pushed the entire slide to right – Arshad Arsal Dec 26 '19 at 07:32

I want to achieve the slide design shown below in picture with SLICK slider

2 Answers2