CODEWITHSUNDEEP
javascripthtmlcarousel
timp
timp

Reputation: 117

Pure javascript carousel

I'm new in Javascript and i'm trying to do a simple carousel in pure Javascript, without any librairies like JQuery or Bootstrap. This is what I have but the order of images is wrong if you click on next and then on previous. What am I doing wrong ? https://jsfiddle.net/ddLxvzoj/1/

 <html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Carousel</title>
    <link rel="stylesheet" href="carousel.css">
</head>
<body onload="init()">
<script src="carousel.js"></script>
<div id="carousel">
    <ul>
        <li><img id="photo" src=""></li>
    </ul>
    <a  class="arrow left-carousel" href="#" onclick="previous()"> < </a>
    <a  class="arrow right-carousel" href="#" onclick="next()"> > </a>
</div>
</body>


var images = ["http://www.rideboard.fr/wp-content/themes/rideboard/images/slidehome/home-06.jpg", "http://www.spotsurf.fr/wp-content/uploads/2013/02/la-graviere-spot-surf.jpg", "http://www.surfsession.com/wp-content/uploads/2013/03/landes_line_up.jpg"];
var index = 0;

function init() {
    next();
}

function interval(){
    setInterval(function (){
        next();
    }, 2000);
}

function next(){
    if(index >= images.length) {
        index = 0;
    }
    if(index <= -1){
        index = 1;
    }
    document.getElementById('photo').src = images[index];
    index++;
}

function previous (){

    if (index <= -1) {
        index = images.length - 1;
    }
    if (index >= images.length) {
        index = 1;
    }
    document.getElementById('photo').src = images[index];
    index--;

}

EDIT : Now I'm trying to add an "indicator" on the bottom of images in order to see on which image you are. If I click on one button it displays the right image. But I have no idea how to do that.

Upvotes: 2

Views: 2259

Answers (2)

cutmancometh
cutmancometh

Reputation: 1727

You have a lot going on here. But it looks like this is what you're trying to do:

1) Load an image on page load

2) When the user clicks the right arrow, change the picture to the next one in an array. If we're past end of the array of images, return to the first one, giving the illusion of a "carousel"

3) When the user clicks the left arrow, change the picture to the previous one in the array. If that would put us before the beginning of the array, go to the last image in the array, giving the illusion of a carousel.

4) This one I'm not sure about, but it looks like you're trying to have the image change to the next one every two seconds. Is that right?

All you really need to do is simplify things a little bit.

First, create an function that will update your image src based upon the current index. (You will call it from next() and previous() functions)

function updateImageSrc(){
    document.getElementById('photo').src = images[index];
}

Now, simplify your next() and previous() functions:

function next(){
    index++;
    if(index == images.length)
        index = 0;

    updateImageSrc();
}

function previous(){
    index--;
    if(index == -1)
        index = images.length - 1;

    updateImageSrc();
}

Now, make the init function more clear:

function init(){
    //initialize the image
    index = 0;
    updateImageSrc();

    //set up the auto slideshow dealy
    setInterval(next, 2000);//no need to wrap "next" inside a function, you can just pass in the reference to the function itself.
}

Hope this helps. Comment if you need further direction.

EDIT: Answering poster's question in comments.

To add a label that shows the name, you need to do two things. 1) Add an HTML element that will display the name of the image. 2) in the javascript, any time the image changes, also change the name.

1) HTML element to display the name:

<span id="image-name-display"></span>

2) Update it in the javascript. I would recommend modifying the updateImageSrc() function to the following:

function updateImageSrc(){
    document.getElementById('photo').src = images[index];

    document.getElementById('image-name-display').textContent = index.
}

That will display the index number of the image you are currently on. If you want description or title for each image. You would want to add something like this to your init() function:

var imageTitles = ['Surfing Malibu', 'The Pipeline', 'Laie at Sunset'];

The above declares an array of image titles. Each title should have the same place in the array as the image it describes.

Then your line of code in the updateImageSrc() function would be:

document.getElementById('image-name-display').textContent = imageTitles[index];

There are many different ways to do it, but this way is pretty simple. Hope it helps.

Upvotes: 2

Matias Cicero
Matias Cicero

Reputation: 26281

I propose you an alternative solution:

function next(){
    index++; //We go to the next image
    fixIndex(index); //We check if we are out of bounds
    document.getElementById('photo').src = images[index]; //We show that image
};

function previous (){
    index--; //We go to the previous image
    fixIndex(index); //We check if we are out of bounds
    document.getElementById('photo').src = images[index]; //We show that image
};

/* Fixes "out of bound" indexes */
function fixIndex() {
    if(index >= images.length)
        index = 0;
    else if(index < 0) 
        index = images.length - 1;
};

Upvotes: 0

Related Questions