如何解决如果快速滚动，SlickJS幻灯片不会移动
如果使用箭头键快速滚动，则带有图片的大幻灯片将保留在原位，您必须缓慢移动才能看到它。阅读SlickJS的文档，测试“ waitforAnimate”但不起作用。我也在考虑设置一个延迟，然后再移到下一张幻灯片，这样我可以避免此错误。有什么想法吗？
https://codepen.io/jinzagon/details/gOrggNv
HTML
<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" href"www.google.com" 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>
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.3,1);
transition: all 1s cubic-bezier(0.7,1);
}
.slideshow .item {
height: 100%;
position: relative;
z-index: 1;
}
.slideshow .item img {
width: 100%;
-webkit-transition: all 1s cubic-bezier(0.7,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').on('init',function(event,slick) {
$(".games .slick-current a").focus();
});
$(".games").slick({
dots: false,arrows:false,infinite: false,centerMode: true,asNavFor: '.slider',slidesToShow: 4,slidesToScroll: 1,onInit: function() {
$(".games .slick-track div:first-of-type a").focus();
},});
// $('html,body').animate({ scrollTop: $('.games' ).offset().top},0);//
$('.slider').slick({
draggable: true,arrows: false,dots: true,fade: true,speed: 900,asNavFor: '.games',cssEase: 'cubic-bezier(0.7,1)',touchThreshold: 100
});
//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');
});
// 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-current a").focus();
}
});
});
}
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');
}
if (e.keyCode == 39) {
console.log(e.keyCode);
$(".games .slick-current a").focus();
}
if (e.keyCode == 37) {
console.log(e.keyCode);
$(".games .slick-current a").focus();
}
});
});
解决方法
通过在我的第一张幻灯片中添加speed: 900,来解决此问题。两张幻灯片的速度都必须相同。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
