December 8, 2015

Simple slider without any framework

Simple slider without any framework

A simple slider without using any framework. It is done using pure javascript. Easy to create when you learn it, later you will not search for any sliders. You will love to write your own slider.

First we will setup a default image which will load on page load.

<img src="image url here" name="slideshow" />

Now lets give two links for previous and next image change. This can be done by couple of different ways.

One way is to add the function to onclick. Here's how it is done.

 <a href="" onclick="return functionName()"></a>

Another way to do is by adding the function to href like this.

 <a href="javascript:functionName()"></a>

I have taken up one way and written for previous and next links.

The function i am going to call is changeImage with -1 as the parameter. The user will click on the link, it will run the function changeImage. The -1 is going to change the image to previous image as all the images are stored in an array.

<a href="javascript:changeImage(-1)">Prev</a>

Here i set the parameter as 1, so that the image moves forward on click of next link.

<a href="javascript:changeImage(1)">Next</a>

Now lets see the javascript part.

The first thing i will do is declare a variable Image which is going to be in an Array.

var Image = new Array("link to image 1","link to image 2","link to image 3");

Lets initialize a variable ImageNumber, so it's going to start with 0.

var ImageNumber = 0;

Then variable ImageLength which denotes the length of the array. The reason we have -1, say we have 3 array. The array always starts at 0. So we subtract the one.

var ImageLength = Image.length - 1;

Let's create the function changeImage with parameter as num. We will be sending parameters -1 or 1 to num.

function changeImage(num) {
  ...
}

If you press next first it will take the location of the current image you are at and add 1 to it.

ImageNumber = ImageNumber + num;

Now the problem is if you are at the last image in an array and you click on next link it have to loop to the first image so there will be a connectivity. To do that,

if(ImageNumber > ImageLength) {
   ImageNumber = 0;
}

Same way if you are at the first image and you click on prev link, then there should be a loop connecting to the last image in an array. To obtain that,

if(ImageNumber < 0) {
   ImageNumber = ImageLength;
}

Now what we are going to do is access the image. The slideshow is the name of the image attribute and src is the source of the image which we are going to access now.

document.slideshow.src = Image[ImageNumber];

Let's add another link called Auto. On click of this the slideshow works automatically.

<a href="javascript:auto()">Auto</a>

Let's add a function auto to javascript. Set an interval and add the function changeImage inside the setInterval with positive parameter so that the image moves forward.

function auto() {
  setInterval("changeImage(1)", 1000);
}

Now i am going to add caption to each of the image. I am going to add a div tag with id and set that id in javascript. Whenever an image slides the caption is showed for that respective image.

<div id="caption"></div>

Declare another variable Caption and the captions for respective images are going to be in an array> This is the same way we have done to declare the images.

var Caption = new Array("Caption 1","Caption 2","Caption 3");

Write this within the function changeImage.

document.getElementById("caption").innerHTML = Caption[ImageNumber];

That's it your done.

Let's combine all the code together now,

HTML

<img src="image url here" name="slideshow" />

<div id="caption">Caption 1</div>

<div>
  <a href="javascript:changeImage(-1)">Prev</a> | <a href="javascript:changeImage(1)">Next</a> | <a href="javascript:auto()">Auto</a>
</div>

JavaScript

var Image = new Array("link to image 1","link to image 2","link to image 3");

var Caption = new Array("Caption 1","Caption 2","Caption 3");

var ImageNumber = 0;

var ImageLength = Image.length - 1;

function changeImage(num) {
  ImageNumber = ImageNumber + num;
  
  if(ImageNumber > ImageLength) {
    ImageNumber = 0;
  }
  
  if(ImageNumber < 0) {
    ImageNumber = ImageLength;
  }
  
  document.slideshow.src = Image[ImageNumber];
  document.getElementById("caption").innerHTML = Caption[ImageNumber];
  return false;
}

function auto() {
  setInterval("changeImage(1)",1000);
}
demo

No comments:

Post a Comment

Popular Posts

Views