javascript - 当隐藏后再次显示时,将焦点返回到 Slick 滑块 1.8.1
问题描述
正如您在我的示例中看到的,我可以在滑块中移动并使用鼠标单击幻灯片。我也可以使用键盘移动,但是当我单击幻灯片并退出时,除非再次单击滑块,否则我无法移动。
我的问题:有没有办法只使用按键来保持或返回滑块?
就像按 A 进入将显示面板 1 的幻灯片 #1,然后按退出并使用箭头移动到幻灯片 #2 并按 A 进入面板 2 ?
先感谢您。
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;
}
JS
$(".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');
}
});
});
解决方案
您要做的是.games
在幻灯片中使用 ESC 或关闭按钮时将焦点带回滑块。请注意,您只能将焦点设置在可以获取焦点的元素上,例如a
,tabindex
或input
滑块使用tabindex
可聚焦元素,因此我们可以获取滑块的 tabindex 并focus()
像这样使用:
$(".games .slick-list").attr('tabindex', 0).focus();
您可以在任何想要将焦点带回滑块的地方使用它,因此在您的示例中,您将希望在以下位置使用它:
- 当幻灯片初始化时
/* 1. put focus on the first slide on page load */
/* Note this must be called BEFORE the slider is initialised */
$('.games').on('init', function(event, slick) {
$(".games .slick-list").attr('tabindex', 0).focus();
});
$(".games").slick({
/* Slider settings here... */
});
- 幻灯片图像关闭的任何地方,例如在 ESC 键上或单击“关闭”按钮时:
$(buttonClose).on('click', function() {
/* do button-close actions */
/* 2. put focus back on the current slide after close button clicked */
$(".games .slick-list").attr('tabindex', 0).focus();
});
(注意:为了让它与您的演示代码完全配合,我必须a
在滑块中的每个图像周围添加所有链接,因为这似乎是 CSS 正在处理的内容)
工作片段:
/* 1. put focus on the slider on page load after it is set up */
$('.games').on('init', function(event, slick) {
$(".games .slick-list").attr('tabindex', 0).focus();
});
$(".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');
$(".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');
/* 2. put focus on back the slider after close button clicked */
$(".games .slick-list").attr('tabindex', 0).focus();
});
// 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');
/* 2. put focus on back the slider after ESC */
$(".games .slick-list").attr('tabindex', 0).focus();
}
});
});
}
revealPanel('.reveal-up', '.panel-up', '.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');
}
});
});
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;
}
<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" />
<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"><img src="http://placehold.it/288x288?text=2"></a>
</div>
<div>
<a style="color:white;" href="#3" class="reveal-up"><img src="http://placehold.it/288x288?text=3"></a>
</div>
<div>
<a style="color:white;" href="#4" class="reveal-up"><img src="http://placehold.it/288x288?text=4"></a>
</div>
<div>
<a style="color:white;" href="#5" class="reveal-up"><img src="http://placehold.it/288x288?text=5"></a>
</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>
推荐阅读
- save - 使用 QB64 将值保存在 .txt 文档中
- pytorch - Pyro 更改 AutodiagonalNormal 设置
- google-maps - 尝试添加平台 iOS 时出错 googlemaps
- javascript - 如何使用 forEach 方法准确记录我需要的内容
- sql - 了解 where 子句与 join
- watchkit - 是否有 API 可以检查用户的 Apple Watch 上是否启用了密码?
- php - 如何配置可视化学习代码用docker识别php?
- java - 如何在没有 WSConnection 的情况下设置客户端信息
- python - 与正在执行的用户或可执行文件所在的位置一起安装 python 环境是否更快
- excel - 复制和粘贴数据之前的 VBA 过滤器