How To Create Product Slider Using HTML And JavaScript
Learn How To Make Product Slider Using HTML, CSS, And JavaScript. Easy Way To Create an eCommerce Product Slider Using HTML, CSS, And Javascript.
In This Tutorial, I will Create an E-Commerce Product Slider Using HTML And JavaScript. This Is a Very Beatifull Product Slider Which You Use in The Shopping Website For Represent The Products. You Will Create This Awesome Product Slider By Following These Steps Which I Given Below.
How To Create E-Commerce Product Slider Using HTML CSS And JavaScript
- 0.0 - 0.45 min : Intro
- 0.45 - 18.0 min: Responsive E-Commerce Product Slider Using HTML CSS And JavaScript
Hey! In This Tutorial I Will Teach You How To Make an E-commerce Product Slider Using HTML CSS And JavaScript.This Is Very Easy. In This Tutorial Videl First 60s, I Will Show You the Product Slider Design Which I Create In This Tutorial. Then I Will Create HTML, CSS, And Javascript Files And Put In The Project Folder. After Creating I Linked The CSS And Js File With HTML. First I Create a Sigle Box Of The Sider Using HTML And Design USing CSS. After Making This Box, I used Light Slider For Making Slider. I Use Some External File Which Links Given In This Page. If You Face Any Problem, Check My Youtube Tutorial Which I Given Ablow.
1) Open Your Text Editor Like Notepad++, Sublime, etc.
2) Create HTML, CSS, And Javascript Files And Put In Your Project Folder. I Recommended You To Create Separate Folders For CSS And JS Files.
3) Link The CSS File With HTML File Using "Link" Tag.
4) Link The Js File With HTML Using "Script src="Location" " Tag.
5) Copy Product Slider HTML Code And Past In Your HTML File.
Ecommerce Slider
6) Copy Product Slider CSS Code And Past In Your CSS File.
CSS@charset "utf-8"; /* CSS Document */ body{ margin:0px; padding: 0px; background-color:#eef8ff; } a{ text-decoration:none; } .box{ width:300px; box-shadow: 2px 2px 30px rgba(0,0,0,0.2); border-radius: 10px; overflow: hidden; margin: 25px; } .slide-img{ height: 450px; position:relative; } .slide-img img{ width:100%; height: 100%; object-fit: cover; box-sizing: border-box; } .detail-box{ width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; box-sizing: border-box; font-family: calibri; } .type{ display: flex; flex-direction: column; } .type a{ color:#222222; margin: 5px 0px; font-weight: 700; letter-spacing: 0.5px; padding-right: 8px; } .type span{ color:rgba(26,26,26,0.5); } .price{ color: #333333; font-weight: 600; font-size: 1.1rem; font-family: poppins; letter-spacing: 0.5px; } .overlay{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width:100%; height: 100%; background-color: rgba(92,95,236,0.6); display: flex; justify-content: center; align-items: center; } .buy-btn{ width:160px; height: 40px; display: flex; justify-content: center; align-items: center; background-color: #FFFFFF; color:#252525; font-weight: 700; letter-spacing: 1px; font-family: calibri; border-radius: 20px; box-shadow: 2px 2px 30px rgba(0,0,0,0.2); } .buy-btn:hover{ color:#FFFFFF; background-color: #f15fa3; transition: all ease 0.3s; } .overlay{ visibility: hidden; } .slide-img:hover .overlay{ visibility: visible; animation:fade 0.5s; } @keyframes fade{ 0%{ opacity: 0; } 100%{ opacity: 1; } } .slider{ width:100%; height: 100vh; display: flex; justify-content: center; align-items: center; }
7) Copy Product Slider Js Code And Past In Your JS File
Javascript// JavaScript Document $(document).ready(function() { $('#autoWidth').lightSlider({ autoWidth:true, loop:true, onSliderLoad: function() { $('#autoWidth').removeClass('cS-hidden'); } }); });
8) Download Lightslider.css File And Put In The CSS Folder, Download Lightslider.js And Jquery.js And Put In The Js Folder, Download Control Image And Put In The "Img" Folder. Folder Name "Img" Must Me Same. All Files Links Is Given Below.
minta file keseluruhannya
ReplyDeletebujet dag bang tinggal salin doang juga
Deleteeso es javascript o es Jqery ?
ReplyDeleteYeah Yeah
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeletehow can i implement 2 row slider ?
ReplyDeleteThis comment has been removed by the author.
ReplyDeleteHello, Pls can't I use this rows in the same page?
ReplyDeletewhy my image not show?
ReplyDeleteThe last link doesen't run
ReplyDeletepls my images are not displaying
ReplyDeletehey dude i have some problem
Deleteu should go to lightslider.css and find class cS-hidden
now only change opacity to 1
Thank you so much!! The images are showing correctly!!
Deletethankyou so much for sharing this, really helpfull<3
ReplyDeleteGreat
ReplyDeletehow to make it autoplay?
ReplyDeletethe buttons are not showing
ReplyDeleteI'm having issues with the images displaying vertically rather than horizontally. Anyone else experience this? Know of a fix?
ReplyDelete