How To Create Responsive Product Slider Using HTML And JavaScript

How To Create Responsive Product Slider Using HTML And JavaScript

Responsive Product Slider

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.

  1. 0.0 - 1.00 min : Intro
  2. 1.30 - 12.0 min: Build A Responsive Product Slider Using HTML CSS and Javascript

About This Tutorial

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.


Follow These Steps:-

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.

HTML

<!--doctype html-->
<html>
<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>Marvel Slider</title>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" type="text/css" href="css/lightslider.css"/>
<!--Jquery-->
<script type="text/javascript" src="js/JQuery3.3.1.js"></script>
<script type="text/javascript" src="js/lightslider.js"></script>
</head>

<body>
	<div class="container">
		<!--slider------------------->
		<ul id="autoWidth" class="cs-hidden">
		<!--1------------------------------>
  <li class="item-a">
	  <!--slider-box-->
		<div class="box">
		<p class="marvel">MARVEL</p>
		<!--model-->
		<img class="model" src="img/Ant-Man.png">
		<!--details-->
		<div class="details">
		<!--logo-character-->
		<img class="logo" src="img/AntMan-logo.png" style="height: auto;" width="100px">
		<!--character-details-->
		<p>Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.</p>
		</div>
		
		</div>
		</li>
		<!--2------------------------------>
  <li class="item-a">
	  <!--slider-box-->
		<div class="box">
		<p class="marvel">MARVEL</p>
		<!--model-->
		<img class="model" src="img/DeadPool.png">
		<!--details-->
		<div class="details">
		<!--logo-character-->
		<img class="logo" src="img/Deadpool-logo.png">
		<!--character-details-->
		<p>Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.</p>
		</div>
		
		</div>
		</li>
		<!--3------------------------------>
  <li class="item-a">
	  <!--slider-box-->
		<div class="box">
		<p class="marvel">MARVEL</p>
		<!--model-->
		<img class="model" src="img/SpiderMan.png">
		<!--details-->
		<div class="details">
		<!--logo-character-->
		<img class="logo" src="img/SpiderMan-logo.png">
		<!--character-details-->
		<p>Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.</p>
		</div>
		
		</div>
		</li>
		<!--4------------------------------>
  <li class="item-a">
	  <!--slider-box-->
		<div class="box">
		<p class="marvel">MARVEL</p>
		<!--model-->
		<img class="model" src="img/Venom.png">
		<!--details-->
		<div class="details">
		<!--logo-character-->
		<img class="logo" src="img/Venom-logo.png">
		<!--character-details-->
		<p>Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.</p>
		</div>
		
		</div>
		</li>
		<!--5------------------------------>
  <li class="item-a">
	  <!--slider-box-->
		<div class="box">
		<p class="marvel">MARVEL</p>
		<!--model-->
		<img class="model" src="img/Thor.png">
		<!--details-->
		<div class="details">
		<!--logo-character-->
		<img class="logo" src="img/Thor-logo.png">
		<!--character-details-->
		<p>Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.</p>
		</div>
		
		</div>
		</li>
		<!--6------------------------------>
  <li class="item-a">
	  <!--slider-box-->
		<div class="box">
		<p class="marvel">MARVEL</p>
		<!--model-->
		<img class="model" src="img/IronMan.png">
		<!--details-->
		<div class="details">
		<!--logo-character-->
		<img class="logo" src="img/IronMan-logo.png">
		<!--character-details-->
		<p>Bruce Bayne invite deadpool to kill the enemy how make distrub bat To the Kill The Anymens How MaKE him will be ie.</p>
		</div>
		
		</div>
		</li>
		</ul>
			
			
	
	
	</div>
	
	
<script src="js/script.js" type="text/javascript"></script>
</body>
</html>

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.


Comments

  1. hi,
    so it's not a framework or template?

    it's pure code ?

    ReplyDelete
    Replies
    1. hi, yes, except easyslider plugin in js

      he just made a styled box and used js thing

      Delete
  2. hello,i need a help..can i use it for blogger post.plz help me

    ReplyDelete
  3. hi... everything looks amazing but i have an issue.
    The arrows that move between the images dont appear. I did step by step the guide.

    ReplyDelete
    Replies
    1. 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.

      Delete
  4. Hello, 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 ?

    ReplyDelete
  5. Oh sorry it was my fault, i mistakenly deleted the jquery file which caused that. thanks alot :)

    ReplyDelete
  6. link of site please

    ReplyDelete
  7. i run the code exactly but all the images disappeared

    ReplyDelete
    Replies
    1. yes,because we dont have the image of him code

      Delete
  8. Kann mir jemand sagen, warum die Bilder bei mir untereinander angezeigt werden und nicht nebeneinander? Ich finde meinen Fehler nicht.

    ReplyDelete
  9. which lightslider js and css file to copy?......dist or root

    ReplyDelete
  10. there is one problem arrow is not coming in slider can you please help me.

    ReplyDelete

Archive

Contact Form

Send