Breaking News: Grepper is joining You.com. Read the official announcement!

Image slideshow code

manelisi madubela answered on October 16, 2023 Popularity 3/10 Helpfulness 3/10

answer Image slideshow code

Image slideshow code

Comment

<!DOCTYPE html>
<html>
<head>
  <style>
    /* Style for the slideshow container */
    .slideshow-container {
      max-width: 500px;
      position: relative;
      margin: auto;
    }

    /* Style for the slideshow images */
    .slideshow-container img {
      width: 100%;
      height: auto;
    }

    /* Style for the slideshow navigation buttons */
    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      color: white;
      font-weight: bold;
      font-size: 18px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
    }

    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    /* Style for the slideshow navigation button on hover */
    .prev:hover, .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
  </style>
</head>
<body>

<div class="slideshow-container">
  <!-- Slides -->
  <img class="mySlides" src="image1.jpg" alt="Image 1">
  <img class="mySlides" src="image2.jpg" alt="Image 2">
  <img class="mySlides" src="image3.jpg" alt="Image 3">

  <!-- Navigation buttons -->
  <a class="prev" onclick="plusSlides(-1)">❮</a>
  <a class="next" onclick="plusSlides(1)">❯</a>
</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("mySlides");

    if (n > slides.length) {
      slideIndex = 1;
    }

    if (n < 1) {
      slideIndex = slides.length;
    }

    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
    }

    slides[slideIndex - 1].style.display = "block";
  }
</script>

</body>
</html>

Popularity 3/10 Helpfulness 3/10 Language javascript

Source: chat.openai.com

Tags: image javascript slideshow

Link to this answer
Share Copy Link

Contributed on Oct 16 2023

manelisi madubela

0 Answers Avg Quality 2/10

Image slideshow code

Contents

More Related Answers

Image slideshow code

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.