Question

Im having issues with my JCarosel slider. My html is set up as required…

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

My Jquery function is as follows

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;

}

I’m using Jquery 1.6.2 and Jcarcousel

As you can see I have no issues with changing the text and highlighted button. The slider returns to the first(0) image when the 6th(5) is selected while the index varialble remains correct. It seems as though the carosel will not show more than 5 images. I have put this down to the scrollTo function as it is not present in the functions that change the text & highlighted button.

You can see the code in action here, click on the 6th button to see the bug

http://pw.ipagtest.com/

thanks in advance

Answer 1

It looks like there is something wrong with your skin. Slider.css.

I think you are making the UL not wide enough the the last slide is dropping down below the first one.

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

Change width to 4320px (720px * 6) or maybe a little bigger if that doesn’t work.