HTML: 

  <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Image Slideshow</title>
  </head>
<body>

<div class="slideshow-container">
  <div class="mySlides">
    <img src="image1.jpg" class="slideshow-img">
  </div>
  
  <div class="mySlides">
    <img src="image2.jpg" class="slideshow-img">
  </div>
  
  <div class="mySlides">
    <img src="image3.jpg" class="slideshow-img">
  </div>
  
  <div class="mySlides">
    <img src="image4.jpg" class="slideshow-img">
  </div>

  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>
</body>
</html>

CSS: 

  <style>
    .slideshow-container {
      max-width: 500px;
      position: relative;
      margin: auto;
    }
    
    .mySlides {
      display: none;
    }

    .slideshow-img {
      width: 100%;
      height: auto;
    }

    .prev, .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -22px;
      color: white;
      font-weight: bold;
      font-size: 20px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
    }

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

    .prev:hover, .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }
  </style>

JAVASCRIPT: 

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

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

  function showSlides(n) {
    let i;
    let 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>

Try to answer about this code:

What HTML tag is used to display an image in the slideshow?

<image>
<img>

<pic>
<image-src>

Which CSS class sets the maximum width for the slideshow container in the provided code?

.slideshow-img
.slideshow-container

.slideshow
.container

What JavaScript function is triggered when the "Previous Image" button is clicked?

prevImage()
plusSlides(-1)

previousSlide()
showPrevious()

How are the previous and next buttons styled when hovered over in the slideshow?

Background color changes to red
Background color becomes more opaque

Border color changes to blue
Font size increases