I have created a horizontally scrolling "slideshow" of sorts using Fx.Scroll. When you click "RIGHT" it should scroll right until it reaches the last element in the container (which is "SIX"), at which point it should scroll back to element "ONE".
Unfortunately, when "RIGHT" is clicked the first time, it scrolls to "TWO" which is correct. But then when you click it again, it does nothing. Click it a third time it scrolls to "THREE". Fourth time does nothing. Fifth time, it scrolls to "FOUR". Finally, clicking it for the sixth time, it scrolls back to "ONE". It would appear that the scroll is only working on every second click. I'm stumped. I would really appreciate any insight anyone can offer, Thanks! Live demo is at: http://kineticdesignlabs.com/test/ HTML: <div class="boxes"> <div class="wrapper"> <div class="left" style="margin-right: 20px;"> <!-- <a href="" id="go-left">LEFT</a><br><br> --> <a href="" id="go-right">RIGHT</a> </div> <div id="box-container"> <div class="box-wrapper"> <div class="box" id="1">ONE</div> <div class="box" id="2">TWO</div> <div class="box" id="3">THREE</div> <div class="box" id="4">FOUR</div> <div class="box" id="5">FIVE</div> <div class="box" id="6">SIX</div> </div> <div class="cleaner"></div> </div> <div class="cleaner"></div> </div> <!-- close wrapper --> </div> <!-- close boxes --> CSS: .boxes{ width: 100%; height: 390px; background-color: #fff; margin: 0; } .wrapper{ width: 960px; position: relative; left: 50%; margin-left: -480px; } #box-container{ width: 860px; height: 390px; overflow: hidden; margin-right: 20px; } .box-wrapper{ width: 20000px; height: 390px; } .box-wrapper .box{ width: 880px; height: 390px; float: left; display: inline; background: #ccc; border: 1px solid #ddd; } .left{ float: left; } .right{ float: right; margin-left: 20px; } .cleaner{ clear: both; height: 0px; font-size: 0px; border: none; margin:0px; padding: 0px; background:transparent; } JAVACRIPT: window.addEvent('domready', function(){ var currentBox = 0; var boxArray = $$('#box-container .box-wrapper').getElements ('div'); var scrollBox = function(dir){ if(dir == 'right'){ currentBox++; }else{ currentBox--; } var boxScroll = new Fx.Scroll('box-container',{ duration: 500, transition: Fx.Transitions.Sine.easeOut, wheelStops: false, onStart: function(){ }, onComplete: function(){ } }); if(currentBox == boxArray[0].length){ currentBox = 0; boxScroll.toLeft(); }else if(currentBox <= 0 && dir == 'left'){ currentBox = boxArray[0].length - 1; boxScroll.toElement(boxArray[0][boxArray[0].length - 1]); }else{ boxScroll.toElement(boxArray[0][currentBox]); } } $('go-right').addEvent('click', function(e){ e.stop(); scrollBox('right'); }); /* $('go-left').addEvent('click', function (e){ e.stop(); scrollBox('left'); }); */ });
