页面加载后选择滑动滑块1.3.5，使其具有使用箭头键导航的焦点

Question

我希望在加载页面后自动选择滑块。这意味着我希望能够在页面加载后立即使用箭头键浏览滑块，而无需首先单击它。

这是工作符号滑块，但在箭头键工作之前，我必须先点击它。

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

HTML

<section class="top_slider">
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
</section>

CSS

.slider {
background-color: white;
margin: 100px auto;
height: auto!important;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}

JS-

$(".top_slider").slick({
dots: true,
infinite: true,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
});

Answer 1

1。加载滑块后将焦点放在滑块上

在滑块初始化后，您可以将焦点放在滑块上，这样就可以使用键盘，而无需切换到它或首先单击它。。。但请注意，您只能将焦点设置在可以获得焦点的元素上，例如a、button或input。你的第一张幻灯片包含一个链接，所以我们可以使用它。

在Slick 1.3.9或更低版本(您正在使用(中，您可以使用onInit回调并在.slide-track的第一个div中选择链接，如下所示：

$(".top_slider").slick({
dots: true,
infinite: false,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
onInit: function() {
$(".top_slider .slick-track div:first-of-type a").focus();
},
});

在Slick 1.4.0及以上版本中，您在初始化滑块之前使用回调事件，并且您可以使用.slick-current类更容易地选择第一张幻灯片(注意，您仍然需要在幻灯片中选择一个可聚焦元素(：

/* Bind the event BEFORE initialising slick */
$('.top_slider').on('init', function(event, slick){
$(".top_slider .slick-current a").focus();
});
/* Now you can initialise Slick */
$(".top_slider").slick({
/*Settings....*/
});

2.页面加载时自动滚动到滑块

当页面加载时，您只需要以下行即可使页面向下滚动到滑块：

$( document ).ready(function() {
$("html, body").animate({ scrollTop: $('.top_slider').offset().top}, 500);
});

我们使用.top_slider类获得滑块顶部的位置，并在animate函数中将scrollTop设置为该值-这将动画滚动到该位置。

工作代码段将这些放在一起：

$('.top_slider').on('init', function(event, slick) {
$(".top_slider .slick-current a").focus();
});
$(".top_slider").slick({
dots: true,
infinite: false,
centerMode: true,
slidesToShow: 3,
slidesToScroll: 1,
onInit: function() {
$(".top_slider .slick-track div:first-of-type a").focus();
},
});
$('html,body').animate({ scrollTop: $('.top_slider' ).offset().top}, 500);

.slider {
background-color: white;
margin: 100px auto;
height: auto!important;
}
.slick-slide {
margin: 0px 20px;
}
.slick-slide img {
width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css">
<h1>HEADER HERE...</h1>
<h2>Some more content to scroll past...</h2>
<section class="top_slider">
<div>
<a href="google.com"><img src="http://placehold.it/288x288?text=1"></a>
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
<div>
<img src="http://placehold.it/288x288?text=1">
</div>
</section>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<p>Content to make the page long enough to see the scroll...</p>
<script src="https://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>