How to Create NFT Product Slider Using HTML CSS & JS
How to Create Product Slider or owl carousel Using HTML, CSS, and JavaScript?
If you want to learn how to create a Product Slider or owl carousel using HTML, CSS, and JavaScript then you are in the right place.
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 Product Slider or owl carousel Using HTML, CSS, and JavaScript.
Start Creating Owl-Carousel/Product-Slider Using HTML 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====================================================--> <title>Slider</title> <!--==CSS======================================================--> <link rel="stylesheet" href="css/style.css"/> <!--==Using-Font-Awesome-for-Icons=============================--> <script src="https://kit.fontawesome.com/6bd6c771de.js" crossorigin="anonymous"></script> <!--==Import-Font-Family-From-Google-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=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"> <!--==Swiper-css===============================================--> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/> </head> <body> <!--==Slider============================--> <section id="slider-section"> <!--**Swiper******************************--> <div class="swiper mySwiper"> <div class="swiper-wrapper"> <div class="swiper-slide"> <!--**slider-box**********************--> <div class="slider-box"> <!--**img**--> <div class="slider-box-img"> <a href="#" class="owner-img"> <img src="images/owner.jpg" /> <i class="fa-solid fa-circle-check"></i> </a> <img src="images/anim-3.webp" /> <div class="slider-bidder"> <div class="slider-bidder-img"> <img src="images/client-1.png" /> <img src="images/client-2.png" /> <img src="images/client-3.png" /> </div> <span>9+ Place Bid</span> </div> </div> <!--**-text**--> <div class="slider-box-text"> <a href="#">Abstract Art</a> <span class="highest-bid">Highest Bid 1/10</span> <div class="price-like"> <span class="price">1.2345 Eth</span> <a href="#"><i class="fa-solid fa-heart"></i></a> </div> </div> </div> </div> <div class="swiper-slide"> <!--**slider-box**********************--> <div class="slider-box"> <!--**img**--> <div class="slider-box-img"> <a href="#" class="owner-img"> <img src="images/owner.jpg" /> <i class="fa-solid fa-circle-check"></i> </a> <img class="box-main-img" src="images/slider-1.jpg" /> <div class="slider-bidder"> <div class="slider-bidder-img"> <img src="images/client-1.png" /> <img src="images/client-2.png" /> <img src="images/client-3.png" /> </div> <span>9+ Place Bid</span> </div> </div> <!--**-text**--> <div class="slider-box-text"> <a href="#">Abstract Art</a> <span class="highest-bid">Highest Bid 1/10</span> <div class="price-like"> <span class="price">1.2345 Eth</span> <a href="#"><i class="fa-solid fa-heart"></i></a> </div> </div> </div> </div> <div class="swiper-slide"> <!--**slider-box**********************--> <div class="slider-box"> <!--**img**--> <div class="slider-box-img"> <a href="#" class="owner-img"> <img src="images/owner.jpg" /> <i class="fa-solid fa-circle-check"></i> </a> <img src="images/slide-3.jpg" /> <div class="slider-bidder"> <div class="slider-bidder-img"> <img src="images/client-1.png" /> <img src="images/client-2.png" /> <img src="images/client-3.png" /> </div> <span>9+ Place Bid</span> </div> </div> <!--**-text**--> <div class="slider-box-text"> <a href="#">Abstract Art</a> <span class="highest-bid">Highest Bid 1/10</span> <div class="price-like"> <span class="price">1.2345 Eth</span> <a href="#"><i class="fa-solid fa-heart"></i></a> </div> </div> </div> </div> <div class="swiper-slide"> <!--**slider-box**********************--> <div class="slider-box"> <!--**img**--> <div class="slider-box-img"> <a href="#" class="owner-img"> <img src="images/owner.jpg" /> <i class="fa-solid fa-circle-check"></i> </a> <img src="images/slide-4.jpg" /> <div class="slider-bidder"> <div class="slider-bidder-img"> <img src="images/client-1.png" /> <img src="images/client-2.png" /> <img src="images/client-3.png" /> </div> <span>9+ Place Bid</span> </div> </div> <!--**-text**--> <div class="slider-box-text"> <a href="#">Abstract Art</a> <span class="highest-bid">Highest Bid 1/10</span> <div class="price-like"> <span class="price">1.2345 Eth</span> <a href="#"><i class="fa-solid fa-heart"></i></a> </div> </div> </div> </div> <div class="swiper-slide"> <!--**slider-box**********************--> <div class="slider-box"> <!--**img**--> <div class="slider-box-img"> <a href="#" class="owner-img"> <img src="images/owner.jpg" /> <i class="fa-solid fa-circle-check"></i> </a> <img src="images/slide-5.jpg" /> <div class="slider-bidder"> <div class="slider-bidder-img"> <img src="images/client-1.png" /> <img src="images/client-2.png" /> <img src="images/client-3.png" /> </div> <span>9+ Place Bid</span> </div> </div> <!--**-text**--> <div class="slider-box-text"> <a href="#">Abstract Art</a> <span class="highest-bid">Highest Bid 1/10</span> <div class="price-like"> <span class="price">1.2345 Eth</span> <a href="#"><i class="fa-solid fa-heart"></i></a> </div> </div> </div> </div> <div class="swiper-slide"> <!--**slider-box**********************--> <div class="slider-box"> <!--**img**--> <div class="slider-box-img"> <a href="#" class="owner-img"> <img src="images/owner.jpg" /> <i class="fa-solid fa-circle-check"></i> </a> <img src="images/slide-6.jpg" /> <div class="slider-bidder"> <div class="slider-bidder-img"> <img src="images/client-1.png" /> <img src="images/client-2.png" /> <img src="images/client-3.png" /> </div> <span>9+ Place Bid</span> </div> </div> <!--**-text**--> <div class="slider-box-text"> <a href="#">Abstract Art</a> <span class="highest-bid">Highest Bid 1/10</span> <div class="price-like"> <span class="price">1.2345 Eth</span> <a href="#"><i class="fa-solid fa-heart"></i></a> </div> </div> </div> </div> </div> <div class="swiper-pagination"></div> </div> </section> <!-- Swiper JS --> <script src="https://unpkg.com/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: { 500: { slidesPerView: 2, spaceBetween: 10, }, 768: { slidesPerView: 3, spaceBetween: 20, }, 1024: { slidesPerView: 3, spaceBetween: 20, }, 1200: { slidesPerView: 4, spaceBetween: 20, }, }, }); </script> </body> </html>
*{
margin: 0px;
padding: 0px;
font-family: poppins;
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
body{
background-color: #181822;
}
/*===slider===============================*/
#slider-section{
max-width: 1200px;
width:90%;
margin: 50px auto;
}
#slider-section h3{
color: #ffffff;
font-weight: 700;
letter-spacing: 1px;
font-size: 1.4rem;
text-transform: uppercase;
}
.slider-box{
width: 100%;
background-color: #242435;
padding: 10px;
margin: 50px auto;
border-radius: 10px;
}
.slider-box-img{
width: 100%;
display: flex;
height: 320px;
border-radius: 10px;
overflow: hidden;
position: relative;
}
.slider-box-img::after{
content: '';
position: absolute;
left: 0px;
width: 100%;
height: 100%;
top: 0px;
background: rgb(23,23,23);
background: linear-gradient(0deg, rgba(7, 7, 7,0.4) 0%, rgba(33,33,33,0) 100%);
z-index: 1;
}
.slider-box-img img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: bottom;
}
.slider-bidder{
position: absolute;
left: 10px;
bottom:0px;
z-index: 2;
display: flex;
justify-content: flex-start;
align-items: center;
}
.slider-bidder-img img{
width: 27px;
height: 27px;
border-radius: 50%;
overflow: hidden;
margin-left: -15px;
}
.slider-bidder-img img:nth-child(1){
margin-left: 0px;
}
.slider-bidder span{
color: #ffffff;
margin-left: 10px;
font-size: 0.9rem;
}
.slider-box-img .owner-img{
position: absolute;
right: 10px;
top: 10px;
width: 40px;
height: 40px;
border-radius: 50%;
z-index: 2;
}
.slider-box-img .owner-img img{
border-radius: 50%;
}
.slider-box-img .owner-img i{
position: absolute;
right: -3px;
bottom: -5px;
color: #1fec8d;
z-index: 3;
background-color: #ffffff;
border-radius:55%;
}
.slider-box-text{
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
padding: 10px 15px;
padding-bottom: 5px;
}
.slider-box-text a{
color: #ffffff;
font-size: 1.2rem;
font-weight: 600;
letter-spacing: 0.3px;
}
.slider-box-text .highest-bid{
color: #5e5e5e;
font-weight: 500;
font-size: 0.9rem;
}
.slider-box-text .price{
color: #ff2289;
font-weight: 400;
margin-top: 5px;
font-size: 0.9rem;
letter-spacing: 1px;
}
.price-like{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.price-like a{
color: #5e5e5e;
}
Comments