Including slider in html page

February 28, 2023

I’m trying to include slider in a html page

<!DOCTYPE html>
<html>
<head>
    <title>Slider Example</title>
    <style>
        .slider-container {
            position: absolute;
            top: 50%;
            right: 0;
            transform: translateY(-50%);
            background-color: #f0f0f0;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
        }

        .slider {
            width: 300px;
            margin: 0 auto;
            overflow: hidden;
            position: relative;
            box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
        }

        .slider img {
            display: block;
            width: 100%;
            height: auto;
        }

        .slider button {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background-color: transparent;
            border: none;
            font-size: 24px;
            color: #555;
            padding: 0 10px;
            cursor: pointer;
        }

        .slider button.prev {
            left: 0;
        }

        .slider button.next {
            right: 0;
        }
    </style>
</head>
<body>
    <div class="slider-container">
        <h2>Slider Example</h2>
        <div class="slider">
            <img src="https://via.placeholder.com/500x250?text=Slide+1" alt="Slide 1">
            <img src="https://via.placeholder.com/500x250?text=Slide+2" alt="Slide 2">
            <img src="https://via.placeholder.com/500x250?text=Slide+3" alt="Slide 3">
            <img src="https://via.placeholder.com/500x250?text=Slide+4" alt="Slide 4">
        </div>
        <button class="prev">&#10094;</button>
        <button class="next">&#10095;</button>
    </div>

    <script>
        var slideIndex = 1;
        showSlides(slideIndex);

        function plusSlides(n) {
            showSlides(slideIndex += n);
        }

        function currentSlide(n) {
            showSlides(slideIndex = n);
        }

        function showSlides(n) {
          var i;
          var slides = document.getElementsByClassName("slider")[0].getElementsByTagName("img");
          slideIndex += n; // increment or decrement slideIndex based on value of n
          if (slideIndex > slides.length) { slideIndex = 1 }
          if (slideIndex < 1) { slideIndex = slides.length }
          for (i = 0; i < slides.length; i++) {
            slides[i].style.display = "none";
          }
          slides[slideIndex-1].style.display = "block";
        }



        // add event listeners for prev and next buttons
        document.querySelector('.prev').addEventListener('click', function() {
            plusSlides(-1);
        });

        document.querySelector('.next').addEventListener('click', function() {
            plusSlides(1);
        });
    </script>
</body>
</html>

Only the first and last slide is displayed and the slide is not advancing correctly.
Suggestions on how to fix this will be really helpful

>Solution :

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("slider")[0].getElementsByTagName("img");
  slideIndex = n; // set slideIndex to the value of n
  if (slideIndex > slides.length) { slideIndex = 1 }
  if (slideIndex < 1) { slideIndex = slides.length }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slides[slideIndex-1].style.display = "block";
}