Summary  
Demonstrates how to select and cycle through DOM elements by toggling CSS classes and using timers and event listeners to create an interactive image carousel.

General domain of usage  
Web image galleries

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/image-tools-section/image-swiper/image-swiper.css"
    />
  </head>
  <body>
    
    <div class="image-container" id="imageContainer">
      <img
        src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/other-section/oleh-s_tests/blueberries-531209_640.jpg"
        class="active"
        loading="lazy"
      />
      <img
        src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/other-section/oleh-s_tests/coffee-5630799_1280.jpg"
        loading="lazy"
      />
      <img
        src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/other-section/oleh-s_tests/elephant-9549133_640.jpg"
        loading="lazy"
      />
      <img
        src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/other-section/oleh-s_tests/industry-9562428_1280.jpg"
        loading="lazy"
      />
      <img
        src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/other-section/oleh-s_tests/mount-haast-7534094_1280.jpg"
        loading="lazy"
      />
      <img
        src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/other-section/oleh-s_tests/plums-940100_640.jpg"
        loading="lazy"
      />
      <img
        src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/other-section/oleh-s_tests/popsicle-9568309_640.jpg"
        loading="lazy"
      />
      <img
        src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/other-section/oleh-s_tests/purple-leaf-plum-9545165_1280.jpg"
        loading="lazy"
      />
    </div>

    <div class="swiper-nav" id="swiperNav">
      <div class="line"></div>
      <span class="active-dot" id="activeDot">
        <span class="tooltip" id="dotTooltip">1</span>
      </span>
    </div>

    <script src="https://staging-content-media-cdn.codefinity.com/courses/c1087363-9025-4c37-8d5e-983a32a007e9/image-tools-section/image-swiper/image-swiper.js"></script>
  </body>
</html>

