Create a carousel in javascript

Question

I am trying to create a simple carousel-like list of icons via Javascript and CSS. But it does not seem to work in my way. Can anyone help? This is my code

 JS
    var container = document.getElementById('container');
    var foo = [];
    for (var i = 0; i < 5; i++) {
        foo[i] = document.createElement('div');
        foo[i].id = 'SingleElement';
        foo[i].innerHTML = '<img alt="" src="http://www.placehold.it/300x200"/>';
        container.appendChild(foo[i]);
    }

    HTML
    <div id="container"></div>

    and CSS
    #container {
       overflow-x:scroll;
       white-space: nowrap;
       float:left;
    }
    #SingleElement {
        float:left;
        white-space: nowrap;
    }
    img {
        display:inline-block;
    }

and fiddle example. Thank you.

You probably shouldn't give all the containers the same "id" value. Other than that, it seems to work fine. What were you expecting it to do? — Pointy
– Pointy, Commented Oct 21, 2013 at 13:33
This question appears to be off-topic because it is about code review... Should be on codereview.stackexchange.com — Roy Dictus
– Roy Dictus, Commented Oct 21, 2013 at 13:33
Do you want them to be animated in some way? The code you provided only displays 5 placeholders — ForOhFor
– ForOhFor, Commented Oct 21, 2013 at 13:34
I agree with Pointy, make sure you use classes in stead of ID if that style will be repeated more than once. #SingleElement should be .SingleElement — Aessandro
– Aessandro, Commented Oct 21, 2013 at 13:41
@Pointy All I want to do is to show all the containers on a single line, that will have the ability to scroll horizontally.I already tried to use classes and I have the same result — Mano
– Mano, Commented Oct 21, 2013 at 13:41

jcho360 · Accepted Answer · 2013-10-21 14:11:32Z

I was going to write a comment but it will be too long...

there's nothing wrong with your code, it's working perfect. If you take a look to the source Code after executing the JS.

<body>
<div id="container">
<div id="SingleElement">
<img src="http://www.placehold.it/300x200" alt="">
</div>
<div id="SingleElement">
<img src="http://www.placehold.it/300x200" alt="">
</div>
.......
<div id="SingleElement">
<img src="http://www.placehold.it/300x200" alt="">
</div>
</div>

and the CSS for your code after executing the JS:

#container {
    float: left;
    overflow-x: scroll;
    white-space: nowrap;
}

#SingleElement {
    float: left;
    white-space: nowrap;
}


img {
    display: inline-block;
}

Conclusion:

After execute the JS you will have your images float:left that only means one next to the other (if the screen is width enough), however you still need to hide elements, make rotation, next and previous button with CSS and JS.

My biggest recommendation is to use a JS library and customize it.

I.E=

http://sorgalla.com/projects/jcarousel/

(there are a lot of them in the internet).

mainguy · Accepted Answer · 2013-10-21 14:11:00Z

0

I agree with the other commenters that this is not realy a Carousel and you should look out for one of the existing librarys. If you just want to display a scrollable div with 5 images look at this:

http://jsfiddle.net/nrybQ/

#container {
   overflow-x:scroll;
   white-space: nowrap;
   float:left;
    width:100%;
}

var container = document.getElementById('container');
var foo = [];
for (var i = 0; i < 5; i++) {
     foo[i] = document.createElement('span');
     foo[i].innerHTML = '<img alt="" src="http://www.placehold.it/300x200"/>';
      container.appendChild(foo[i]);
}

Some hints: - don't use ids for multiple elements - use a span not a div -supply a width for the container

answered Oct 21, 2013 at 14:11

mainguy

8,3312 gold badges34 silver badges40 bronze badges

Collectives™ on Stack Overflow

Create a carousel in javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related