jQuery vertical div slider

Question

In my project I need to do an automatic sliding vertical slider:

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);

I wonder if there is a simpler way to do this vertical slider, because sometimes the transformY is not going up fluently. It is disappearing and showing.

Example jsfiddle

Answer 1

I don't see anything wrong with the smoothness of the animation. However, I would simplify the code by introducing another container inside the .slide-item-wrapper; that whole container moves up, so that you don't have to animate each .box-item separately. Furthermore, I would eliminate the special case for rewinding the animation to its original position.

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>

• fatihsolhan: Yes, it works better now. Probably my problem was causing because of animating each box seperately. Thank you very much for your help :)