make an infinite slider

I made a home made slider where i add a class on the slide section in view and an other class for the preview one but i can't find a solution for make it come back to the first slide section how can i make it infinite?

$(document).ready(function() {
        
        var ul = $('.project ul'),
    li = ul.find('li');

var $next=$('#arrow');

li.eq(0).addClass('prev');
li.eq(1).addClass('active');


$next.on('click', function(){
    $(li.get().reverse()).filter('.active').removeClass('active').next().addClass('active');
         $(li.get().reverse()).filter('.prev').removeClass('prev').next().addClass('prev');
});

});

.project-bg{
        position:absolute;
        height:75vh;
        width:25vw;
        top:50%;
        left:50%;
        margin-top:-37.5vh;
        margin-left:-35vw;
        overflow:hidden;
}

.project-bg .bg-in{
         width: 100%;
    height: 100%;
}
.project-bg:nth-child(2) .bg-in{
        background:red;
}

.project-bg:nth-child(3) .bg-in{
background:blue;
}
.project-bg:nth-child(4) .bg-in{
background:yellow;
}
.project-bg:nth-child(5) .bg-in{
background:orange;
}

.project-bg .bg-in{
    -webkit-transform: translate3d(100%, 0, 0);
    -moz-transform: translate3d(100%, 0, 0);
    -ms-transform: translate3d(100%, 0, 0);
    -o-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
}

.project-bg.active .bg-in{
    transform: translate3d(0%, 0, 0)
}

.project-bg.prev .bg-in{
    transform: translate3d(-100%, 0, 0)
}

#arrow{
        position:absolute;
        height:20px;
        width:60px;
        right:0%;
        bottom:0%;
        margin-right:250px;
        margin-bottom:50px;
        cursor:pointer;
        z-index:10;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="project">
 
        <ul>
                <li class="project-bg"><div class="bg-in"></div></li>
                <li class="project-bg"><div class="bg-in"></div></li>
            <li class="project-bg"><div class="bg-in"></div></li>
            <li class="project-bg"><div class="bg-in"></div></li>
            <li class="project-bg"><div class="bg-in"></div></li>
         </ul>
           
        </div>
        
         <div id="arrow">
        <svg id="arrow-svg" viewBox="0 0 60 20">
        <polygon points="56.1,9.3 49.7,11.6 49.7,7.1 "/>
        <g>
                <rect x="3.9" y="8.8" width="46" height="1"/>
        </g>
        </svg>
        </div>

درباره سایت

آخرین مطالب

امکانات وب

make an infinite slider

Vote count: 0

صفحه بندی

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه