Keyboard control of CMS Slider using Cycle2.js

Design help Custom code
1

Hello, I’m using a custom slider (Cycle2.js) that is connected to a CMS collection, this all works fine. However I’m trying to get keyboard control working so that left and right arrow keys on the keyboard will also control next and previous slide advancing.

I found this script for the standard Webflow Slider Component:

<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>

I have changed it to this so that it is using the cycle-next, cycle-prev pages in the Cycle2 slider:

<script>
    $(document).on('keyup', function(event) {
       if (event.which === 37) {
      $('.slider').cycle('prev');
       } else if (event.which === 39) {
      $('.slider').cycle('next');
       }
    });
</script>

This is not working for me, if anyone can help out with the correct code to get this working it would be greatly appreciated.

Share link:
https://preview.webflow.com/preview/align-cms-slider-captions?preview=769b3d5b69aa735a09271f1a73222fd8

Preview:
http://align-cms-slider-captions.webflow.io/

Cheers