slick slider - css transition infinite loop bug

Question

I\'ve got a slider set up using slick slider. When using the next and previous buttons, the item comes in to view with a nice transition. The problem I\'m having is that when it

Answer 1

@GSTAR, Eventually there is no error in your code but there is bit css and js flow you need to understand while using slick.

Slick is cloning your slides and amend in top and down of your slide. like describe below.

Your Code before Slick implementation

    
1
    
2
    
3
    
4
    
5
    
6

Your Code After Slick implementation

    
4
    
5
    
6

    
1
    
2
    
3
    
4
    
5
    
6

    
1
    
2
    
3

Also after adding this your animation code is working fine. but it can not visually visible. if you increase this animation time than it will not snaps your browser.

If you replace javascript code than you will come to know what is happening.

So after loop get finished and reaching to the first slide animation executed and before reach it get finished.

Please check below my snippet.

$(document).ready(function() {
    $('.items').slick({
        slidesToShow: 2,
        speed: 500
    });
});

* {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  height: 150px;
}

.slick-list, .slick-track {
  height: 100%;
}

ul li {
  width: 350px;
  height: 100%;
}

ul li .content {
  width: 100%;
  height: 100%;
  transition: transform 0.5s linear;
  transition-delay: 0.5s;
  text-align: center;
}

ul li .content span {
  color: #fff;
  font-size: 50px;
  font-family: Arial;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  display: block;
}

ul li:nth-child(odd) .content {
  background-color: red;
}

ul li:nth-child(even) .content {
  background-color: green;
}

ul li:not(.slick-current) .content {
  transform: scale(0.9);
}

  

    

      1
    
  

  

    

      2
    
  

  

    

      3
    
  

  

    

      4
    
  

  

    

      5
    
  
  

    

      6
    
  

In infinite loop you have user odd and even css so as per the loop it your next first slide(cloned slide) has green color but your original slide(first slide) has red color hence it flicking color also. If you use number of slides in %2, then this will not happen.

Hope it will help you to understand better.