PCFET0NUWVBFIGh0bWw+CjxodG1sIGxhbmc9ImVuIj4KICA8aGVhZD4KICAgIDxsaW5rCiAgICAgIHJlbD0ic3R5bGVzaGVldCIKICAgICAgaHJlZj0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9jMTA4NzM2My05MDI1LTRjMzctOGQ1ZS05ODNhMzJhMDA3ZTkvaW1hZ2UtdG9vbHMtc2VjdGlvbi9pbWFnZS1zd2lwZXIvaW1hZ2Utc3dpcGVyLmNzcyIKICAgIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPCEtLSAKICAgICAgWW91IGNhbiBjaGFuZ2UgdGhlIGltYWdlcyBiZWxvdyBieSByZXBsYWNpbmcgdGhlIGBzcmNgIGF0dHJpYnV0ZSB2YWx1ZXMuIAogICAgICBBZGQgb3IgcmVtb3ZlIDxpbWc+IHRhZ3MgaW5zaWRlIHRoZSBjb250YWluZXIgYXMgbmVlZGVkIHRvIGN1c3RvbWl6ZSB0aGUgc3dpcGVyLgogICAgLS0+CiAgICA8ZGl2IGNsYXNzPSJpbWFnZS1jb250YWluZXIiIGlkPSJpbWFnZUNvbnRhaW5lciI+CiAgICAgIDxpbWcKICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvYzEwODczNjMtOTAyNS00YzM3LThkNWUtOTgzYTMyYTAwN2U5L290aGVyLXNlY3Rpb24vb2xlaC1zX3Rlc3RzL2JsdWViZXJyaWVzLTUzMTIwOV82NDAuanBnIgogICAgICAgIGNsYXNzPSJhY3RpdmUiCiAgICAgICAgbG9hZGluZz0ibGF6eSIKICAgICAgLz4KICAgICAgPGltZwogICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9jMTA4NzM2My05MDI1LTRjMzctOGQ1ZS05ODNhMzJhMDA3ZTkvb3RoZXItc2VjdGlvbi9vbGVoLXNfdGVzdHMvY29mZmVlLTU2MzA3OTlfMTI4MC5qcGciCiAgICAgICAgbG9hZGluZz0ibGF6eSIKICAgICAgLz4KICAgICAgPGltZwogICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9jMTA4NzM2My05MDI1LTRjMzctOGQ1ZS05ODNhMzJhMDA3ZTkvb3RoZXItc2VjdGlvbi9vbGVoLXNfdGVzdHMvZWxlcGhhbnQtOTU0OTEzM182NDAuanBnIgogICAgICAgIGxvYWRpbmc9ImxhenkiCiAgICAgIC8+CiAgICAgIDxpbWcKICAgICAgICBzcmM9Imh0dHBzOi8vY29kZWZpbml0eS1jb250ZW50LW1lZGlhLXYyLnMzLmV1LXdlc3QtMS5hbWF6b25hd3MuY29tL2NvdXJzZXMvYzEwODczNjMtOTAyNS00YzM3LThkNWUtOTgzYTMyYTAwN2U5L290aGVyLXNlY3Rpb24vb2xlaC1zX3Rlc3RzL2luZHVzdHJ5LTk1NjI0MjhfMTI4MC5qcGciCiAgICAgICAgbG9hZGluZz0ibGF6eSIKICAgICAgLz4KICAgICAgPGltZwogICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9jMTA4NzM2My05MDI1LTRjMzctOGQ1ZS05ODNhMzJhMDA3ZTkvb3RoZXItc2VjdGlvbi9vbGVoLXNfdGVzdHMvbW91bnQtaGFhc3QtNzUzNDA5NF8xMjgwLmpwZyIKICAgICAgICBsb2FkaW5nPSJsYXp5IgogICAgICAvPgogICAgICA8aW1nCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzL2MxMDg3MzYzLTkwMjUtNGMzNy04ZDVlLTk4M2EzMmEwMDdlOS9vdGhlci1zZWN0aW9uL29sZWgtc190ZXN0cy9wbHVtcy05NDAxMDBfNjQwLmpwZyIKICAgICAgICBsb2FkaW5nPSJsYXp5IgogICAgICAvPgogICAgICA8aW1nCiAgICAgICAgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzL2MxMDg3MzYzLTkwMjUtNGMzNy04ZDVlLTk4M2EzMmEwMDdlOS9vdGhlci1zZWN0aW9uL29sZWgtc190ZXN0cy9wb3BzaWNsZS05NTY4MzA5XzY0MC5qcGciCiAgICAgICAgbG9hZGluZz0ibGF6eSIKICAgICAgLz4KICAgICAgPGltZwogICAgICAgIHNyYz0iaHR0cHM6Ly9jb2RlZmluaXR5LWNvbnRlbnQtbWVkaWEtdjIuczMuZXUtd2VzdC0xLmFtYXpvbmF3cy5jb20vY291cnNlcy9jMTA4NzM2My05MDI1LTRjMzctOGQ1ZS05ODNhMzJhMDA3ZTkvb3RoZXItc2VjdGlvbi9vbGVoLXNfdGVzdHMvcHVycGxlLWxlYWYtcGx1bS05NTQ1MTY1XzEyODAuanBnIgogICAgICAgIGxvYWRpbmc9ImxhenkiCiAgICAgIC8+CiAgICA8L2Rpdj4KCiAgICA8ZGl2IGNsYXNzPSJzd2lwZXItbmF2IiBpZD0ic3dpcGVyTmF2Ij4KICAgICAgPGRpdiBjbGFzcz0ibGluZSI+PC9kaXY+CiAgICAgIDxzcGFuIGNsYXNzPSJhY3RpdmUtZG90IiBpZD0iYWN0aXZlRG90Ij4KICAgICAgICA8c3BhbiBjbGFzcz0idG9vbHRpcCIgaWQ9ImRvdFRvb2x0aXAiPjE8L3NwYW4+CiAgICAgIDwvc3Bhbj4KICAgIDwvZGl2PgoKICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2NvZGVmaW5pdHktY29udGVudC1tZWRpYS12Mi5zMy5ldS13ZXN0LTEuYW1hem9uYXdzLmNvbS9jb3Vyc2VzL2MxMDg3MzYzLTkwMjUtNGMzNy04ZDVlLTk4M2EzMmEwMDdlOS9pbWFnZS10b29scy1zZWN0aW9uL2ltYWdlLXN3aXBlci9pbWFnZS1zd2lwZXIuanMiPjwvc2NyaXB0PgogIDwvYm9keT4KPC9odG1sPg==

This section contains a variety of buttons, each designed to perform a specific function.

This section provides auxiliary tools that support content formatting and data manipulation.

This section contains additional features and tools designed to provide enhanced functionality.

This section contains various text box elements.

Please don't use any elements from this section, as it doesn't provide any value for the content development. Thank you!

Please note that the elements in this section are deprecated and no longer recommended for use. It would be best to avoid using them moving forward. Thank you!

Image Swiper

Element

Source Code

Image Swiper

Element

Source Code