Как сделать скользящий эффект - JQuery Slider

Question

Я сделал простой слайдер, просто добавив активный класс, который изменяет тип отображения из ни одного в блок.

.slide.active { 
    display: block; 
} 

.slide { 
    display: none; 
    width: 100%; 
    height: 100% 
} 

Смотрите мое решение здесь: https://jsfiddle.net/6dncwtcu/

Есть ли способ, чтобы сделать снимки скользить в и, как здесь: http://www.jssor.com/ или мое решение не подходит для этого эффекта.

Пожалуйста, имейте в виду, что я не хочу использовать какие-либо плагины.

Answer 1

Вам нужно добавить позиционирование на каждый слайд, а затем оживить позицию, которую вы хотите, когда слайд активен. Я обновил свою скрипку с примером: https://jsfiddle.net/6dncwtcu/3/

я добавил следующий CSS к вашему .slide

left: 100%; 
position: absolute; 
transition: all 200ms; 

И это ваш .active

left: 0; 
z-index: 99; 

Позиционируя слайды абсолюта, вы можете заставить их находиться за пределами контейнера, а затем использовать свой активный класс, чтобы сделать слайд снова в начале контейнера. transition изменит, как быстро он будет перемещаться между слайдами, а z-index будет следить за тем, чтобы активный слайд всегда был сверху.