homepage Welcome to WebmasterWorld Guest from 54.161.166.171
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
webfoo




msg:4631373
 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);
});
});
</script>
<style>
.content {
display: none;
}
</style>

<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>
</div>

 

webfoo




msg:4631901
 7:14 pm on Dec 18, 2013 (gmt 0)

Bump.

Fotiman




msg:4631932
 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.hide();
next.show();
current = next;
setTimeout(showNext, delay);
}

$(current).show();
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.

webfoo




msg:4632212
 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