Как сделать анимированную прокрутку влево в карусели Jquery?

Question

[Nikita_Migushev]

Я немного застрял над слайдером ) Все началость с того, что я хочу сделать слайдер бесконечным. Разобрался, как это работает в принципе - нужно перемещать элементы. Сделал нормальную анимированную прокрутку вправо. А вот влево, что-то торможу. Сделал, чтобы при прокрутке влево переставляется последний элемент в начало. Но как сделать, чтобы это была именно анимированная прокрутка влево?

HTML

<div class="slideshow">
                <div class="slider">
                    <button class="prev"><i class="fas fa-chevron-left"></i></button>
                    <button class="next"><i class="fas fa-chevron-right"></i></button>
                    <div class="s1 slide active"><img src="images/Main_image.svg" alt=""></div>
                    <div class="s2 slide"><img src="images/Main_image_2.svg" alt=""></div>
                    <div class="s3 slide"><img src="images/Main_image_3.svg" alt=""></div>
                </div>
            </div>

CSS

.slideshow {
    overflow: hidden;
    position: relative;
    border: 1px solid orange;
   
}

.slider {
    position: relative;
    display: flex;
    margin-bottom: 35px;
    width: 300%;
    border: 1px solid pink;
}

.slide img {
    max-width: 100%;
}

button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.8em;
    position: absolute;
    z-index: 1;
    top: 40%; /*Move controls from the top 40%*/
    transform: translateY(-50%); 
}

button.prev {
    left: 1.5%;
}

button.next {
   left: 30%;
}

JQUERY

$("button.next").click(function() { //When click on the slide do this
      
            $(".slider").animate({ // Animate slider box
            marginLeft: '-=100%' // Move slider move 100% to the left
           }, 500, function(){ // Set up speed and when done this run the function
               $(".slide:first").appendTo($(this)) // Move the first element to the end of the slider
               $(this).css("margin-left", 0); // Set the slider box to the margin-left 0 as if it hasn't moved. So that we have two slides ahead. The last one is the first one. And this process repeats again and again
           });       
        });

        $("button.prev").click(function() {
            $(".slide:last").prependTo($(".slider"));
            });

JS FIDDLE

Answer 1

[0xD34F]

$('button.prev').click(function() {
  $('.slide:last').prependTo($('.slider'));
  $('.slider').css('margin-left', '-100%').animate({
    marginLeft: '+=100%'
  }, 500);
});

Comments

[Nikita_Migushev]

Работает отлично. Спасибо!

[Nikita_Migushev]

0xD34F А можно немного пояснить, что здесь происходит?
1. $('.slide:last').prependTo($('.slider')); - Переносим последний слайд и ставим его в начало.
2. $('.slider').css('margin-left', '-100%') - Не совсем понятно, зачем двигать .slider на 100% вправо?
3.

.animate({
    marginLeft: '+=100%'

- здесь более-менее понятно - двигаем .slider влево на 100% с анимацией.

[Nikita_Migushev]

0xD34F Все разобрался на бумажке ))

Спасибо!