Click here to Skip to main content
13,000,135 members (62,858 online)
Click here to Skip to main content
Add your own
alternative version


11 bookmarked
Posted 17 Oct 2013

Image Sliding Effect with JavaScript

, 9 Apr 2014
Rate this:
Please Sign up or sign in to vote.
Quick way to insert an image sliding effect on your web site


This tip is meant to give others a shortcut on how to get quick image sliding effect on the webpage without much trouble and no JQuery.


I came across this site while looking for a way to animate a group of images. And from all my options, I found it to be the simplest one. After researching html 5 a very simple option, although not the effect was also quite simple, was possible with the help of canvas and javascript.

1. Using menu cool

Download their folder and place the file in your project. Then add:

<link href="js-image-slider.css" rel="stylesheet" type="text/css" />
<script src="js-image-slider.js" type="text/javascript"></script>

Inside your page, add/type the following div block:

<div id="sliderFrame">
<div id="slider">
    <a href=""

        <img src="images/image-slider-1.jpg"

        alt="Welcome to" />
    <img src="yourImage"

    alt="This will show on yourImage caption" />
    <img src="yourOtherImage"

    alt="This will show on yourOtherImage caption" />
    <img src="yourOtherOTherImage" alt="#htmlcaption" />
<div id="htmlcaption" style="display: none;">
    <p>"This will show on yourOtherOTherImage caption"</p>

2. Using HTML 5

On your html page have a canvas, if with assign an Id, even better

<canvas id="theCanvas">

At the place you have your javascript for the page

//the array with the path to the images
var pathToYourImages = ["pathToimage.imageExt", "pathToimage2.imageExt", "pathToimage3.imageExt", ....];

//a variable to hold the canvas element
var canvas = null;

//a variable to hold the canvas context
var contextForCanvas = null;
//a variable for the image element to be draw
var image = null;

//a variable to control which image to be displayed.
var currentImage = 0;

//when the wondow.onload happen, assing the value to the variables and then call ImageSliding.
window.onload = function() {
    canvas = document.getElementById('theCanvas');
    contextForCanvas = canvas.getContext('2d');
    image = document.createElement("img");


//Performs the change on the image path and controls which will be showed
function ImageSliding() {

    //sets the image's path
    image.setAttribute('src', pathToYourImages[currentImage]);

    //control which image is being used
    currentImage = currentImage === (pathToYourImages.length - 1) ? 0 : ++currentImage;

    //sets the transparency value
    contextForCanvas.globalAlpha = 0.1;
    //calls the timeout function
    setTimeout(ShowImage, 200);

//clears the canvas and show the new image
function ShowImage() {;

    contextForCanvas.clearRect(0, 0, canvas.width, canvas.height);
    contextForCanvas.drawImage(image, 0, 0, 300, 150);
    contextForCanvas.globalAlpha += 0.1;

    contextForCanvas.globalAlpha > 0.9 ? setTimeout(ImageSliding, 3500) : setTimeout(ShowImage, 200);


Basically, these are two ways to get the effect. It's advisable to always research in more than one place and evaluate what would be the best solution for your problem. I hope this helps.



This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Paulo Augusto Kunzel
Software Developer
Brazil Brazil
I work as a software developer for a multinational company and at the moment the focus lies on developing reports. Also, I am studying the equivalent to an Associate degree in System's Development and Analysis because after finishing my H.N.C. Business I was bitten by the programming bug. After that my passion for computer science has only increased.

You may also be interested in...


Comments and Discussions

Questionnice joke Pin
Member 1171713025-May-15 3:19
memberMember 1171713025-May-15 3:19 
QuestionEffect Pin
Member 1116361018-Oct-14 12:34
memberMember 1116361018-Oct-14 12:34 
QuestionSlideshow Pin
Member 105135976-Apr-14 10:23
memberMember 105135976-Apr-14 10:23 
AnswerRe: Slideshow Pin
Paulo Augusto Künzel9-Apr-14 1:43
professionalPaulo Augusto Künzel9-Apr-14 1:43 
AnswerRe: Slideshow Pin
Christian Amado9-Apr-14 2:04
professionalChristian Amado9-Apr-14 2:04 
GeneralRe: Slideshow Pin
Paulo Augusto Künzel9-Apr-14 2:10
professionalPaulo Augusto Künzel9-Apr-14 2:10 
That settles it.

Probably our colleague (Member 10513597) is having an issue with something else.
Member 10513597, please check if you are using a browser that supports html5 and let me know if you still get the problem. If so, I'll check more browser and version to make a warning or something.

There are no secrets to success. It is the result of preparation, hard work, and learning from failure. Colin Powell

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.170624.1 | Last Updated 9 Apr 2014
Article Copyright 2013 by Paulo Augusto Kunzel
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid