Carousel Slideshow with autoplay and control

Question

Trying my best to build my own Carousel/Slideshow with simple js.

Trying to remove the active class on the current view div, then add the active class on the next/prev one. But somehow right now it does on the next two div or prev div, why?
How to loop the slide? (what I mean is when on the #1 div, click prev, go to #3 div)
I also want to add some controls dot under, how to make it related to the autoplay and click control?

Thank you!

$(document).ready(function(){
  $('.next').on('click', function(){
    $('.slider-inner > div.active').removeClass('active').css('z-index', -10);
    $('.slider-inner > div').next().addClass('active').css('z-index', 10);
  });

  $('.prev').on('click', function(){
    $('.slider-inner > div.active').removeClass('active').css('z-index', -10);
    $('.slider-inner > div').prev().addClass('active').css('z-index', 10);
  });

  setInterval(function() {
    $('.slider-inner > div:first')
    /*Set fadeout time here. Unite is millisecond.*/
      .fadeOut(1000)
      .next()
    /*Set fadein time here. Unite is millisecond.*/
      .fadeIn(1000)
      .end()
      .appendTo('.slider-inner');
    /*Set the fixed frame duration here. Unite is millisecond.*/
  },  3000);

});

.slider-outer{
	width:230px;
	margin:40px auto;
	overflow:auto;
}

.slider-inner{
	width:200px;
	height:200px;
	position:relative;
	overflow:hidden;
	float:left;
	padding:3px;
    background:#333;
    color:#fff;
}

.slider-inner > div{
	display:none;
	width:200px;
	height:200px;
}

.slider-inner .active{
	display:inline-block;
}

.prev,.next{
	float:left;
	margin-left:50px;
	cursor: pointer;
}

.carousel-dot > div{
    float: left;
    width: 30px;
    height: 8px;
    background-color: #D8D8D8;
    margin-right: 30px;
    margin-top: 50px;
}

.carousel-dot .active{
    background-color: #FF6600;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="slider-outer">
<div class="slider-inner">
<div id="item" class="active"><p>#1</p></div>
<div id="item" ><p>#2</p></div>
<div id="item" ><p>#3</p></div>
</div>

<div class="carousel-controls">
<a class="prev" >prev</a>
<a class="next" >next</a>
</div>

<div class="carousel-dot">
          <div class="active"></div>
          <div></div>
          <div></div>
        </div>
        </div>

Graeme Graeme · Accepted Answer · 2019-06-12T23:29:57

The selector you are using in the click handler for .next() and .prev() appears too broad.

In general, for such components, it can be advisable to track the current & max slide positions as array indexes, or positions, within your element collection.

Eventually your logic will need to account for the first/last slides & whether there is indeed a next or previous slide available to be shown.

Hopefully this can give you an indication for the approach:

const slides = $(“.slider-inner .item”);
const max = slides.length;
let current = 0;

slides.eq(current).addClass(“active”);

Around this principle you should be able increment/decrement the current integer and then add/remove your active class to elements as required.

Hope it helps.

Carousel Slideshow with autoplay and control

1 Answers