You can utilize show & hide functions in 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();
});

I have a problem that I try to solve for several hours .. I created a carousel in jQuery and when I press the buttons (right, left) it takes me to the next element without having a smooth animation. Can you please help me with this? Thank you in advance!

Here is the code

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

What I could do to animate the divs? Right now when i click next or preview they kinda change instantly, I want them to scroll right and left in a smooth way. Thanks for your time!