'Return focus to Slick slider 1.8.1 when its shown again after being hidden

As you see in my example, I can move in my slider and click on slides using the mouse. I can move using the keyboard too, but when I click on a slide and exit I can't move unless I click the slider again.

My question : Is there a way staying or getting back to the slider using only keys ?

Like pressing A to enter the slide #1 which will reveal the panel 1, then press exit and move with arrows to the slide #2 and press A en enter panel 2 ?

Thank you in advance.

https://codepen.io/jinzagon/pen/oNxYKgW

        <link rel="stylesheet" href="./style.css">
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/>
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css"/>
    
<style></style>
</head>
<body>

    <div class="panel-up" id="1">
      <div class="panel-content">
        <div class="close"></div>
        <p style="margin-bottom: 30px; color:white;">FIRST PANEL</p> 
      </div>
    </div>

    <div class="panel-up" id="2">
      <div class="panel-content">
        <div class="close"></div>
        <p style="margin-bottom: 30px; color:white;">SECOND PANEL</p> 
      </div>
    </div>

<div class="content" style="color:white">
    <section class="games">
    
        <div>
        <a style="color:white;" href="#1" class="reveal-up" id='open'><img src="http://placehold.it/288x288?text=1"></a>
        </div>
        <div>
        <a style="color:white;" href="#2" class="reveal-up" id='close'><img src="http://placehold.it/288x288?text=2"></a>
        </div>
        <div>
                        <img src="http://placehold.it/288x288?text=3">
        </div>
        <div>
                        <img src="http://placehold.it/288x288?text=4">
        </div>
        <div>
                        <img src="http://placehold.it/288x288?text=5">
        </div>
        
    </section></div>
    
    
    <div class="ip" style="opacity:1; z-index:-5; position:absolute; transform: scale(1.2)">
    
    <div class="slideshow">
  <div class="slider">
    <div class="item">
      <img src="https://images.unsplash.com/photo-1445768593937-05a3f7832b68?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
    </div>
    <div class="item">
      <img src="https://images.unsplash.com/photo-1443363742879-63e3d75de2f8?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
    </div>
    <div class="item">
      <img src="https://images.unsplash.com/photo-1445964047600-cdbdb873673d?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
    </div>
    <div class="item">
      <img src="https://images.unsplash.com/photo-1446329813274-7c9036bd9a1f?dpr=1&auto=compress,format&crop=entropy&fit=crop&w=700&h=500&q=80" />
    </div>
  </div>
</div>

    </div>

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
    <script src='./script.js'></script>
</body>

CSS

body{
    overflow:hidden;
    background-color:#000;
}

/*Slider games*/

.games{
    position:absolute;
}

.slider {
  background-color: white;
  height: auto!important;
}

.games  .slick-slide {
  margin: 0px 20px;
}

.slick-slide img {
  width: 100%;
}

.top_slider{
    overflow:hidden;
}

/* Slider background */

.slideshow {
  position: absolute;
  z-index: 1;
  height: 100%;
  max-width: 700px;
  position: absolute;
    top: 0;
    left: 0;
    z-index: -99;
    opacity:0.5;
}
.slideshow * {
  outline: none;
}
.slideshow .slider {
 
}
.slideshow .slider-track {
  -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}
.slideshow .item {
  height: 100%;
  position: relative;
  z-index: 1;
}
.slideshow .item img {
  width: 100%;
  -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform: scale(1.2);
          transform: scale(1.2);
          transform: translateX(2rem);
}
.slideshow .item.slick-active img {
  -webkit-transform: scale(2);
          transform: scale(2);
          transform: translateX(0rem);
}

/* Panels */

.content {
  padding: 50px;
  position: absolute;
  width: 90%;
  -webkit-transition: all .7s ease;
  transition: all .7s ease;  
  transform: scale(1);
  opacity:1;
  bottom:10%;
}
.content.hidefor-panel-up { 
    bottom: 20%;
    transform: scale(0.95);
    opacity:0;
}

