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

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


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

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


  let slideIndex = 0;

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

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">

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