3

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?

Anna Presnyakova
  • 93
  • 2
  • 9
  • You would need to more than likely create one yourself that on the arrow clicks calculates the current left position and moves it the remainder amount to be lined up with the next image, wouldn't be too difficult. – Mark Pieszak - Trilon.io Jul 25 '12 at 15:31

4 Answers4

7

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.

Simeon
  • 5,519
  • 3
  • 29
  • 51
  • 1
    Thank you so much for the example. I like how you show the maths of working it out. Is there anyway to SNAP it. So prev and next show 2 images per block - the scrollbar can go anywhere - say if they click prev and next can it snap back to the 2 per block again? – TheBlackBenzKid Jul 25 '12 at 21:33
  • How can you do it like the SNAP though.. on this page it snaps: http://www.gucci.com/us/category/m/men_s_ready_to_wear#look3262lookA113 – AlphaApp Jul 26 '12 at 12:25
  • Did my answer not help you in any way? It's okay if it wasn't, I'm asking since the whole reputation was given to another another answer, and not split. Please explain what I was missing so I can improve – Simeon Aug 16 '12 at 21:07
2

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!

Mars Mellow
  • 228
  • 2
  • 14
0

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!

VVV
  • 7,563
  • 3
  • 34
  • 55
  • 1
    I think an example on how to customize it into the specific needs that this poster has, would help. Such an example would show that the arrows can be positioned etc. – Simeon Jul 25 '12 at 20:24
  • Worked for my needs. Great link. May not necessarily answer the question but helped me all the same. –  Oct 04 '12 at 14:40
-1

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

Priyank Patel
  • 6,898
  • 11
  • 58
  • 88