.ip {
  display:block;
  width:100%; height:100%;
  object-fit: cover;
  position: absolute;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;  
  opacity:1;
  top:0;
  opacity:1; z-index:-5; position:absolute;
}
.ip.hidefor-panel-up { 
    opacity:1;
    top: 10%;
}

}
.panel {
  padding: 20px;
}
.panel-content {
  position: relative;
  /*background: #efefef;*/
  padding: 30px 50px;
  overflow-y: auto;
  height: 100%;
}
.panel-content .close {
  line-height: 15px;
  position: absolute;
  text-align: center;
  cursor: pointer;
  display: block;
  color: #ffffff;
  right: 5px;
  top: 5px;
  height: 15px;
  width: 15px;
  content: "✖";
}
.panel-content .close:before {
  line-height: 15px;
  position: absolute;
  text-align: center;
  cursor: pointer;
  display: block;
  color: #ffffff;
  right: 5px;
  top: 5px;
  height: 15px;
  width: 15px;
  content: "✖";
}

.panel-up {
  z-index: 10;
  position: fixed;
  display: block;
  bottom: 0;
  -webkit-transition: all .7s ease;
  transition: all 0.7s ease-out;
  bottom: -20%;
  width: 100%;
}
.panel-up.expanded {
  bottom: 0;
}
.reveal-left {
  float: left;
}
.reveal-up {

}
.nav {
  padding: 10px;
  margin: 0 auto;
  height: 10px;
  width: 90%;
}
.nav button {
  padding: 4px 6px;
}
.nav a {
  font-weight: bold;
  color: #222;
}

.bottom {
  background: yellow;
  display: block;
  position: fixed;
  width: 100%;
  bottom: 0;
}

    $(".games").slick({
        dots: false,
        infinite: false,
        centerMode: true,
        asNavFor: '.slider',
        slidesToShow: 4,
        slidesToScroll: 1,
            arrows: false,
            accessibility: true,
            focusOnSelect: true,
            waitForAnimate:true,
            draggable:false
            
    });
    
    
    $('.slider').slick({
    draggable: true,
    arrows: false,
    dots: true,
    fade: true,
    speed: 900,
    infinite: false,
    asNavFor: '.games',
    cssEase: 'cubic-bezier(0.7, 0, 0.3, 1)',
    touchThreshold: 100
  });
  
    $('.games').slick('slickGoTo', 0);
  
  //Panels//
  
  // Reveal & Close Panels
var revealPanel = function (buttonReveal, panel, buttonClose) {
  $(document).ready(function() {
    // Reveal panel 
    $(buttonReveal).on('click', function() {
      $(panel).addClass('expanded');
      console.log('hidefor-'+panel);
      $(".content").addClass('hidefor-'+panel.substr(1));
      $(".ip").addClass('hidefor-'+panel.substr(1));
    });
    
    // Close panel
    $(buttonClose).on('click', function() {
      $(panel).removeClass('expanded');
      $(".content").removeClass('hidefor-panel-up');
            $(".ip").removeClass('hidefor-panel-up');
    $('.games').slick('slickCurrentSlide');
    
    });   
    
    // ESC to close Panel
    $(document).bind("keydown", function(e) {
      if (e.keyCode == 27) { 
          $(panel).removeClass('expanded'); 
          $(".content").removeClass('hidefor-panel-up');
         $(".ip").removeClass('hidefor-panel-up');
         $('.games').slick('slickCurrentSlide');
         
      }    
    });
  }); 
}

revealPanel('.reveal-up','.panel-up', '.close');
//revealPanel('.reveal-left','.panel-left', '.close');

    $('#open').on('click', function() {
      $('.panel-up').hide();$('#1').show();
    });
    $('#close').on('click', function() {
      $('.panel-up').hide();$('#2').show();
    });

// Reveal Panel with Shortcuts
$(document).ready(function() {
  $(document).bind("keydown", function(e) {
    if (e.keyCode == 76) { 
    console.log(e.keyCode);
        $('.panel-left').addClass('expanded'); 
    }
    if (e.keyCode == 82) { 
        $('.panel-up').hide();$('#1').show();
        $('.panel-up').addClass('expanded'); 
        $(".content").addClass('hidefor-panel-up');
        $(".ip").addClass('hidefor-panel-up');
    }
  });
});

Solution 1:^[1]

Found a slightly different answer that doesn't require adding tabindex to another element:

$(".games .slick-item[tabindex='0']).focus();

This will set focus on the first visible slide, allowing the left/right arrows to work as intended.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Gleasonator

'Return focus to Slick slider 1.8.1 when its shown again after being hidden

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]