Need a slider on jQuery with scroll bar and arrows in the same time

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.

Answer 2

Firstly , you should google your requirement , there are so many of them out there , check these

Answer 3

would this example helps?

http://manos.malihu.gr/tuts/custom-scrollbar-plugin/scroll_buttons_and_snap_scrolling_examples.html

try "view source" and grab those required *.js and *.css file, and tweak your CSS and scripts from there.

Good luck!

Answer 4

Try Jscrollpane: http://jscrollpane.kelvinluck.com/

I've used it on dozen of very complex websites and I always managed to do what I wanted with it. It also has great documentation.

You can choose a horizontal or vertical slider (or both), show/hide arrows, go to a specific html element, use animations, etc.

Check it out! Once you get used to it you'll always use it!

Hope it helps!