jQuery Slider localScroll和Cycle函数一起使用-不起作用

Question

I am currently "trying" to implement both localscroll & cycle function together to create a slider. The slider is supposed to have two button (left and right) with an automatic cycle of rotation. The localscroll and the click function should have small buttons at the bottom where users can navigate to a certain image within the rotating slider.

The cycle function works. But the localscroll function is not working. Please view the JSFiddle

Error image

jQuery:

    $(document).ready(function() {
        $("#slideshow").css("overflow", "hidden");
        $("#slideshow-nav").css("visibility", "visible");
    $("#slideshow-nav a[href=#lambo1]").addClass("active");

    $("#slideshow-nav").localScroll({
            target:'#slideshow', axis: 'x'
    });

$("#slideshow-nav a").click(function(){
            $("#slideshow-nav a").removeClass("active");
            $(this).addClass("active");
    });

    $("ul#slides").cycle({
            fx: 'fade',
            pause: 1,
            prev: '#prev',
            next: '#next'
    });

    $("#slideshow").hover(function() {
    $("ul#nav").fadeIn();
    },
            function() {
    $("ul#nav").fadeOut();
    });

});

Answer 1

You may want to try Nivo Slider . Out of the box it has the features you're looking for, plus a lot of options, if you need to customize.

<script type="text/javascript">
jQuery(window).load(function(){
jQuery("#nivoslider-4").nivoSlider({
    effect:"random",
    slices:15,
    boxCols:8,
    boxRows:4,
    animSpeed:500,
    pauseTime:3000,
    startSlide:0,
    directionNav:true,
    controlNav:true,
    controlNavThumbs:false,
    pauseOnHover:true,
    manualAdvance:false
});
});
</script>