How To Create A Simple Javascript Carousel (Source Code)

How To Create A Simple Javascript Carousel (Source Code)

In this article, we create a super simple carousel using html, css, and javascript code. You can see the output of our javascript carousel here.

Before we start with today’s topic let us see what exactly is Carousel.

What is the Carousel slider in CSS?

A carousel is an effective way where we display or showcase different images or products in a single section.

100+ Front-end Projects for Web developers (Source Code)

Advantages of Carousel:
Carousel is quite helpful when someone wants to highlight a new product or an offer, that too by occupying lesser space and without making the page look jammed.

Simple JS carousel Source Code:

Step 1: Simple carousel HTML part

First, let’s Take a look at HTML Code.

 <!DOCTYPE html>  
 <html>  
   <head>  
     <title>  
       Carousel-Slider  
     </title>  
     <link href="/styles.css" type="text/css" rel="stylesheet">   
   </head>  
   <body>  
     <h1>Gear 4th Luffy</h1>  
     <div class="carousel">  
       <div class="carouselContainer">  
         <img class="slides" id="lastslide" src="/assets/3.jpg" alt="">  
         <img class="slides" src="/assets/1.jpg" alt="">  
         <img class="slides" src="/assets/2.jpg" alt="">  
         <img class="slides" src="/assets/3.jpg" alt="">  
         <img class="slides" id="firstslide" src="/assets/1.jpg" alt="">          
       </div>  
     </div>  
     <button class="button" id="prev">PREV</button>  
     <button class="button" id="next">NEXT</button>  
     <script src="/app.js"></script>  
   </body>  
 </html> 

In the above HTML code we have made 2 div tags;
The first div tag with class ” carousel ” will hold all the elements of the Carousel.
The second tag with class ” carouselContainer ” will hold the Images for our slides.
Below the second div tag, there are two buttons declared for the next and previous navigation of the slide.

Step 2: Simple Carousel CSS part

Now let’s take a look at CSS for our HTML Code
We will be going over only the essential and basic CSS today for the Carousel.

 *{  
   margin: 0px;  
   padding: 0px;  
   box-sizing: border-box;  
   background-color: indigo;  
 }  
 h1{  
   text-align: center;  
   color: white;  
 }  
 .carousel{  
   width:50%;  
   margin: auto;  
   overflow: hidden;  
 }  
 .carouselContainer{  
   display: flex;  
 }  
 .slides{  
   width: 100%;  
   height:390px;  
 }  
 .button{  
   position: relative;  
   transition: 0.1s ease-in;  
 }  
 #next{  
   position: absolute;  
   background-color: white;  
   opacity: 0.5;  
   top: 25%;  
   right: 25%;  
   width: 5%;  
   height: 20%;  
   z-index: 5;  
 }  
 #next:hover{  
   opacity: 0.2;  
 }  
 #prev{position: absolute;  
   background-color: white;  
   opacity: 0.5;  
   top: 25%;  
   left: 25%;  
   width: 5%;  
   height: 20%;  
   z-index: 5;  
 }  
 #prev:hover{  
   opacity: 0.2;  
 }  

Step 3: Simple Carousel JS code

Now lets bring life to our Carousel With some JavaScript, It is the most crucial part of the code as this is exactly where we will bring all the pieces together and make them work.

Create Simple Portfolio Website Using Html Css (Portfolio Source Code)

 const carouselContainer = document.querySelector(".carouselContainer");  
 const slides = document.querySelectorAll('.slides');  
 const next = document.querySelector('#next');  
 const prev = document.querySelector('#prev');  
 let counter = 1 ;  
 const size = slides[0].clientWidth;  
 carouselContainer.style.transform = 'translateX(' + (-size * counter ) + 'px';  
 next.addEventListener('click',()=>{  
   if (counter>=slides.length)return;  
   carouselContainer.style.transition = 'transform 0.4s ease-in-out';  
   counter++;  
   carouselContainer.style.transform = 'translateX(' + (-size * counter ) + 'px';  
 });  
 prev.addEventListener('click',()=>{  
   if (counter<=0)return;  
   carouselContainer.style.transition = 'transform 0.4s ease-in-out';  
   counter--;  
   carouselContainer.style.transform = 'translateX(' + (-size * counter ) + 'px';  
 });  
 carouselContainer.addEventListener('transitionend',()=>{  
   console.log(slides[counter]);  
   if(slides[counter].id ==='lastslide'){  
   carouselContainer.style.transition = 'none';  
   counter = slides.length - 2;      
   carouselContainer.style.transform = 'translateX(' + (-size * counter ) + 'px';  
   }  
 });  
 carouselContainer.addEventListener('transitionend',()=>{  
   console.log(slides[counter]);  
   if(slides[counter].id ==='firstslide'){  
   carouselContainer.style.transition = 'none';  
   counter = slides.length - counter;      
   carouselContainer.style.transform = 'translateX(' + (-size * counter ) + 'px';  
   }  
 });  

After properly applying all the code you’ll Successfully create your very own Carousel.

Conclusion — Simple Javascript Carousel

5+ HTML CSS project With Source Code

Note: In Html Write the Script tag at the bottom of the Body tag.
This Carousel Example is not Responsive to diff. screen sizes it is an example just to make you understand the concept of a carousel and how it works.
You can try this Carousel At this Link: Carousel-Slider.
And the Source Code is available on my Github with all the assets: Carousel-Slider-Repo.

Leave a comment below and let us know if you have any queries.

Thank you for visiting our blog today. Please do Check out our other posts.

Written by: @OmBandiwan

Check out more…..

Share on:

Leave a Comment