Creating a Slider / Carousel with CSS Flexbox (with infinite repeating items in loop)

CSSWeb DevelopmentFront End Technology

We can create an infinitely scrolling slider using CSS Flexbox with the help of JavaScript.

Example

The following examples illustrate carousel using CSS.

 Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         img {
            width: 100%;
         }
         .container {
            max-width: 600px;
            position: relative;
            margin: 6% auto;
         }
         .prevbtn, .nextbtn {
            position: absolute;
            top: 50%;
            padding: 12px;
            margin-top: -20px;
            color: white;
            font-weight: bold;
            cursor: pointer;
            transition: 0.2s ease-in;
            border-radius: 50%;
         }
         .prevbtn:hover, .nextbtn:hover {
            background-color: darkgrey;
            color: rgb(0,0,0);
         }
         .nextbtn {
            right: 0;
         }
      </style>
   </head>
   <body>
      <div class="container">
         <div class="slide">
            <img src="https://images.unsplash.com/photo-1609517904792-bac493d55556?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
         </div>
         <div class="slide">
            <img src="https://images.unsplash.com/photo-1609883475382-c4c9378569e5?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
         </div>
         <div class="slide">
            <img src="https://images.unsplash.com/photo-1610258648552-fe6407d664a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
         </div>
         <div class="slide">
            <img src="https://images.unsplash.com/photo-1610258648552-fe6407d664a1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
         </div>
         <div class="slide">
            <img src="https://images.unsplash.com/photo-1611094607507-8c8173e5cf33?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=200&ixlib=rb-1.2.1&q=80&w=700" />
         </div>
         <a class="prevbtn" onclick="changeSlide(-1)">❮</a>
         <a class="nextbtn" onclick="changeSlide(1)">❯</a>
      </div>
      <script>
         let slideIndex = [1,1];
         viewSlides(1);
         function changeSlide(n) {
            viewSlides(slideIndex[0] += n);
         }
         function viewSlides(n) {
            let ele = document.getElementsByClassName("slide");
            if (n > ele.length) {
               slideIndex[0] = 1
            }
            if (n < 1) {
               slideIndex[0] = ele.length
            }
            for (i = 0; i < ele.length; i++) {
               ele[i].style.display = "none";
            }
            ele[slideIndex[0]-1].style.display = "block";
         }
      </script>
   </body>
</html>

This gives the following output

Example

 Live Demo

<!DOCTYPE html>
<html>
   <head>
      <style>
         .container {
            height: 120px;
            max-width: 600px;
            margin: 12px auto;
            position: relative;
            overflow: hidden;
            transform: translate3d(0, 0, 0);
            border: 4px ridge rgba(20,30,240,0.6);
         }
         .container > div {
            height: 120px;
            width: 2400px;
            background: url(https://images.unsplash.com/photo-1611485916153-fce531587fe0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=120&ixlib=rb-1.2.1&q=80&w=120);
            position: absolute;
            height: 100%;
            transform: translate3d(0, 0, 0);
         }
         .container .slider {
            animation: slideshow 20s linear infinite;
         }
         @keyframes slideshow {
            100% {
               transform: translateX(-33.33%);
            }
         }
      </style>
   </head>
   <body>
      <div class="container">
         <div class="slider"></div>
      </div>
   </body>
</html>

This gives the following output

raja
Published on 10-Feb-2021 13:21:35
Advertisements