<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
var products = ["../Images/TV.jpg", "../Images/Lee.jpg","../Images/Ball.jpg","../Images/Tshirt.jpg","../Images/Reebok.jpg"];
function changeImage(){
var slidervalue = document.getElementById("slider").value;
document.getElementById("pic").src=products[slidervalue];
}
function bodyLoad(){
document.getElementById("pic").src= products[0];
}
var count = 0;
function Prev(){
count--;
document.getElementById("pic").src= products[count];
}
function Next(){
count++;
document.getElementById("pic").src= products[count];
}
</script>
</head>
<body onload="bodyLoad()">
<div class="container-fluid" >
<div class="card">
<div class="card-header text-center">
<h2 style="color: blueviolet;">Products Slider</h2>
</div>
<div style="text-align: center;" class="card-body">
<button onclick="Prev()" class="btn btn-outline-primary">
<span class="fa fa-chevron-circle-left"></span>
</button>
<img id="pic" width="300" height="200">
<button onclick="Next()" class="btn btn-outline-primary">
<span class="fa fa-chevron-circle-right"></span>
</button>
</div>
<br>
<div style="text-align: center;" class="card-footer">
<input type="range" min="0" max="4" value="0" onchange="changeImage()" id="slider">
</div>
</div>
</div>
</body>
</html>
Output:
Posted By: pankaj_bhakre
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
var products = ["../Images/TV.jpg", "../Images/Lee.jpg","../Images/Ball.jpg","../Images/Tshirt.jpg","../Images/Reebok.jpg"];
function changeImage(){
var slidervalue = document.getElementById("slider").value;
document.getElementById("pic").src=products[slidervalue];
}
function bodyLoad(){
document.getElementById("pic").src= products[0];
}
var count = 0;
function Prev(){
count--;
document.getElementById("pic").src= products[count];
}
function Next(){
count++;
document.getElementById("pic").src= products[count];
}
</script>
</head>
<body onload="bodyLoad()">
<div class="container-fluid" >
<div class="card">
<div class="card-header text-center">
<h2 style="color: blueviolet;">Products Slider</h2>
</div>
<div style="text-align: center;" class="card-body">
<button onclick="Prev()" class="btn btn-outline-primary">
<span class="fa fa-chevron-circle-left"></span>
</button>
<img id="pic" width="300" height="200">
<button onclick="Next()" class="btn btn-outline-primary">
<span class="fa fa-chevron-circle-right"></span>
</button>
</div>
<br>
<div style="text-align: center;" class="card-footer">
<input type="range" min="0" max="4" value="0" onchange="changeImage()" id="slider">
</div>
</div>
</div>
</body>
</html>
Output:
Posted By: pankaj_bhakre
No comments:
Post a Comment