Question

I Need a content slider on jQuery with scroll bar and arrows in the same time. Something like this one, but with arrows in the sides like this. The arrows should appear on hover a parent tag. I search in the Internet. But I can’t find what I need. Does anybody know a slider like this?

Answer 1

Use the value method to set the slider’s value to the next/previous page when a next/previous button is pressed. Accomplishing this requires some 10 lines of JavaScript with jQuery and UI.

I’ve developed it based on the slider in the link you provided. The JS code goes like this, and can be found in this fiddle.

var max = , pageWidth = ; // see the fiddle for the full code
$('#prev, #next').click(function(){
    var current = $("#slider").slider('value');
    var to = $(this).is('#prev') ? current - pageWidth : current + pageWidth;
    $('#prev, #next').show();

    if(to <= 0)
        $('#prev').hide();
    else if(to >= max - pageWidth)
        $('#next').hide();

    $("#slider").slider('value', to);
    sliderOpts.slide(null, { value: to });
});
$('#prev').trigger('click'); // init​​​​​​​​

So the only thing remaining for you is to apply any CSS changes you like, and if you want to move the #prev and #next buttons to a parent element that’s fine too with the provided code.