в jQuery вертикальный слайдер див


В моем проекте, мне нужно сделать автоматической раздвижной вертикальный слайдер:

var number = 0;
var count = $(".home-header-boxes .col-6").children().length;
window.setInterval(
    function() {
        number = number + 104; // 104px div height
        $(".home-header-boxes .col-6 .home-header-boxes-profile-wrapper").each(function(i) {
            $(this).css({
                "transform": "translateY(-" + number + "px)",
            })
        })

        if (number == count * 104) {
            number = 0;
            $(".home-header-boxes .col-6 .home-header-boxes-profile-wrapper").each(function() {
                $(this).css({
                    "transform": "translateY(0px)",
                })
            })
        }
    }, 3000);

Я интересно, если есть простой способ сделать это вертикальный слайдер, потому что иногда transformY не пойдет свободно. Она исчезает и показывает.

Пример jsfiddle



2488
1
задан 31 января 2018 в 09:01 Источник Поделиться
Комментарии
1 ответ

Я не вижу ничего плохого с плавностью анимации. Однако, я бы упростить код, вводя другой контейнер внутри .slide-item-wrapper- весь контейнер перемещается вверх, так что вам не придется анимировать каждый .box-item отдельно. Кроме того, я исключил бы специальный чехол для перемотки анимации в исходное положение.



var offset = 0;
var count = $(".slide-item-wrapper > * > *").length;
window.setInterval(
function() {
offset = (offset - 104) % (count * 104); // 104px div height (incl margin)
$(".slide-item-wrapper > *").css({
"transform": "translateY(" + offset + "px)",
});
}, 3000);

body {
margin: 100px
}

.slide-item-wrapper {
width: 300px;
height: 84px;
overflow: hidden;
}

.slide-item-wrapper > * {
transition: .5s ease-in-out;
}

.box-item {
display: flex;
justify-content: center;
align-items: center;
background: red;
color: white;
width: 300px;
height: 84px;
margin-bottom: 20px;
}


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-item-wrapper">
<div>
<div class="box-item">
Lipsum
</div>
<div class="box-item">
Lipsum2
</div>
<div class="box-item">
Lipsum3
</div>
<div class="box-item">
Lipsum4
</div>
<div class="box-item">
Lipsum5
</div>
<div class="box-item">
Lipsum6
</div>
</div>
</div>



0
ответ дан 31 января 2018 в 10:01 Источник Поделиться