在页面加载后选择一个光滑的滑块1.3.5，这样它就可以用箭头键导航。
在页面加载后选择一个光滑的滑块1.3.5，这样它就可以用箭头键导航。
提问于 2020-08-22 03:29:38
我希望在加载页面后自动选择滑块。这意味着我希望能够在页面加载后使用箭头键在滑块中导航，而不首先单击它。
这是工作滑块，但我必须先点击它，在箭头键工作之前。
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,
});回答 1
Stack Overflow用户
回答已采纳
发布于 2020-08-22 03:58:24
1.在滑块加载后将焦点放在滑块上
初始化滑块后，您可以将焦点放在滑块上，这样就可以使用键盘，而无需对其进行选项卡或先单击它。但是请注意，您只能将焦点设置在可以获得焦点的元素上，例如a、button或input。你的第一张幻灯片包含一个链接，所以我们可以使用它。
在slick1.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();
},
});在slick1.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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63532295
复制相关文章
相似问题
腾讯云开发者
