Databases
StackOverflow2013
Postsdbo
POjQuery featured content slider w/ animations for each slide
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery featured content slider w/ animations for each slide
    text
    copied!<p>I'm creating a feature content slider using jQuery and I have hit a few snags trying to get rid of the last few bugs. It is inspired by <a href="http://kleientertainment.com/" rel="nofollow">http://kleientertainment.com/</a> so check it out and you'll see what im going for. Any suggestions on achieving this effect even with totally new code would be helpful!</p> <p>The idea is a simple div swap, but with custom animations for each slide that fire when it is loaded. It also MUST fade to black in between each transition, whether autoplay or clicked.</p> <p>lets get to the code and bugs:</p> <pre><code>$(document).ready(function () { //START SLIDES HIDDEN $('.slide').css({ 'position': 'absolute', 'display': 'none' }); //RUN FIRST SLIDE runSlideShow(1); animation1_swap(); //AUTOPLAY FUNCTION function runSlideShow(slideNumber) { $('#slide' + slideNumber).fadeIn(1000).delay(10000).fadeOut(1000, function () { if (slideNumber == 4) { animation1_swap(); runSlideShow(1); } if (slideNumber == 3) { animation4_swap(); runSlideShow(4); } if (slideNumber == 2) { animation3_swap(); runSlideShow(3); } if (slideNumber == 1) { animation2_swap(); runSlideShow(2); } }); //NAVIGATION BUTTONS $('#bullet1').click(function () { $('.slide:visible').stop(true, true).fadeOut(1000, function () { animation1_swap(); runSlideShow(1); }); }); $('#bullet2').click(function () { $('.slide:visible').stop(true, true).fadeOut(1000, function () { animation2_swap(); runSlideShow(2); }); }); $('#bullet3').click(function () { $('.slide:visible').stop(true, true).fadeOut(1000, function () { animation3_swap(); runSlideShow(3); }); }); $('#bullet4').click(function () { $('.slide:visible').stop(true, true).fadeOut(1000, function () { animation4_swap(); runSlideShow(4); }); }); } }); </code></pre> <p>CSS info: .slide sets the dimensions, and #slideX are the individual background images for each. #bulletX are the nav buttons.</p> <p>Also, the animationX_swap() are the animations specific to that slide. They live in another file and would have made this post way too long.</p> <p>The bugs: Right now, the autoplay function is great, you can watch it all day and not see a hiccup. The trouble comes when the nav buttons are used, particularly #bullet1. If i click #bullet1, then go to 2, then back to 1, the autoplay seems to be sped up as the slide fades out before it is supposed to. I am a total beginner but I made it this far, can anyone help me clean this up and essentially reimagine <a href="http://kleientertainment.com/" rel="nofollow">http://kleientertainment.com/</a> 's slider?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload