Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
How To Create An Image Slider With Javascript
There are many image sliders on the internet. Most of then are written by jQuery. I just want to learn JS and get a better understanding of it, so i use javascript to complete it.
you can find the demo here:


2.with prev/next button:

3.with pager:

Demo 1 is different from demo 2 and 3; and demo 2 and 3 are using the same core codes.

Below is how to do the basic one—move to the next image after a set of time interval. no user interrupt.
The basic idea of image slider is to create a long list. actually is a long 'ul'
The html part is:

<div class =”container” >
<div class =”image-slider-wrapper” >
<ul id= ”image_slider” >
<li><img src =”./image/1.jpg” ></li>
<li><img src =”./image/4.jpg” ></li>
<li><img src =”./image/5.jpg” ></li>
<li><img src =”./image/4.jpg” ></li>
<li><img src =”./image/1.jpg” ></li>
<li><img src =”./image/5.jpg” ></li>

the image-slider-wrapper part is for the convenience when I do future work.
the css part is:

The image-slider-wrapper need to set overflow: hidden cause ul will be a very long list in a line. but only one image can be seen.

There are no width set for ul( id=image_slider) because we will set it in Javascript. So when there are more/less images we don’t need to change css.
Webkit has default padding and margin for ul, so we will initialize it with 0px.
Set li to list-style:none and float left, so the images will be in a long line.
All right, now we’ve have everything ready to move.

Next is the JS part.
In the function init(),

1. set ul width

2. move ul

.offsetWidht returns a number!

(typeof(imageWidth) returns “number”).

offsetWidth is the width that includes content, padding, scrollbar and border.if there are borders for each image, the width of ul will also be correct.
we can also use computedStyle to get the width of one image, but in that case what we get is “760px”, not 760

var computedStyle = document .defaultView. getComputedStyle
(liItems [i ].childNodes [ 0], null);
imageWidth = computedStyle . width ;
here is the function slider()

/**delta function is to set how the image slide—keep still for a while and move to next picture.
*step function will be called many times until clearInterval() been called
* currentImage * imageWidth is the currentImage position of ul
* delta start from 0 to 1, delta * imageWidth is the pixels that changes

The delta function make sure that each animation will keep still for a while then move to the next image. (if y<0, then y=0Wink

The step function does the animation. But it only slide one image. The callback function will make sure there is a loop for all images. And if it’s the last image, it calls the “goBack” function to slide to the first image.

Here is the generic animation function I learned form the javascript animation tutorial i posted the link below. The only difference is after clearInterval() i will call the callback function to keep the animation loop going on.
The animate function is a generic

function from this article:

I think it’s a pretty good one.

WIth the window.inload = init; as the end, the image slider has been successfully finished!

I know there are many places to improve, for example this one is not a responsive one, also the architecture may has problems too. I'm learning new thing everyday.I will keep practicing and write better code!

It takes so long to learn simplicity.

Possibly Related Threads...
Thread Author Replies Views Last Post
  HELP: Pls What Are The Major Uses Of Javascript Broomboss 18 330 03-17-2018, 10:17 PM
Last Post: Broomboss
  TUTORIAL: Take A Selfie With Javascript SamBlingxZ 1 162 01-23-2018, 08:46 PM
Last Post: Broomboss
  SHARED: Introducing Hbot.js Javascript Ai Library Horlahcoded 3 225 11-08-2017, 10:13 AM
Last Post: Horlahcoded
  SHARED: Introducing Hrouter.js Javascript Routing Library Horlahcoded 7 167 10-16-2017, 10:13 PM
Last Post: iamdannyfc
  SHARED: Introducing Hkwest.js Javascript Ajax Library Horlahcoded 0 96 10-15-2017, 09:46 AM
Last Post: Horlahcoded
  HELP: Javascript Vs Jquery. beme 10 399 08-21-2017, 07:20 AM
Last Post: beme
  HELP: How To Create Date And Time Script To Display On My Wapka Site reality867 0 111 08-17-2017, 12:49 PM
Last Post: reality867
  Test Your Javascript Knowledge dealwap 10 631 08-16-2017, 07:41 PM
Last Post: Thepreditor
  How Can I Submit A Form Using Javascript iamdannyfc 11 311 06-22-2017, 10:13 PM
Last Post: bfaschat
  3 Types Of Javascript Animations That I So Much Admire! Laive 5 274 05-20-2017, 09:40 AM
Last Post: Laive

Users browsing this thread: 1 Guest(s)

About Nigeria's Creative Talents

Nigeria's Creative Talents is an online community where every creative Nigerians can share ideas with themselves.

For any more information, please use our contact form.

              User Links