Question

I’m creating an auto_play loop function to have slides slide infenitly.
But I’m having problems when the variable slidePosition is equal to 1 the if function that validates that won’t trigger.

html

<div class="slide_wrap">
    <div class="slides">
      <ul>
        <li><img src="images/img_01.jpg"/></li>
        <li><img src="images/img_02.jpg"/></li>
        <li><img src="images/img_03.jpg"/></li>
      </ul>
</div></div>

js

$(".slides").bind("auto_play.loop", function(){
if(slidePosition == 1){<br/>
$(this).delay(1000).animate({right:'+='+slideWidth, easing: 'swing'}, 1000);<br/>
slidePosition = 2;<br/>
        }<br/>
        if(slidePosition == 2){<br/>
            $(this).delay(1000).animate({right:'+='+slideWidth, easing: 'swing'}, 1000);<br/>
            slidePosition = 3;<br/>
        }<br/>
        if(slidePosition == 3){<br/>
            $(this).delay(1000).animate({right:'-='+2*slideWidth, easing: 'swing'}, 1000);<br/>
            slidePosition = 1;<br/>
        }<br/>
        trigger("auto_play.loop");<br/>
    }).trigger("auto_play.loop");

Answer 1

Alright I think your issue was your if statements. Inside each you would need to call and else if, otherwise the slidenumber would be set and the next if statement would run.

After reviewing the code I understand what your trying to accomplish took your approach and cleaned it up a little. Instead of calling jquery triggers I moved those into method calls. Now after each animation is completed it will call the Update function to get the next animation in the sequence, much cleaner and easier to maintain.

There are still things that need cleaned up. Such as making it take an infinite amount of slides. Right now its hard coded to only do three. While that works it would be good to abstract out the count, and have it read the dom and get a count that way.

You can view the solution on jsFiddle here

Update:
Modified the javascript to take an unlimited amount of slides. I suggest you use this type of approach so you can keep adding slides and never touch an ounce of javascript.

Updated Fiddle

Javascript:

$(document).ready(function()
                  {
                      //On page load initialize the slideshow
                      MyApp.SlideShow.init();
                  });
//create a namespace for our code
var MyApp = MyApp || {};

//create a function inside a closure to handle all slideshow functions
MyApp.SlideShow = (function ()
{
    var slidePosition = 1;
    var slideWidth = 100;
    var slider = $('.slides');     

    //called when page is loaded
    function init()
    {
        var v = $('.viewer');      
        var vtop = v.position().top;
        vleft = v.position().left;    
        //Set the slider to where the view is 
        slider.css('left', vleft).css('top', vtop);
        update();
    };

    //function to update the slide block
    function update()
    {
        if (slidePosition == 1) {
            slider.delay(1000).animate({
                left: '-=' + slideWidth,
                easing: 'swing'
            }, 1000, update);
            slidePosition = 2;
        }
        else if (slidePosition == 2) {
            slider.delay(1000).animate({
                left: '-='+ slideWidth,
                easing: 'swing'
            }, 1000, update);
            slidePosition = 3;
        }
        else if (slidePosition == 3) {
            slider.delay(1000).animate({
                left: '+=' + 2 * slideWidth,
                easing: 'swing'
            }, 1000, update);
            slidePosition = 1;
        }
    };    
    return {
        init: init
    };
}());

HTML:

<div class="slide_wrap">
    <div class="slides">
      <ul>
        <li class="s1">1</li>
        <li class="s2">2</li>
        <li class="s3">3</li>
      </ul>
    </div>
</div>

<div class="viewer"></div>

CSS:

.viewer
{
    border:5px solid yellow;
    height:100px;
    width:100px;
    position:absolute;
    top:100px;
    left:300px;
}
.slides li
{    
 height:100px;
 width:100px;
float:left;
}
.slides ul
{    
  height:100px;
}
.slides
{
    position:absolute;
}
.s1
{
  background-color:red;  
}
.s2
{
  background-color:blue;  
}
.s3
{
  background-color:green;  
}