0

I have 5 images and I want to slide those images when we hit the arrow up or down with keyboard button or when we move the scroll bar up or down

For reference:www.webflow.com please just check it from the link. when you will scroll down to the Buil Custom section on the page. you will see the slider and its working with when you hit the arrrow button up and down from keyboard or when you move down or up with scroll bar.

Azzabi Haythem
  • 2,318
  • 7
  • 26
  • 32
Yasir
  • 41
  • 1
  • 7
  • Well then you better start hacking :) Feel free to ask if you got a specific question, not a request. – SirPilan May 02 '19 at 20:06
  • I am not sure what you are trying to do. Please spend time to properly write your question and provide code samples of what you tried. – Greeso May 02 '19 at 20:07

1 Answers1

0

You can use https://api.jquery.com/scrollleft/ to scroll horizontal on an element.

Example: $( "div.slider" ).scrollLeft( 300 );

You will have to first compute the width of each element of your slideshow and scroll exactly that much each time.

You can do this on arrow keys with an event handler: Detecting arrow key presses in JavaScript

The reference you linked shows changes in your page based on the scroll position, reading js: change style based in scroll position might give you hints on where to start there.

reggaemuffin
  • 1,188
  • 2
  • 11
  • 26