How to loop the slider? When removing elements from the top, the remaining blocks are shifted.

Jsfiddle

$('button').click(function() { var currentPosY = parseInt($('.slider').css('transform').match(/-?[\d\.]+/g)[5], 10) $('.slider').css({ 'transform': 'translate(0,' + (currentPosY - 130) + 'px)' }) }) 
 .wrapper { width: 300px; height: 130px; border: 1px solid red; } .slider { transform: translate(0, 0); transition: transform 0.5s } .slider-item { width: 300px; height: 130px; background-color: orange; font-size: 44px; line-height: 120px; text-align: center; } button { float: right; } 
 <div class="wrapper"> <div class="slider"> <div class="slider-item">1</div> <div class="slider-item">2</div> <div class="slider-item">3</div> <div class="slider-item">4</div> </div> </div> <button>кнопка</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

    3 answers 3

    You can do this:

     $('button').click(function(){ $('.slider').animate({"margin-top": '-=130px'}, "slow", function() { $(this).children().first().detach().appendTo($('.slider')); $(this).css('margin-top', '0px'); }); });
    • 130 would be better to put the magic constant 130 into a separate variable - Aleksander Palyan
    • the slider should always move in the same direction - ruslik
    • updated the answer, try this - Aleksander Palyan
    • thanks It works. By the way, this is .slideDown (0); not necessary. The only moment I have everything on translate works - ruslik
    • Similarly, I forgot to remove after experiments) - Aleksander Palyan

    You need to move the slides, something like this - https://jsfiddle.net/htgv2wu3/5/

     var height = $('.wrapper').height(), $slider = $('.slider'); $('button').click(nextSlide); function nextSlide(){ $slider.css('transform','translate(0,'+ (-height) +'px)'); } $slider.on('transitionend webkitTransitionEnd oTransitionEnd', function () { $slider.css('transition','none'); var $first = $('.slider-item').get(0); $first.remove(); $slider.append($first); $slider.css('transform','translate(0, 0)'); setTimeout(function(){ $slider.css('transition',''); }) }); 
     .wrapper { width: 300px; height: 130px; border: 1px solid red; overflow:hidden; } .slider { transform: translate(0, 0); transition: transform 0.5s } .slider-item { width: 300px; height: 130px; background-color: orange; font-size: 44px; line-height: 120px; text-align: center; } button { float: right; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="slider"> <div class="slider-item">1</div> <div class="slider-item">2</div> <div class="slider-item">3</div> <div class="slider-item">4</div> </div> </div> <button>кнопка</button>

      1. The last slide put first and hid.
      2. On the button, I move the first one (hidden) to the end and remove display:none; from it display:none; , and the next slide is minimized with .slideUp() .

       var $slider = $( '.slider' ); $( 'button' ).click( function(){ var $first = $slider.children().first(); $first.next().slideUp(); $first.appendTo( $slider ).show(); }) 
       .wrapper { width: 300px; height: 130px; border: 1px solid red; overflow: hidden; } .slider { transform: translate(0, 0); transition: transform 0.5s } .slider-item { width: 300px; height: 130px; background-color: orange; font-size: 44px; line-height: 120px; text-align: center; } button { float: right; } 
       <div class="wrapper"> <div class="slider"> <div class="slider-item" style="display:none;">4</div> <div class="slider-item">1</div> <div class="slider-item">2</div> <div class="slider-item">3</div> </div> </div> <button>кнопка</button> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

      • Thanks, but the effect is not quite the same. Slides should replace each other and not lay one on top of the other - ruslik
      • @ruslik Understood, thanks for the explanation. - Gleb Kemarsky