jquery Cycle advanced slide

Question

Я использую плагин цикла jQuery http://jquery.malsup.com/cycle/, и я пытаюсь создать подобный эффект слайдера, как на этой странице. http://themeforest.net/item/doover-premium-wordpress-theme/full_screen_preview/2279114 Это означает, что название и описания скользят с разных сторон в разное время. Они также используют слайдер цикла jQuery.

Я не знаю, как это сделать. Любые советы были бы приятными, и я был бы рад этому.

Вот мой HTML код: https://gist.github.com/2697871

Вот мой CSS код: https://gist.github.com/2697874

Вот мой JS код: https://gist.github.com/2697877

Thx за ваше время.

Answer 1

Прежде всего, в javascript, установите текущий класс слайда на активный.
Затем в Css установить свои позиции элементов абсолютных вне слайде

.title{position:absolute; top:0; left:100%; } 
.text{position:absolute; top:0; left:-100%;} 

Наконец, в Css, добавить анимацию, когда родитель находится в активном

.active .title{animation: animateTitle 2s 1 ease-out forwards;} 
.active .text{animation: animateText 2s 1 ease-out forwards;} 

@keyframes animateTitle { 
    0% { left: 100%; } 
    100% { left: 0; } 
} 

@keyframes animateTtext { 
    0% { left: -100%; } 
    100% { left: 0; } 
}