Image Components - Image Carousel

Image Display - Carousel

Image Carousel

Implementation Code and the output

<div class="carousel ">
  <div class="carousel-img show">
    <img src="image1.jpg">
  </div>

  <div class="carousel-img">
    <img src="image2.jpg">
  </div>

  <div class="carousel-img">
    <img src="image3.jpg">
  </div>

  <div class="carousel-img">
    <img src="image4.jpg">
  </div>

  <div class="slide-button prev">&#10094;</div>
  <div class="slide-button next">&#10095;</div>

  <div class="carousel-dots-group">
    <span class="carousel-img-dots">
      <span class="left-arrow slide-button">
        <i class="ph ph-caret-left"></i>
      </span>
      <span class="dot active"></span>
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot "></span>
      <span class="right-arrow slide-button">
        <i class="ph ph-caret-right"></i>
      </span>
    </span>
  </div>
</div>

Output Sample

❮

❯

To Add an image to the carousel

To Add an image, following modifications would help

• Under the div element with the class carousel add the element <img> with the image source location
• the img element is to be wrapped around a div element with the class carousel-img with the image source location
• the img element is expected to come before the div element with the class slide-button

<div class="carousel"></div>
                
  ....  

  <div class="carousel-img">
      <img src="image5.jpg">
  </div>

  <div class="slide-button prev">&#10094;</div>

  ....

Copy
• Under the div element with the class carousel-img-dots ,add the span element with the class dot
• This should come after the span element with the class left-arrow and before the span element with the class right-arrow

<span class="carousel-img-dots">
  <span class="left-arrow slide-button">
    <i class="ph ph-caret-left"></i>
  </span>
  
  ....

  <span class="dot"></span>
  
  ....

  <span class="right-arrow slide-button">
    <i class="ph ph-caret-right"></i>
  </span>

  ....

Copy

Image Carousel Auto Slideshow Animation

To make the Image carousel animate automatically like a slide show

• Just add the class animate in the div element with the class carousel

<div class="carousel animate">

Copy

Implementation Code and the output

<div class="carousel animate">
  <div class="carousel-img show">
    <img src="image1.jpg" alt="Image-Carousel-1">
  </div>

  <div class="carousel-img ">
    <img src="image2.jpg" alt="Image-Carousel-2">
  </div>

  <div class="carousel-img ">
    <img src="image3.jpg" alt="Image-Carousel-3">
  </div>

  <div class="carousel-img">
    <img src="image4.jpg" alt="Image-Carousel-4">
  </div>

  <div class="slide-button prev">&#10094;</div>
  <div class="slide-button next">&#10095;</div>

  <div class="carousel-dots-group">
    <span class="carousel-img-dots">
      <span class="left-arrow slide-button">
        <i class="ph ph-caret-left"></i>
      </span>
      <span class="dot active"></span>
      <span class="dot"></span>
      <span class="dot"></span>
      <span class="dot "></span>
      <span class="right-arrow slide-button">
        <i class="ph ph-caret-right"></i>
      </span>
    </span>
  </div>
</div>

Output Sample

❮

❯