CODEWITHSUNDEEP
javascriptjqueryhtmlcssslick.js
Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

Slick Slider fade true not working with vertical slider

I want to implement a slick vertical slider with option fade: true. I want a fading effect in the vertical slider. It is showing the first slide but 2nd and 3rd slides are not visible.

Below is the code that I had tried.

$('.MySlider').slick({
  vertical: true,
  dots: true,
  infinite: true,
  speed: 500,
  fade: true
});
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">
<section>
  <div class="MySlider">
    <div class="item">
      <div class="image_container">
        <img src="https://www.placecage.com/600/300" alt="" />
      </div>
    </div>
    <div class="item">
      <div class="image_container">
        <img src="https://www.placecage.com/600/300" alt="" />
      </div>
    </div>
    <div class="item">
      <div class="image_container">
        <img src="https://www.placecage.com/600/300" alt="" />
      </div>
    </div>
  </div>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

Upvotes: 0

Views: 3656

Answers (1)

Pushprajsinh Chudasama
Pushprajsinh Chudasama

Reputation: 7949

I had resolved my issue by giving my custom CSS.

$('.MySlider').slick({
   dots: true,
   infinite: true,
   speed: 500,
   vertical:true,
   verticalSwiping: true
});
.slick-slide {
   opacity:0;
   transition:opacity 0.5s ease-out;
}

.slick-active {
    opacity:1!important;
    transition:opacity 0.5s ease-in;
    }

.slick-cloned {
    opacity: 0.3;
}
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">
<section>
   <div class="MySlider">
     <div class="item">
       <div class="image_container">
          <img src="https://www.placecage.com/600/300" alt="" />
       </div>
     </div>
     <div class="item">
       <div class="image_container">
          <img src="https://www.placecage.com/700/300" alt="" />
       </div>
     </div>
     <div class="item">
       <div class="image_container">
          <img src="https://www.placecage.com/800/300" alt="" />
       </div>
    </div>
  </div>
</section>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>

Upvotes: 4

Related Questions