How To Create E-Commerce Product Slider Using JavaScript
E-Commerce Product Slider
Learn How to make an eCommerce Product slider using HTML, CSS, and JavaScript. Easy way to create Product Slider for your upcoming websites. You will easily make this product slider by watching my video tutorial or by following these steps, which I have given below.
How To Create E-Commerce Product Slider Using HTML, CSS, and JavaScript
- 0.0 - 1.00 min : Intro
- 1.00 - 24.0 min: E-Commerce Product Slider Using HTML
About This Tutorial
In this tutorial, I will teach you how to make an eCommerce Product Slider Using JavaScript, HTML, and CSS. In the Video Tutorial, First, I show you the Product slider design, which I will create in this tutorial and then start making Product slider. First, I design the slider boxes using HTML and CSS. After, I use The Swiper Demo Plugin to convert into the slider. The source code link is given above in the post. I hope you like my tutorial. If you have any questions or problems, contact me.
1) First You Create A Folder, Where You Put The Website Files.
2) Create HTML, CSS, And Js File, And Put This File In The Website Folder.
3) Link CSS File With HTML
4) Link JS File With HTML
5) Copy HTML Code Which I Given Below And Past In Your HTML File.
<!--doctype html--> <html> <head> <meta charset="utf-8"> <title>Product-slider</title> <!--Adding Links --> <link rel="stylesheet" href="css/swiper.min.css"/> <link rel="stylesheet" href="css/style.css"/> </head> <body> <!--slider 1 bags------------------------------------------> <div class="heading"> <h1>P R O D U C T   S L I D E R   1 </h1> </div> <!--swiper slider--> <div class="swiper-container"> <div class="swiper-wrapper"> <!--slide 1--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/bag1.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> <!--slide 2--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/bag2.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> <!--slide 3--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/bag3.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> <!--slide 4--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/bag4.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> <!--slide 5--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/bag5.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> <!--slide 6--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/bag6.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> <!--slide 7--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/bag7.jpg"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> <!--slide 8--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/bag8.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> <!--slide 9--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/bag9.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> <!--slide 10--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/bag10.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> </div> </div> <!--swiper slider end--> <!--slider 2 clothes------------------------------------------> <div class="heading"> <h1>P R O D U C T   S L I D E R   2 </h1></div> <!--swiper slider--> <div class="swiper-container"> <div class="swiper-wrapper"> <!--slide 1--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/c1.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> <!--slide 2--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/c2.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> <!--slide 3--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/c3.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> <!--slide 4--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/c4.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> <!--slide 5--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/c5.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> <!--slide 6--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/c6.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> <!--slide 7--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/c7.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> <!--slide 8--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/c8.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> <!--slide 9--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/c9.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> <!--slide 10--------------------------------------> <div class="swiper-slide"> <div class="slider-box"> <p class="time">New</p> <div class="img-box"> <img src="images/c1.png"> </div> <p class="detail">Black ladies bags collections <a href="#" class="price">Price-40$</a> </p> <div class="cart"> <a href="#">Add To Cart</a> </div> </div> </div> </div> </div> <!--swiper slider end--> <script type="text/javascript" src="js/swiper.min.js"></script> <script src="js/script.js"></script> </body> </html>
6) Copy CSS Code Which I Given Below And Past In Your CSS File.
@charset "utf-8";
/* CSS Document */
html,body{
position:relative;
height:100%;}
body{
margin:0px;
padding:0px;
font-family:montserrat,sans-serif;
background-color:rgba(241,241,241,1.00);}
.swiper-slide{
width:250px !important;
}
.slider-box{
margin:20px;
height:350px;
width:250px;
position:relative;
background-color:#FFFFFF;
border-radius:5px;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
border:1px solid rgba(187,187,187,0.40);
}
.slider-box a{
text-decoration:none;
text-align:center;}
.img-box{
height:170px;
}
.img-box img{
height:auto;
max-width:100%;
max-height:100%;}
.time{
position:absolute;
top:0px;
right:20px;
color:#f16007;}
.detail{
display:flex;
flex-direction:column;
align-items:center;
box-sizing:border-box;
font-size:13px;
line-height:35px;}
.price{
color:#FFFFFF;
background-color:#ff555b;
line-height:20px;}
.cart{
position:absolute;
bottom:0px;
height:45px;
background-color:#ff696e;
width:100%;
display:flex;
justify-content:center;
align-items:center;}
.cart a{
color:#FFFFFF;}
.slider-box:hover{
box-shadow:2px 2px 12px rgba(47,47,47,0.40);
}
.slider-box:hover .img-box img{
transform:scale(1.07);
transition:all ease 0.3s;}
.cart:hover{
transform:scale(1.1);
background-color:#fe9048;
box-shadow:2px 2px 12px rgba(47,47,47,0.40);
transition:all ease 0.1s;}
.heading{
display:flex;
justify-content:center;
}
.heading h1{
border-left:2px solid #000000;
Border-right:2px solid #000000;
background-color:#f05656;
text-shadow:2px 2px 12px rgba(69,66,66,0.3);
padding:0px 10px;
color:#FFFFFF;
margin:20px;
font-size:30px;
font-family:calibri;}
7) Copy Javascript Code Which I Given Below And Past In Your JavaScript File.
// JavaScript Document
//swiper script
var swiper = new Swiper('.swiper-container', {
slidesPerView: 5.2,
spaceBetween: 30,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
});
8) All Files link, Which I use in the project given below.
The Download Links Will Be Shown in 30 Seconds
About This Tutorial
In this tutorial, I will teach you how to make an eCommerce Product Slider Using JavaScript, HTML, and CSS. In the Video Tutorial, First, I show you the Product slider design, which I will create in this tutorial and then start making Product slider. First, I design the slider boxes using HTML and CSS. After, I use The Swiper Demo Plugin to convert into the slider. The source code link is given above in the post. I hope you like my tutorial. If you have any questions or problems, contact me.
Comments