Infinte Loop of Carousel - Jquery

I am using Jquery and Jquery UI for creating carousel. I am switching clasess on clicking arrow-container--left amd arrow-container--right. I want it to be infinte loop

$(function() {
    $(".slides .slide").addClass("car-unactive");
    console.log( "ready!" );
    $(".slides .slide:nth-child(-n+3").switchClass("car-unactive","car-active");
  
$(".arrow-container--right button").click(function(){
        $(".slides .slide.car-active:last").next(".slides .slide.car-unactive").switchClass("car-unactive","car-active");
    $(".slides .slide.car-active:first").switchClass("car-active","car-unactive");
    console.log( "NEXT12!" );
    });

$(".arrow-container--left button").click(function(){
    $(".slides .slide.car-active:first").prev(".slides .slide.car-unactive").switchClass("car-unactive","car-active");
    $(".slides .slide.car-active:last").switchClass("car-active","car-unactive");
    console.log( "PREV12!" );
    });
});

.car-active{
    display:block !important;
}
.car-unactive{
    display:none !important;
}

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script>
<ul class="slides slides--initialized" style="min-height: 100vh;">
    <li class="slide list-item car-active" style="padding: 2%; display: none; transform: translate3d(0px, 0px, 0px);" data-is-card-enabled="false"></li>
    <li class="slide list-item car-active" style="padding: 2%; display: none; transform: translate3d(-9999px, 0px, 0px);" data-is-card-enabled="false" aria-hidden="true"></li>
    <li class="slide list-item car-active" style="padding: 2%; display: none; transform: translate3d(-453px, 0px, 0px);" data-is-card-enabled="false" aria-hidden="true"></li>
    <li class="slide list-item car-unactive" style="padding: 2%; transform: translate3d(0px, 0px, 0px);" data-is-card-enabled="false" aria-hidden="true"></li>
    <li class="slide list-item car-unactive" style="padding: 2%; transform: translate3d(0px, 0px, 0px);" data-is-card-enabled="false" aria-hidden="true"></li>
    <li class="slide list-item car-unactive" style="padding: 2%; transform: translate3d(0px, 0px, 0px);" data-is-card-enabled="false" aria-hidden="true"></li>
</ul>
<div class="desktop-arrows arrow-container arrow-container--left" style="left: 3vw;" id="yui_3_17_2_1_1661374034720_420">
    <button class="user-items-list-banner-slideshow__arrow-button user-items-list-banner-slideshow__arrow-button--left" aria-label="Previous" data-animation-role="button" id="yui_3_17_2_1_1661374034720_419">
        <div class="user-items-list-banner-slideshow__arrow-icon-background user-items-list-banner-slideshow__arrow-icon-background-area"></div>
    </button>
</div>
<div class="desktop-arrows arrow-container arrow-container--right" style="right: 3vw;" id="yui_3_17_2_1_1661374034720_404">
    <button class="user-items-list-banner-slideshow__arrow-button user-items-list-banner-slideshow__arrow-button--right" aria-label="Next" data-animation-role="button" id="yui_3_17_2_1_1661374034720_403">
        <div class="user-items-list-banner-slideshow__arrow-icon-background user-items-list-banner-slideshow__arrow-icon-background-area" id="yui_3_17_2_1_1661374034720_402"></div>
    </button>
</div>

Infinte Loop of Carousel - Jquery

0 Answers