слайд контента справа налево с помощью jquery
Когда вы нажимаете кнопку «Далее», область просмотра изменяет содержимое (два) и выполняет преобразование.
То, что я хочу, я хочу, чтобы слайд-контент. Как вы можете увидеть здесь в демонстрации, используяtranslateX(-200px) может дать мне эффект желания. но это начинается с0px и идет к-200px, Я хочу, чтобы он начинался с красной полосы (справа) и заканчивался черной полосой (слева) для каждого деления.
Короче говоря, я хочу сдвинуть содержимое справа налево с этой настройкой.
ПРИМЕЧАНИЕ: попробуйте удалить,
item.css({
"transform": "translateX(-200px)",
"transition":"all 1.0s ease"
})
эта часть и она будет работать как положено без скольжения. Я просто хочу реализовать скольжение.
демо:https://plnkr.co/edit/YylT0p7GGl44WRiMoOGj?p=preview
<!DOCTYPE html>
<html>
<body>
<div class="viewport">
<div class="slider">
<div class="slide">one</div>
<div class="slide">two</div>
<div class="slide">three</div>
<div class="slide">four</div>
<div class="slide">five</div>
<div class="slide">six</div>
</div>
</div>
<div class="next">Next</div>
<script>
var items=$('.viewport .slider div');
total=items.length;
index=0;
$('.next').click(function () {
index+=1;
cycle()
});
function cycle() {
item = $('.viewport .slider div').slice(index, index + 1);
items.hide();
item.show();
item.css({
"transform": "translateX(-200px)",
"transition":"all 1.0s ease"
})
}
</script>
</body>
</html>