List rotation with limited elements

Question

I have div container with list (cards) inside. When I hover it, cards start to moving (translateX animation). container\'s width

Answer 1

Check out this demo

Here I used JQuery, you can configure your animation using two variables

var translateX = 1000; //adjust the whole distance to translate
var stepSpeed = 100;   //adjust the speed of each step transition in milliseconds

After setting your variables, on the click event of the cards do the following:-

1. Get the number of the steps required based on translateX
2. Loop for the number of steps
3. Inside each loop (each step) move the cards 1 step to the left, then put the first card to the end of the cards to form the connected loop, then return back the cards to it's initial position

Here is the code:

var stepsNumber = translateX/100;
for(var i=0; i< stepsNumber; i++)
{
    $('.cards').animate({'left' : -100}, stepSpeed,function(){
         $('.cards div:last').after($('.cards div:first'));
         $('.cards').css({'left' : '0px'}); 
     });
}