Проблема с функцией jQuery scrollTo

Question

У меня проблемы с моим слайдером JCarosel. Мой HTML устанавливается в соответствии с требованиями ...

<div id="homeSlider"> 
<div id="homeSliderLeft"> 
    <div id="homeSliderLeftNav"> 
     <ul> 
      <li><a href="#" class="on">1</a></li> 
      <li><a href="#">2</a></li> 
      <li><a href="#">3</a></li> 
      <li><a href="#">4</a></li> 
      <li><a href="#">5</a></li> 
      <li><a href="#">6</a></li> 

     </ul> 
    </div> 
    <div id="homeSliderLeftText"> 
     <ul> 
      <li rel="#1"><strong>Donga Bridge</strong>Taraba State, Nigeria</li> 
      <li rel="#2"><strong>Golf Course</strong>Druids Glen Golf Club, Co. Wicklow, Ireland</li> 
      <li rel="#3"><strong>Oil and Gas</strong>Consectetur adipisicing elit in reprehenderit in voluptate velit</li> 
      <li rel="#4"><strong>Airport</strong>Enugu Airport, Enugu State, Nigeria</li> 
      <li rel="#5"><strong>Road in Countryside</strong>Panyam to Shendam Road, Jos, Plateau State, Nigeria.</li> 
      <li rel="#6"><strong>Open Cast Mining</strong>Consectetur adipisicing elit in reprehenderit in voluptate velit</li> 

     </ul> 
     <!--homeSliderLeftText--> 
    </div> 
    <div id="homeSliderLeftButton"> 
     <a href="#" class="button butMoreYellow">More</a> 
    </div> 
    <!--homeSliderLeft--> 
</div> 
<div id="homeSliderRight"> 
    <div id="homeSliderRightMask"> 
     <ul> 
      <li><img src="images/template/homeSlider_001.jpg" width="720" height="240" alt="" /></li> 
      <li><img src="images/template/homeSlider_002.jpg" width="720" height="240" alt="" /></li> 
      <li><img src="images/template/homeSlider_003a.jpg" width="720" height="240" alt="" /></li> 
      <li><img src="images/template/homeSlider_004.jpg" width="720" height="240" alt="" /></li> 
      <li><img src="images/template/homeSlider_005.jpg" width="720" height="240" alt="" /></li> 
      <li><img src="images/template/homeSlider_006.jpg" width="720" height="240" alt="" /></li> 

     </ul> 
     <!--homeSliderRightMask--> 
    </div> 
    <!--homeSliderRight--> 
</div> 
<!--homeSlider--> 

Моя функция Jquery выглядит следующим образом

function homepageSlider() { 
//init 

$("#homeSliderLeftText ul li:gt(0)").hide(); 
// Ensure the first image is displayed 
$("#homeSliderRightMask").scrollTo($("#homeSliderRightMask ul li:first"), 300, { axis: "x" }); 
// Set the MORE button link to the first project 
firstLink = $("#homeSliderLeftText ul li:first").attr("rel") 
$("#homeSliderLeftButton a").attr("href", firstLink) 
// Set up the slider navigation 
$("#homeSliderLeftNav li a").bind("click", function(e) { 
    e.preventDefault(); 

    moveSlider($(this).text() - 1); 
}); 

// Slide the slider to the selected index 
function moveSlider(index) { 

    //reset all the items 
    $("#homeSliderLeftNav ul li a").removeClass("on"); 
    //set current item as active 
    $("#homeSliderLeftNav ul li a:eq(" + index + ")").addClass("on"); 
    $("#homeSliderRightMask").scrollTo(
     $("#homeSliderRightMask ul li:eq(" + index + ")"), 300, 
     { 
      axis: "x", 
      onAfterFirst: changeText(index) 
     } 
    ); 
} // moveSlider() 

// Change the text of the current project, update the MORE button link 
function changeText(index) { 

    link = $("#homeSliderLeftText ul li:eq(" + index + ")").attr("rel"); 
    $("#homeSliderLeftButton a").attr("href", link); 
    $("#homeSliderLeftText li, #homeSliderLeftText li a").hide(0, function() { 
     $("#homeSliderLeftText li:eq(" + index + "), #homeSliderLeftText li a:eq(" + index + ")").fadeIn().show(); 
    }); 
} // changeText() 
return false; 

}

Я использую Jquery 1.6.2 и Jcarcousel

Как видите, у меня нет проблем с изменением текста и выделенной кнопки. Ползунок возвращается к первому (0) изображению, когда выбран 6-й (5), пока переменная varialble остается правильной. Кажется, что на карусели не будет больше 5 изображений. Я положил это на функцию scrollTo, поскольку она отсутствует в функциях, которые меняют текст & выделенной кнопки.

Вы можете увидеть код в действии здесь, нажмите на кнопку 6, чтобы увидеть ошибку

http://pw.ipagtest.com/

заранее спасибо

Answer 1

Похоже, что-то не так с вашей кожей. Slider.css.

Я думаю, что вы делаете UL не настолько широким, что последний слайд падает ниже первого.

#homeSlider #homeSliderRightMask ul { 
    float: left; 
    height: 240px; 
    width: 4000px; 
} 

Изменение ширины на 4320px (720px * 6) или, может быть немного больше, если это не сработает.