views:

120

answers:

1

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 ;)

A: 

I think your problem is that you're triggering the click event on ALL 3 of your "slide next" links every 5 seconds, so it's going wappy trying to carry out your onclick code for each slide.

What you could do is something like this:

//set a global var to keep track of the slide we're on
window.slide = 1
function nextSlide(){
   //increase window.slide by 1 (to go to the next slide), 
   //or if it is 3 return to the first slide
   window.slide == 3 ? window.slide = 1 : window.slide++;
   //trigger click event on the NEXT slide only
   $('a[href=#box'+window.slide+']').click()
}
setInterval(nextSlide,5000);

This way every 5 seconds the click event on the link to move to the NEXT slide will be triggered (and not all of them).

Hope this helps!

machinemessiah
This works fine. Many thanks!However, autoscrolling works kind of independently from scrolling using links with "slide_next" class.
Adam Pachucki