Error center mode Slick.js to add opacity in four center slide

user_13774710 0
Viewed 357

I created a slider using Slick.js and I'm using centerMode: true. I want to make the slides on the right and left sides of the slideshow transparent with opacity 0.5, but it's not working like image below

enter image description here

I want my slider look like this: enter image description here

*image above, I hold the slider with the cursor to give an idea of ​​what I want.

if slideToShow: 3 can be appropriate. but I want 4 slides with opacity: 1 in the middle. How can I fix this problem?

This is my Codepen

HTML

<div id="artSlider">
  <div class="item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
  </div>
  <div class="item">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
  </div>
</div>

SCSS

.item{
  background-color:#16B345;
  margin:0 5px;
  padding: 40px 20px;
}

#artSlider{
  .item{
    &.slick-slide{
        opacity: 0.5;

        &.slick-active{
            opacity: 1;
        }
    }
  }
}

JS Function

 $('#artSlider').slick({
    // autoplay: true,
       centerMode: true,
       centerPadding: '100px',
       slidesToShow: 4,
       arrows: false,
       dots: false,
 });
slick.js slider css javascript
1 Answers

If you remove the center mode, you can accomplish it by adding and outer container which will control the width of your 4 slides (example with 600px width)

$('#artSlider').slick({
       slidesToShow: 4,
       arrows: false,
       dots: false,
 });
.item {
  background-color: #16B345;
  margin: 0 5px;
  padding: 40px 20px;
}

.slider-container {
  max-width: 600px;
  margin: 0 auto;
}

.slider-container .slick-list {
  overflow: visible;
}

#artSlider .item {
  transition: opacity .2s
}

#artSlider .item.slick-slide {
  opacity: 0.43;
}

#artSlider .item.slick-active {
  opacity: 1;
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" />



<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<div class="slider-container">
  <div id="artSlider">
    <div class="item">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
    </div>
    <div class="item">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
    </div>
    <div class="item">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
    </div>
    <div class="item">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
    </div>
    <div class="item">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
    </div>
    <div class="item">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo, quis?
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>

user_134330960
Related