css carousel slider| simple javascript carousel | HOW TO CREATE A SLIDER/CAROUSEL


css carousel slider| simple javascript carousel | How To Create A Slider/carousel

css carousel slider| simple javascript carousel | HOW TO CREATE A SLIDER/CAROUSEL

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

What is Carousel slider in css?

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

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


css carousel slider source Code:

Step 1:

First Lets Take a look at or 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 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 next and previous navigation of slide.

Step 2:

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:

Now lets bring life to our Carousel By 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.

 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.

Note: In Html Write the Script tag at the bottom in 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 carousel and how it works.
You can try this Carousel At this Link: Carousel-Slider .
And the Source Code is Available at 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


Post a Comment

Previous Post Next Post