Use Arrow Key to Change Slides

Community resources Webflow Tips
1

For anyone looking to use the arrow keys to change slides.

 <script>
      
      	$(document).on('keyup', function(event) {
		if (event.which === 37) { 
          	$(' .w-slider-arrow-left').trigger('tap');
        	} 
      	else if (event.which === 39) { 
          	$('.w-slider-arrow-right').trigger('tap');
        	} 
        });
      
  </script>

All key codes can be found here

4 Likes
2

Pretty neat. I love it when they’re are multiple ways of navigating the components!

3

To press any link on a page with a key to navigate - in the example below using next and previous keys (perhaps for portfolio items), hitting the right and left key will take you to the next or previous portoflio item.

// NAVIGATE WITH KEYS
$(document).keydown(function(e) {
  switch (e.which) {
    case 37: // key arrow left
      var href = $('#previous_button').attr('href');
      window.location.href = href;
      break;

    case 39: // key arrow right
      var href = $('#next_button').attr('href');
      window.location.href = href;
      break;
  }
  e.preventDefault(); 
});
4

Thank you for this beautiful working piece of code.

Any chance someone can modify this so it works with multiple sliders on 1 page?
It now affects the navigation on all sliders (see ‘Archive’ column).

I can’t figure it out.

Read Only
Published

edit: maybe a reset of the settings when closing a slider will do the trick? Again, I have no idea how to do this. Thank you

5

You just need to give the slider that you want it to work a unique id then put that id into the code - i.e if you give the slider an id of"key-slider" - then the following code should work:

<script>
      
      	$(document).on('keyup', function(event) {
		if (event.which === 37) { 
          	$('#key-slider  .w-slider-arrow-left').trigger('tap');
        	} 
      	else if (event.which === 39) { 
          	$('#key-slider .w-slider-arrow-right').trigger('tap');
        	} 
        });
      
  </script>
6

Thank you, I did tried this already but it’s not working.
It keeps affecting both / all sliders.

I did it like this:

  $(document).on('keyup', function(event) {
    if (event.which === 37) { 
      $('#film-photography .w-slider-arrow-left').trigger('tap');
      $('#product-photography .w-slider-arrow-left').trigger('tap');
    } 
    else if (event.which === 39) { 
      $('#film-photography .w-slider-arrow-right').trigger('tap');
      $('#product-photography .w-slider-arrow-right').trigger('tap');
    } 
  });

And this:

  $(document).on('keyup', function(event) {
    if (event.which === 37) { 
      $('#film-photography .w-slider-arrow-left').trigger('tap');
    } 
    else if (event.which === 39) { 
      $('#film-photography .w-slider-arrow-right').trigger('tap');
    } 
  });
  
    
  $(document).on('keyup', function(event) {
    if (event.which === 37) { 
      $('#product-photography .w-slider-arrow-left').trigger('tap');
    } 
    else if (event.which === 39) { 
      $('#product-photography .w-slider-arrow-right').trigger('tap');
    } 
  });

Am I doing something wrong?

I was also wondering if there’s a way of not targeting each individual slider? If not it’s not that big of deal because it’s my personal website but it would be more convenient when adding new projects.

Thanks again

7

Can you publish the page and share it and I will take a look.

The above published link does not work.

8

Sorry!

New Published
New Read Only

9

Ah ok, so you only want it to affect the popup gallery slider that is in focus?

using javascript, you will need to add a class (for example “active-slider”) to the popup gallery when enlarged. and then remove that class when closed. and then use the code below.

<script>
      
      	$(document).on('keyup', function(event) {
		if (event.which === 37) { 
          	$('.active-slider .w-slider-arrow-left').trigger('tap');
        	} 
      	else if (event.which === 39) { 
          	$('.active-slider .w-slider-arrow-right').trigger('tap');
        	} 
        });
      
  </script>
10

If you give the “item-img” the id of the class of the target popup gallery - so the id for the first item img (Film Photography) at the top right id would be gallery-film-photography

and then use this code:

// THIS CODE ADDS THE CLASS TO THE SPECIFIED GALLERY
$(".item-img").on('click', function(){
    var galleryId = "." + $(this).attr('id');
    $("galleryId").addClass("active-slider");
});

// THIS CODE REMOVES THE CLASS WHEN THE CLOSE BUTTON IS CLICKED
$(".link-block").on('click', function(){
    $(this).parent().removeClass("active-slider");
});
11

Sorry but I can’t get it to work…

I added the following in the ‘Before tag’ section in the page settings:

// THIS CODE ADDS THE CLASS TO THE SPECIFIED GALLERY
$(".item-img").on('click', function(){
    var galleryId = "." + $(this).attr('id');
    $("galleryId").addClass("active-slider");
});

// THIS CODE REMOVES THE CLASS WHEN THE CLOSE BUTTON IS CLICKED
$(".link-block").on('click', function(){
    $(this).parent().removeClass("active-slider");
});

  $(document).on('keyup', function(event) {
    if (event.which === 37) { 
      $('.active-slider .w-slider-arrow-left').trigger('tap');
    } 
    else if (event.which === 39) { 
      $('.active-slider .w-slider-arrow-right').trigger('tap');
    } 
  });

And added ID ‘gallery-film-photography’ to the ‘item img’ div of the Film Photography post/project.

What am I missing?

New Read Only

12

All looks about right - however, if you check the popup div after you click the image - it doesn’t have the active-slider class so there’s an issue there.

you’ll need to do some debugging to find the issue.

13

Yes I noticed that. It does remove the class but doesn’t add it, so there must be something not right in the code below:

$(".item-img").on('click', function(){
    var galleryId = "." + $(this).attr('id');
    $("galleryId").addClass("active-slider");
});

Could you check it one last time? I don’t know javascript well enough.

14

Sorry, you’ll need to check it.

Try

alert( galleryId )

after the var gallery line - publish it and let me know what that produces

15

It says:

.gallery-film-photography

16

So add this to the code separately

$(“.gallery-film-photography”).addClass(“active-slider”);

and see does that add work - cos that’s what the other code is doing…

17

Okay, I understand.

I added it and it again does not add the class, which is weird right… :exploding_head:

18

It also should’ve picked the id instead of the class?

19

Sorry man, you’re gonna have to figure this one yourself - you’re very nearly there. Good luck!

20

This is the code - galleryId should not have been in commas in the addClass line. Let me know if that works.

// THIS CODE ADDS THE CLASS TO THE SPECIFIED GALLERY
$(".item-img").on('click', function(){
    galleryId = "." + $(this).attr('id');
    $(galleryId).addClass("active-slider");
});

// THIS CODE REMOVES THE CLASS WHEN THE CLOSE BUTTON IS CLICKED
$(".link-block").on('click', function(){
    $(this).parent().removeClass("active-slider");
});
1 Like