How To Create Responsive Product Slider Using HTML And JavaScript
Learn How To Make a Responsive Product Slider Using HTML CSS And JavaScript. Create a Fully Responsive Product Slider Using HTML CSS JavaScript.
You'll Easy Create This Awesome Marvel Product Slider Using HTML, CSS, And JavaScript. This Marvel Slider Is Full Responsive For All Devices Tab, Mobile, Laptop, etc. You'll Create Like This Marvel Product Slider By Following These Steps Which I Given Below. You Also use This Slider As A E-Commerce Product Slider And Use This Slider In Your Shopping Website.
How To Create Responsive Product Slider Using HTML CSS And JavaScript.
- 0.0 - 1.00 min : Intro
- 1.30 - 12.0 min: Build A Responsive Product Slider Using HTML CSS and Javascript
Hello! In This Video Tutorial, I will show You How To Make a Marvel Product Slider Using HTML, CSS, And JavaScript. It Is Very Easy To Create This Product Slider. Beginners Easy Create This Product Slider By Watching My Tutorial. You Also Use This Product Slider As A ECommerce Product Slider And Use In Your Shopping Website For Represent The Shopping Product To Users. In This Video Video Tutorial First, I Show The Marvel Product Slider Design Which I Create In This Tutorial. Then I'll Make HTML, CSS, And JavaScript Files And Put This Files In Project Folder. Then I'll Link This JavaScript And CSS Files With HTML File Using "Link" And "Script" Tags. Then I Will Make The Structure Of The Product Slider Box Structure Using HTML And Design This Structure Using CSS StyleSheet. After Doing This, I Make Ten Boxes Like This And Convert This Boxes To Sliding Boxes Using LightSlider Plugin. Then I Will Make This Product Slider Responsive Using Media Query. After Doing This All Steps, Your Product Slider is Ready To Use. I Hope You Like This Article And Tutorial. Please Subscribe My Youtube Channel For More Amazing Video Tutorials.
1) You Open Your Code Editor Like Notepade++.
2) Create HTML, CSS, And JavaScript Files (index.html, style.css, Script.js), And Put This Files In Your Project Folder Which You Create (Product Slider). I Recommended You To Create Separate Folders For Js And CSS Files.
3) Link The CSS Style Sheet File (Style.css) With HTML File Using "Link" Tag.
4) Link The JavaScript File (Script.css) With HTML File Using "Script" Tag.
5) Copy The Product Slider HTML Code Which I Given Below And Past In Your HTML File.
Marvel Slider
MARVEL
Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.
MARVEL
Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.
MARVEL
Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.
MARVEL
Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.
MARVEL
Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.
MARVEL
Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.
6) Copy The Product Slider CSS Style Sheet Code Which I Given Below And Past In Your "CSS" File.
CSS@charset "utf-8"; /* CSS Document */ body{ margin:0px; padding:0px; } ul{ list-style:none; } a{ text-decoration:none; } .container{ width:100%; height: 100vh; background-color:#a4152c; display:flex; justify-content: center; align-items: center; } .box{ width:350px; height:610px; background-color:#1e1e26; border-radius: 10px; box-shadow: 2px 10px 12px rgba(0,0,0,0.5); display: flex; flex-direction: column; align-items: center; justify-content: space-between; box-sizing: border-box; margin: 20px 10px; } .model{ height: 350px; max-height: 100%; max-width: 100%; } .details{ display: flex; flex-direction: column; align-items: center; width: 300px; } .details p{ font-family: calibri; font-weight: bold; color:#6a6a74; text-align: center; margin-top: 20px; } .marvel{ color:#32323e; font-weight: bold; letter-spacing: 2px; font-family: bebas kai; font-size: 25px; } .logo{ height: 60px; } .box:hover{ background-color: #17171d; transform-style: preserve-3d; transform: scale(1.02); transition: all ease 0.3s; } .box:hover .marvel{ color:#c0292b; transition: all ease 0.5s; } /*--responsive for mobile phone--*/ @media(max-width:720px){ .box{ width: 94%; height: 500px; } .model{ height:250px; } .details p{ font-size: 16px; width: 250px; } }
7) Copy The Product Slider JavaScript Code Which I Given Below And Past In Your "Js" File.
Js// JavaScript Document $(document).ready(function() { $('#autoWidth').lightSlider({ autoWidth:true, loop:true, onSliderLoad: function() { $('#autoWidth').removeClass('cS-hidden'); } }); });
8) Download The Images And LightSlider Files Which I Given Below And Put In Your Project Folder. JavaScript Files Put In "Js" Folder And CSS Style Sheet Files Put In "CSS" Folder.
9) After Doing All Steps, Open HTML File(Index.html) And Enjoy This Awesome Personal Portfolio Website.
10) If You Any Issue, Please Check My Marvel Product Slider Tutorial, Which I Given Below.
hi,
ReplyDeleteso it's not a framework or template?
it's pure code ?
hi, yes, except easyslider plugin in js
Deletehe just made a styled box and used js thing
hello,i need a help..can i use it for blogger post.plz help me
ReplyDeletehey where is download option?
ReplyDeletehi... everything looks amazing but i have an issue.
ReplyDeleteThe arrows that move between the images dont appear. I did step by step the guide.
You find the control image (arrow image) in the light slider file. Copy this control image make New folder with name "img" name must be same. Past the control image here, after doing this all steps just refresh your browser window, arrow buttons Will be appear.
DeleteHello, i downloaded the files and when i tried to run, i see all the elements shown one under the other not next to each other, but every other thing is perfect, how to fix this ?
ReplyDeleteOh sorry it was my fault, i mistakenly deleted the jquery file which caused that. thanks alot :)
ReplyDeletelink of site please
ReplyDelete😍
ReplyDeletei run the code exactly but all the images disappeared
ReplyDeleteyes,because we dont have the image of him code
DeleteKann mir jemand sagen, warum die Bilder bei mir untereinander angezeigt werden und nicht nebeneinander? Ich finde meinen Fehler nicht.
ReplyDeletewhich lightslider js and css file to copy?......dist or root
ReplyDeletethere is one problem arrow is not coming in slider can you please help me.
ReplyDelete