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


Twitter Facebook Google LinkedIn Email Pinterest Reddit StumbleUpon Tumblr





Try these Fun Games by Bobbie:


Travel Blast Game New York


Play and Learn Russian


Battlestarship Game



Take a look at these Groovy Codes:


Fun IQ Test


Html Svg Starburst


Javascript Particles Fishes



Read the Latest Breaking Programming and Tech News, Great Articles and Tips:


Codenewz Programming and Tech News








Comments

Popular posts from this blog