Slide on Anti clock wise

Slide on Anti clock wise

by 3gwebtrain

HTML

<div class="sliderHolder">
  <ul class="slideView">
    <li>Slide-1</li>  
    <li>Slide-2</li>
    <li>Slide-3</li>
    <li>Slide-4</li>
    <li>Slide-5</li>
  </ul>
</div>

CSS

div.sliderHolder{
  border:2px dashed #00f;
  display:flex;
  flex-direction:row;
}

ul.slideView{
  display:flex;
  flex-direction:row;
  list-style:none;
  width:175px;
  border:2px solid red;
  overflow:hidden;
  padding:0;
  margin:0;
  position:relative;
}

ul.slideView li{
  border-radius:3px;
  border:1px solid gray;
  min-width:175px;
  
}

ul.slideView li{
  visibility:hidden;
  left: 175px;
  background:yellow;
}

ul.slideView li.active {
   -webkit-animation: slide 20s;
    -webkit-animation-delay: 1s;
    animation: slide 4s;
    animation-delay: 1s;
    cursor:pointer;
    visibility:visible;
    position:absolute;
}

@-webkit-keyframes slide {
    0% { left: 0 }
}



@keyframes slide {
    100% { left: -350px; }
}

JavaScript

var total = $('.slideView li').length;
var num = total;
var val = 0;

console.log('num', num );

var add = function (amount) {
    
    val = (amount+total) % total+1;
    var current = $('.slideView li:nth-child('+val+')');
    $(current).addClass('active');
}

var caller = function(){



	setTimeout(() => {
  
  $('.slideView li').removeClass('active');
 
  	add(num);
    num += 1;
    caller();
    

	}, 2000);
  

}

caller();