Simple carousel/slider

slider.css

.pagination {
  display: flex;
}

.numbers {
  padding: 0 1em;
}

.slides {
  list-style: none;
  display: flex;
}

.slide {
  width: 4em;
  height: 4em;
  background: blue;
}

.slide--active {
  background: red;
}

.current {
  display: none;
}

.current.current--active {
  display: inline;
}

slider.html

<div class="pagination">
  <a href="#" class="prev">&larr;</a>
  <div class="numbers">
    <span class="current current--active">1</span>
    <span class="current">2</span>
    <span class="current">3</span> / <span class="total">3</span>
  </div>
  <a href="#" class="next">&rarr;</a>
</div>

<ul class="slides">
  <li class="slide slide--active"></li>
  <li class="slide"></li>
  <li class="slide"></li>
</ul>

slider.js

const state = {
	index: $('.slide--active').index(),
  timer: null,
  timerDurationMilliseconds: 2000,
  numSlides: $('.slide').length
};

const decrementIndex = () => {
	let newIndex = state.index - 1;
  
  if (newIndex < 0) {
  	newIndex = state.numSlides - 1;
  }
  
  state.index = newIndex;
};

const incrementIndex = () => {
	let newIndex = state.index + 1;
  
  if (newIndex >= state.numSlides) {
  	newIndex = 0;
  }
  
  state.index = newIndex;
};

const render = () => {
	$('.current').each(function () {
  	const $this = $(this);
    $this.toggleClass('current--active', $this.index() === state.index);
  });
  
	$('.slide').each(function () {
  	const $this = $(this);
  	$this.toggleClass('slide--active', $this.index() === state.index);
  });
  
  if (state.timer) {
    clearTimeout(state.timer);
  }
  
  state.timer = setTimeout(() => {
    incrementIndex();
    render();
  }, state.timerDurationMilliseconds);
};

$('.next').on('click', function () {
	incrementIndex();
  render();
});

$('.prev').on('click', function () {
	decrementIndex();
  render();
});

render();

Slider / Carousel

This is a barebones, simplistic slider, it contains very little in the way of css and is certainly not responsive. I suppose it is aimed at developers who want to avoid bloated general solutions and are happy to wrangle this into shape with css.

I found even lightweight solutions had evolved to be very cumbersome and were generally outdated. My favourite was unslider which seems to have been forgotten (though one user has apparently re-created it).

This gist was the outcome of a Stack Overflow, question I raised in February 2023. Although I'd managed a rudimentary loop of slides, the next and previous buttons interrupted the timing and my code was verbose. A user called Steve from Canada, kindly helped me refine the code and this is the end result.

At the time of posting there is also a fiddle available. Not that kind of fiddle you pervert.