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>
</div>
</body>
</html>

CSS: 

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

    .slideshow-img {
      width: 100%;
      height: auto;
    }
  </style>

JavaScript: 

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

  function showSlides() {
    let i;
    let slides = document.getElementsByClassName("mySlides");
    
    for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";  
    }
    
    slideIndex++;
    
    if (slideIndex > slides.length) { 
      slideIndex = 1; 
    }
    
    slides[slideIndex - 1].style.display = "block";  
    setTimeout(showSlides, 2000); // Change image every 2 seconds
  }
</script>

Try to answer about this code:

What does the JavaScript function showSlides() do in this code?

Stops the image slideshow
Cycles through the images to create a slideshow

Displays a loading animation for images
Controls the navigation buttons for the slideshow

Which HTML element is responsible for containing the individual images in the slideshow?

<img class="slideshow-img">
<div class="mySlides">

<div class="slideshow-container">
<body>

What CSS property controls the visibility of the images in the slideshow?

display: block;
display: none;

visibility: hidden;
opacity: 0;

How often does the slideshow transition to the next image by default?

Every 1 second
Every 2 seconds

Every 3 seconds
Every 5 seconds