homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Content Carousel

5+ Year Member

Msg#: 4631371 posted 1:42 am on Dec 17, 2013 (gmt 0)

I'm trying to build a basic 'carousel'. I have a container dive, and several content divs. I want to show each content div one at a time, for about 20 seconds, and then rotate to the next one. The number of content divs changes multiple times a day. My current script is doing a mediocre job, and bunching some of the content divs together. There's got to be a better way to do this?
<script type='text/javascript'>
$( document ).ready(function() {
$('.message').each(function(index,i) {
$(this).delay(index * 20000).show(0);
$(this).delay(index * 20000).hide(0);
.content {
display: none;

<div id='container'>
<div class='content'>Blah Blah</div>
<div class='content'>Foo</div>
<div class='content'>Bar</div>
<div class='content'>Lorem Ipsum</div>



5+ Year Member

Msg#: 4631371 posted 7:14 pm on Dec 18, 2013 (gmt 0)



WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

Msg#: 4631371 posted 9:12 pm on Dec 18, 2013 (gmt 0)

What is the 'message' class referenced in your example?

Rather than attempting to schedule all of the image swaps at once at startup, use a more event driven approach. For exmample:

$( document ).ready(function() {
var contentList = $('.content'),
count = contentList.length,
index = 0,
current = $(contentList[index]),
delay = 20000;

function showNext() {
if (++index >= count) index = 0;
var next = $(contentList[index]);
current = next;
setTimeout(showNext, delay);

setTimeout(showNext, delay);

In other words, use setTimeout to schedule the next one after all of the work has been done. This will avoid the case where incremental work being done over a period of time causes overlap.


5+ Year Member

Msg#: 4631371 posted 4:57 pm on Dec 19, 2013 (gmt 0)

Precisely what I was looking for! Thank you for your insightful problem solving approach.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved