Пользовательские JQuery/JS слайдер анимации

Question

В поисках способ создания пользовательских JQuery/JS слайдер: Пример направление слева направо:

<div id="slider"> 
    <div class="item"> Left fade in 1</div> 
    <div class="item"> Left fade in 2</div> 
    <div class="item"> At center 1</div> 
    <div class="item"> At center 2</div> 
    <div class="item"> At center 3</div> 
    <div class="item"> Right fade out 1</div> 
    <div class="item"> Right fade out 2</div> 
</div> 

3 элемента в центре, 2 элементы на каждой стороне сделать анимацию с fade in/out.

Может быть, кто-то может дать пример, как его написать? С уважением.

Answer 1

Попробуйте использовать slickslider и используйте преобразование для преобразования краев. Я сделал jsFiddle, который показывает, что я имею в виду. Возможно, это может помочь вам на правильном пути.

.item.left 
{ 
    -webkit-transform: perspective(600px) rotateY(45deg) scale(0.8); 
} 

.item.right 
{ 
    -webkit-transform: perspective(600px) rotateY(-45deg) scale(0.8); 
}