jQuery vertical div slider 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
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 &gt; * &gt; *").length;
window.setInterval(
  function() {
    offset = (offset - 104) % (count * 104); // 104px div height (incl margin)
    $(".slide-item-wrapper &gt; *").css({
      "transform": "translateY(" + offset + "px)",
    });
  }, 3000);
body {
  margin: 100px
}

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

.slide-item-wrapper &gt; * {
  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;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;div class="slide-item-wrapper"&gt;
  &lt;div&gt;
    &lt;div class="box-item"&gt;
      Lipsum
    &lt;/div&gt;
     &lt;div class="box-item"&gt;
      Lipsum2
    &lt;/div&gt;
     &lt;div class="box-item"&gt;
      Lipsum3
    &lt;/div&gt;
     &lt;div class="box-item"&gt;
      Lipsum4
    &lt;/div&gt;
     &lt;div class="box-item"&gt;
      Lipsum5
    &lt;/div&gt;
     &lt;div class="box-item"&gt;
      Lipsum6
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;