vertical mode: next/prev controls is not changed to up/down

Vertical mode uses keyboard/drag/swipe controls from horizontal mode

https://codepen.io/Grawl/pen/qXbwQQ

Steps to reproduce the problem

1. Set vertical: true
2. Try to navigate through slides using swipes/dragging/keyboard

What is the expected behaviour?

If I drag a slide using mouse or touchscreen to the top, it should move to top and show new slide on bottom of a slide.

If I drag a slide using mouse or touchscreen to the bottom, it should move to top and show new slide on top of a slide.

If I press Down key, it should move to top and show new slide on bottom of a slide.

If I press Up key, it should move to bottom and show new slide on top of a slide.

What is observed behaviour?

When I press Up or Bottom key, nothing happens.

When I press Left key, slide moves up.

When I press Right key, slide moves down.

More Details

• Which browsers/versions does it happen on? Google Chrome 60
• Which jQuery/Slick version are you using? jQuery 3.2.1 & Slick 1.6.0
• Did this work before? I Don’t know

[elynegrao]

Ok! my work around here for a nested slick.

$( ".vertical-slick" ).keydown(function( event ) {
       event.stopImmediatePropagation(); // Stops listen the keydown on a vertical element
});

$( ".horizontal-nested-slick" ).keydown(function( event ) {		
	if(event.which == 38 ) { // UP / CIMA
		$("#vertical-slick-father").slick('slickPrev');
                    ...

  	}		
	if(event.which == 40 ) { // DOWN / BAIXO
		$("#vertical-slick-father").slick('slickNext');
                    ...
  	}
});

[Abderezai]

I’m still seeing exact issue.

$(document).ready(function(){
  $('.product-single__photos').slick({
	  slidesToShow: 1,
	  slidesToScroll: 1,
	  arrows: true,
	  fade: true,
      swipe: false,
      asNavFor: '.slider-nav'
  });
  $('.slider-nav').slick({
      	vertical:true,
           verticalSwiping: true,
            swipe:true,
       slidesToShow: 3,
           slidesToScroll: 1,
	asNavFor: '.product-single__photos',
	dots: false,
            arrows: false,
	focusOnSelect: false
});
});