How to restart this jQuery slider after the last div img reach-CodePudding

Here is simple jQuery slider, but i want to set this as when the last img div reach then if we click on next it should be return to the first one again and same as if we are going to back side with the previous button the if the first img div reach then it should be return as last one same as backside.

i tried this code but it not working:

$(document).ready(function(){
$('.next').click(function(){
var active = $('.slide .active');

 if(active.next('div').length != 0) {
    $('.slide').find('div.active').next().
        addClass('active');
$('.slide').find('div.active').prev().
        removeClass('active');
        }
        else {
        $('#slide div:first').addClass('active');
        }

});
$('.prev').click(function(){
 if(active.prev('div').length != 0) {
    $('.slide').find('div.active').prev().
        addClass('active');
$('.slide').find('div.active').next().
        removeClass('active');
   }
      else {
        $('#slide div:last').addClass('active');
        }
   
   
});
});

My whole slider code is:

$(document).ready(function(){
$('.next').click(function(){
    $('.slide').find('div.active').next().
        addClass('active');
$('.slide').find('div.active').prev().
        removeClass('active');

});
$('.prev').click(function(){
    $('.slide').find('div.active').prev().
        addClass('active');
$('.slide').find('div.active').next().
        removeClass('active');

});
});

.container {
position: relative;
width: 600px;
height: 400px;
background: yellow;
}
.container .slide {
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
Z-index: 2;
}

.container .slide div
{
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
}

.container .slide div img

{
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.container .slide div.active
{
opacity: 1;
visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container">
<div class="slide">
<div class="active"><img src="https://images.tv9hindi.com/wp-content/uploads/2021/11/LPG-Gas-Cylinder.jpg?w=600&dpr=6.4"></div>
<div><img src="https://static.india.com/wp-content/uploads/2021/09/LPG-Price-Hike.jpg"></div>
<div><img src="https://hindi.cdn.zeenews.com/hindi/sites/default/files/2021/10/31/958129-indian-railways-time-tables.jpg"></div>
<div><img src="https://new-img.patrika.com/upload/2020/10/27/cylinder1_6484690_835x547-m.jpg"></div>
</div>
</div>

<button class="prev">prev</button>
<button class="next">next</button>

CodePudding user response：

When clicking on next - check if the last div has the class active. If so remove it and add it to the first div. When clicking on prev - do the opposite.

Snippet:

$(document).ready(function(){
$('.next').click(function(){
  $('.slide').find('div.active').next().addClass('active');
  $('.slide').find('div.active').prev().removeClass('active');
  if ($('.slide div:last-of-type').hasClass('active')) {
    $('.slide div:last-of-type').removeClass('active');
    $('.slide div:first-of-type').addClass('active');
  }
});
$('.prev').click(function(){
  $('.slide').find('div.active').prev().addClass('active');
  $('.slide').find('div.active').next().removeClass('active');
  if ($('.slide div:first-of-type').hasClass('active')) {
    $('.slide div:first-of-type').removeClass('active');
    $('.slide div:last-of-type').addClass('active');
  }
});
});

.container {
position: relative;
width: 600px;
height: 400px;
background: yellow;
}
.container .slide {
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
Z-index: 2;
}

.container .slide div
{
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
}

.container .slide div img

{
position: absolute;
top: 0;
Left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}

.container .slide div.active
{
opacity: 1;
visibility: visible;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container">
<div class="slide">
<div class="active"><img src="https://images.tv9hindi.com/wp-content/uploads/2021/11/LPG-Gas-Cylinder.jpg?w=600&dpr=6.4"></div>
<div><img src="https://static.india.com/wp-content/uploads/2021/09/LPG-Price-Hike.jpg"></div>
<div><img src="https://hindi.cdn.zeenews.com/hindi/sites/default/files/2021/10/31/958129-indian-railways-time-tables.jpg"></div>
<div><img src="https://new-img.patrika.com/upload/2020/10/27/cylinder1_6484690_835x547-m.jpg"></div>
</div>
</div>

<button class="prev">prev</button>
<button class="next">next</button>