EZ Image Slider
HTML with Javascript EZ Image Slider
Create your own customizable Image Slider using this EZ Code
HTML with Javascript
<!DOCTYPE html>
<html>
<head>
<title>EZ Image Slider</title>
</head>
<body>
<table>
<caption>Image Slider</caption>
<tr>
<td width="100%">
<!--add-replace 1st image below-->
<img src="https://images.pexels.com/photos/88212/pexels-photo-88212.jpeg?cs=srgb&dl=beach-blue-sky-boat-88212.jpg&fm=jpg" width="330" height="300" name="slider"></td>
</tr>
<tr>
<td width="100%">
<form method="POST" name="rotate">
<div align="center">
<center>
<input type="button" value="Back"
onClick="backward()">
<input type="button" value="Next"
onClick="forward()"><br>
</center></div>
</form>
</td>
</tr>
</table>
</body>
<script>
var pics=new Array()
var pic=0
//add-replace images below
pics[0]="https://images.pexels.com/photos/88212/pexels-photo-88212.jpeg?cs=srgb&dl=beach-blue-sky-boat-88212.jpg&fm=jpg"
pics[1]="https://www.publicdomainpictures.net/pictures/150000/nahled/tropical-beach-1454007190ZAK.jpg"
pics[2]="https://www.publicdomainpictures.net/pictures/250000/nahled/yoga-silhouette-sunset-meditation.jpg"
pics[3]="https://c1.staticflickr.com/5/4125/5136942634_4f55b72ef9_b.jpg"
pics[4]="https://cdn.pixabay.com/photo/2017/10/05/10/23/sunset-2818943_960_720.jpg"
function backward(){
if (pic>0){
window.status=''
pic--
document.images.slider.src=pics[pic]}}
function forward(){
if (pic<pics.length-1){
pic++
document.images.slider.src=pics[pic]}
else window.status='End'}
</script>
</html>
Click here to run this code
Share with Friends
Comments
Post a Comment