September 20, 201015 yr Hi, I used the following tutorial to make a parallax content slider for my webiste: http://blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-jquery/ I got it working nicely, but wanted to add auto-scrolling functionality. I did it by adding jQuery.serialScroll and using setInterval but it works like crazy now. I guess the slider is now going through every 3 slides every 5 seconds, instead of 1 slide per 5 second. I have no idea how to make it working properly. Here is a part of my HTML: <body> <div id="header"> <h1 id="logo">Testing slider</h1> </div> <!-- end logo --> <div id="slider"> <div id="background"> <div id="bg"> </div> </div> <!-- end slide background --> <div id="wrapper"> <ul id="mask"> <li id="box1" class="box"> <a name="box1"><img src="images/slide1.png"></a> <div class="content"> <div class="inner"> </div> </div> </li> <!-- end box1 --> <li id="box2" class="box"> <a name="box2"><img src="images/slide2.png"></a> <div class="content"> <div class="inner"> </div> </div> </li> <!-- end box2 --> <li id="box3" class="box"> <a name="box3"><img src="images/slide3.png"></a> <div class="content"> <div class="inner"> </div> </div> </li> <!-- end box3 --> </ul> <!-- end mask --> </div> <!-- end wrapper --> </div> <!-- end Slider --> <div id="content"> <div id="menu"> <ul id="menuitem"> <li><a href="#box1" class="slide_next"></a></li> <li><a href="#box2" class="slide_next"></a></li> <li><a href="#box3" class="slide_next"></a></li> </ul> </div> <!-- end menu --> </div> <!-- end content --> And here is the troubling JS code: <script type="text/javascript"> $(document).ready(function() { $('a.slide_next').click(function () { $('#wrapper').scrollTo($(this).attr('href'), 800); setPosition($(this).attr('href'), '#background', '0px', '50px', '100px') $('a.slide_next').removeClass('selected'); $(this).addClass('selected'); return false; }); }); setInterval(function() {$('a.slide_next').click()}, 5000); function setPosition(check, div, p1, p2, p3) { if(check==='#box1') { $(div).scrollTo(p1, 800); } else if(check==='#box2') { $(div).scrollTo(p2, 800); } else { $(div).scrollTo(p3, 800); } }; </script> Please, anyone has any idea how to get it working the way it should be (1 slide each 5 sec)? PS. Please be nice, I'm new in the field
Create an account or sign in to comment