Awesome Car Slider Using HTML CSS And JavaScript
How To Make An Awesome Car Slider Using HTML CSS And JavaScript
If you want to learn how to create an Awesome Car Carousel Slider Using HTML CSS And JavaScript, then you are in the right place.
I will teach about how to make an Car Carousel Slider Using HTML CSS And JavaScript. This Carousel is fully Responsive and has all browser compatibility.
I used HTML, CSS, and JavaScript to create this Car Carousel. If you follow this tutorial step by step, you will be able to make this Awesome Car Carousel Slider using HTML, CSS, and JavaScript.
I have more than Four years experience in Frontend(HTML, CSS, and JS). I promise you, I will try to provide you best way to create Carousel Slider using HTML, CSS, and JavaScript.
Create A Car Carousel Slider Using HTM, CSS, and JavaScript
<!--DOCTYPE html--> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Car Slider's</title> <!--==CSS=================================--> <link rel="stylesheet" href="css/style.css"/> <!--==Poppins-font=====================--> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <!--==Using-Font-Awesome-for-Icons=====--> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css"> <!-- Link Swiper's CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css" /> </head> <body> <div class="swiper mySwiper"> <div class="swiper-wrapper"> <!--1--> <div class="swiper-slide s-1"> <!--**box**************************--> <a href="#" class="slider-box"> <!--img--> <div class="slider-img"> <img src="images/1.webp" /> </div> <!--text--> <div class="slider-text"> <strong>BWM X5</strong> </div> </a> </div> <!--2--> <div class="swiper-slide s-2"> <!--**box**************************--> <a href="#" class="slider-box"> <!--img--> <div class="slider-img"> <img src="images/2.jpg" /> </div> <!--text--> <div class="slider-text"> <strong>Ferrari F40</strong> </div> </a> </div> <!--3--> <div class="swiper-slide s-3"> <!--**box**************************--> <a href="#" class="slider-box"> <!--img--> <div class="slider-img"> <img src="images/3.jpg" /> </div> <!--text--> <div class="slider-text"> <strong>Racing Car</strong> </div> </a> </div> <!--4--> <div class="swiper-slide s-4"> <!--**box**************************--> <a href="#" class="slider-box"> <!--img--> <div class="slider-img"> <img src="images/4.jpg" /> </div> <!--text--> <div class="slider-text"> <strong>Audi G8</strong> </div> </a> </div> <!--5--> <div class="swiper-slide s-5"> <!--**box**************************--> <a href="#" class="slider-box"> <!--img--> <div class="slider-img"> <img src="images/5.jpg" /> </div> <!--text--> <div class="slider-text"> <strong>BMW Car</strong> </div> </a> </div> <!--6--> <div class="swiper-slide s-6"> <!--**box**************************--> <a href="#" class="slider-box"> <!--img--> <div class="slider-img"> <img src="images/6.jpg" /> </div> <!--text--> <div class="slider-text"> <strong>Racing Car</strong> </div> </a> </div> </div> <div class="swiper-pagination"></div> </div> <!-- Swiper JS --> <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper(".mySwiper", { slidesPerView: 1, spaceBetween: 10, pagination: { el: ".swiper-pagination", clickable: true, }, breakpoints: { 560: { slidesPerView: 2, spaceBetween: 10, }, 900: { slidesPerView: 3, spaceBetween: 10, }, 1300: { slidesPerView: 4, spaceBetween: 10, }, }, }); </script> </body> </html>
*{
margin: 0px;
padding: 0px;
font-family: poppins;
box-sizing: border-box;
}
a{
text-decoration: none;
}
body{
background-color: #1e1e20;
}
/*======================================*/
.mySwiper{
width: 90%;
margin: 10px auto;
}
.slider-box{
width: 100%;
padding: 20px;
border: 1px solid #3f3f3f;
display: flex;
grid-gap: 10px;
user-select: none;
flex-direction: column;
}
.slider-text{
margin-bottom: 30px;
}
.swiper-slide:nth-of-type(odd) .slider-box{
flex-direction: column-reverse;
}
.swiper-slide:nth-of-type(odd) .slider-box .slider-text{
margin-top: 30px;
margin-bottom: 0px;
}
.slider-img{
width: 100%;
height: 600px;
filter: grayscale(0.8);
opacity: 0.8;
transition: all ease 0.3s;
}
.slider-img img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.slider-text strong{
color: #ffffff;
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 4px;
}
.slider-box:hover .slider-img{
opacity: 1;
filter: grayscale(0);
}
.swiper-pagination{
position: static !important;
margin-top: 10px;
}
.swiper-pagination-bullet-active{
background-color: #ffffff !important;
}
@media(max-width:600px){
.slider-img{
height: 500px;
}
}
Comments