Link to home
Start Free TrialLog in
Avatar of APD Toronto
APD TorontoFlag for Canada

asked on

CSS Position not returning

Hi Experts,

With the following code a slider, and everything works as expected. However when I try to return my slide to its original position out of my container by -800px at Li. 76 that line does not fire. Why, does it have to do something with the queue?

Thanks.

My code
$.fn.carousel = function(slides){
    
    //Globar vars to plugin
    var slideCount = $(slides).length;
    var slideCurrent = 0; //Showing 1st slide.
    
    var slidesTimer;
    
    startTimer();
    function startTimer(){
        slidesTimer = setInterval(
            function(){
                nextSlide();
            },5000);
    }
    
    function stopTimer(){
        clearInterval(slidesTimer);
    }
    
    
    //Stop Slides on MouseOver
    $('#divCarousel').on('mouseover', function(){
        stopTimer();
    });
    
    //Restart Slides on MouseOut
    $('#divCarousel').on('mouseout', function(){
        startTimer(); 
    });
        
    function nextSlide(){
        
        var current = slideCurrent; //current slide to slideout
        
        //Set curr slide Next Slide
        if (slideCurrent == (slideCount - 1)) {//Reached last slide, go to 1st
            slideCurrent = 0;
        } else { //Go to next
            slideCurrent++;
        }
        
        var next = slideCurrent; //Next slide in
        var containerWidth = $('#divCarousel').width();
        
        //Start Animate Current Out
        $(slides).eq(current).animate(
            {
                left: containerWidth
            }, 
            {
                duration: 1000,
                queue: false,
                step: function (now){
                    $(slides).eq(current).css('left', now + 'px');
                }
            }
        )//End Animate Current Out
        
        //Start Animate Next In
        $(slides).eq(next).animate(
            {
                left: 0
            }, 
            {
                duration: 1000,
                queue: false,
                step: function (now){
                    $(slides).eq(next).css('left', now + 'px');
                }
            }
        )//End Animate Next In
        
        //Set current to Original Position
        //var currSlide = 
        $(slides).eq(current).css('left', '-800px');
       // currSlide.style.left = '-800px';
    }
    
}

Open in new window

Avatar of APD Toronto
APD Toronto
Flag of Canada image

ASKER

I just uploaded my code to http://aces-project.com/testing/slider/ and as you can see the slides starts normally left to right, but when they repeat after the 4th slide they criss-cross.

I tried to fix this with carousel.js line 76, but again it is not firing.
ASKER CERTIFIED SOLUTION
Avatar of David S.
David S.
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial