Эффект называется «карусель». Есть огромное количество реализаций, в т.ч. плагины к jQuery.
Не сложно сделать свой вариант, в т.ч. на чистом JS.
По событию для смены слайда (нажатию на кнопку, стрелку на клавиатуре, таймеру, ещё какому-то) надо, чтобы текущий слайд «уехал», а новый – «приехал».
Движение можно сделать двумя способами:
- меняя часто-часто JS'ом положение картинки;
- или CSS3 transitions – просто дать двум слайдам новое положение сразу, а анимация выполнится за счёт CSS3 инструкций. Пример:
var state = true,
box = document.getElementById("box");
document.getElementById("tggl").addEventListener('click', function(e){
if(state=!state) {
box.className = "";
} else {
box.className = "right";
}
});
#box {
width: 50px;
height: 50px;
background-color: red;
-webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s;
transition: width 2s, height 2s, background-color 2s, transform 2s;
}
.right {
width: 90px !important;
height: 30px !important;
transform: translate(500px,0px) rotate(3deg);
}
<div id="box"></div>
<button type="button" id="tggl">Нажми меня</button>