jQuery Карусель плавной анимации

Question

У меня есть проблема, которую я пытаюсь решить в течение нескольких часов ... Я создал карусель в jQuery, и когда я нажимаю кнопки (вправо, влево), она переходит к следующему элементу без плавной анимации. Можете ли вы помочь мне с этим? Заранее спасибо!

Вот код

HTML

<div class="images-carousel">
      <div class="img-carousel-container">
        <div class="img-carousel">
          <div>
            <img src="" alt="" />
            <p>text</p>
          </div>
          <div>
            <img src="" alt="" />
            <p>text</p>
          </div>
          <div>
            <img src="" alt="" />
            <p>text</p>
          </div>
          <div>
            <img src="" alt="" />
            <p>text</p>
          </div>
          <div>
            <img src="" alt="" />
            <p>text</p>
          </div>
          <div>
            <img src="" alt="" />
            <p>text</p>
          </div>
        </div>
      </div>
    </div>

CSS - SASS

.images-carousel
    display: grid
    align-items: conter
    justify-items: center
    margin-top: 50px

    .img-carousel-container
        width: 100%

        .img-carousel
            display: flex
            overflow-x: auto
            -webkit-overflow-scrolling: touch
            scroll-snap-type: x mandatory
            scroll-behavior: smooth

            div
                flex: none
                scroll-snap-align: start
                scroll-behavior: smooth
                width: 25%
                height: auto
                margin-right: 20px
                position: relative
                overflow: hidden

                img
                    display: block
                    width: 100%
                    object-fit: cover

jQuery

$("#right").click(function() {
  $(".img-carousel")
    .find("div:last")
    .after($(".img-carousel").find("div:first"));
});

$("#left").click(function() {
  $(".img-carousel")
    .find("div:first")
    .before($(".img-carousel").find("div:last"));
});

Что я могу сделать, чтобы оживить div? Прямо сейчас, когда я нажимаю «Далее» или «Предварительный просмотр», они мгновенно меняются, я хочу, чтобы они плавно прокручивали вправо и влево. Спасибо за ваше время!

Answer 1

Вы можете использовать функции отображения и скрытия в jQuery:

$("#right").click(function() {
  $(".img-carousel")
    .find("div:last").hide()
    .after($(".img-carousel").find("div:first"));
  $(".img-carousel").find("div:last").show();
});

$("#left").click(function() {
  $(".img-carousel")
    .find("div:first").hide()
    .before($(".img-carousel").find("div:last"));
  $(".img-carousel").find("div:first").show();
});