* {box-sizing:border-box}

​

/* Slideshow container */

.slideshow-container {

  max-width: 1000px;

  position: relative;

  margin: auto;

}

​

/* Make the images invisible by default */

.Containers {

  display: none;

}

​

/* forward & Back buttons */

.Back, .forward {

  cursor: pointer;

  position: absolute;

  top: 48%;

  width: auto;

  margin-top: -23px;

  padding: 17px;

  color: grey;

  font-weight: bold;

  font-size: 19px;

  transition: 0.4s ease;

  border-radius: 0 5px 5px 0;

  user-select: none;

}

​

/* Place the "forward button" to the right */

.forward {

  right: 0;

  border-radius: 4px 0 0 4px;

}

​

/*when the user hovers,add a black background with some little opacity */

.Back:hover, .forward:hover {

  background-color: rgba(0,0,0,0.8);

}

​

/* Caption Info */

.Info {

  color: #e3e3e3;

  font-size: 16px;

  padding: 10px 14px;

  position: absolute;

  bottom: 10px;

  width: 100%;

  text-align: center;

}

​

/* Worknumbering (1/3 etc) */

.MessageInfo {

  color: #f2f2f3;

  font-size: 14px;

  padding: 10px 14px;

  position: absolute;

  top: 0;

}

​

/* The circles or bullets and indicators */

.dots {

  cursor: pointer;

  height: 16px;

  width: 16px;

  margin: 0 3px;

  background-color: #acc;

  border-radius: 50%;

  display: inline-block;

  transition: background-color 0.5s ease;

}

​

.enable, .dots:hover {

  background-color: #717161;

}

​

/* Faint animation */

.fade {

  -webkit-animation-name: fade;

  -webkit-animation-duration: 1.4s;

  animation-name: fade;

  animation-duration: 1.4s;

}

​

@-webkit-keyframes fade {

  from {opacity: .5}

  to {opacity: 2}

}

​

@keyframes fade {

  from {opacity: .5}

  to {opacity: 2}

}

// script.js

const slides = document.querySelectorAll('.carousel-slide');

const prevBtn = document.getElementById('prevBtn');

const nextBtn = document.getElementById('nextBtn');

let currentSlide = 0;

​

function showSlide(index) {

    slides.forEach((slide, i) => {

        slide.style.display = i === index ? 'block' : 'none';

    });

}

​

function nextSlide() {

    currentSlide = (currentSlide + 1) % slides.length;

    showSlide(currentSlide);

}

​

function prevSlide() {

    currentSlide = (currentSlide - 1 + slides.length) % slides.length;

    showSlide(currentSlide);

}

​

prevBtn.addEventListener('click', prevSlide);

nextBtn.addEventListener('click', nextSlide);

​

showSlide(currentSlide); // Show the initial slide

<div class="carousel">

    <a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>

    <a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2"></a>

    <a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3"></a>

    <a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4"></a>

    <a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5"></a>

  </div>

document.addEventListener('DOMContentLoaded', function() {

    var elems = document.querySelectorAll('.carousel');

    var instances = M.Carousel.init(elems, options);

  });

​

  // Or with jQuery

​

  $(document).ready(function(){

    $('.carousel').carousel();

  });