如何解决到达最后一张幻灯片时,使用键盘左箭头键不应向左滚动
我创建了包含 5 张幻灯片的滑块。
它实际上是鼠标滚轮滚动水平滑块,但我希望应该可以选择使用键盘左右箭头键来滚动幻灯片。我在 jquery 下面做了一些工作。
但是当我在第 6 次按左箭头键时,最后(第 5 个)幻灯片向左移动并显示空白屏幕。右箭头键也一样。我希望当我在第 6 次按左箭头键时,
它不应该工作或最后一张幻灯片不向左移动。请帮我解决这个问题。
请参阅我的codepen
jquery
select distinct on (name)
...
from person_person
order by name,created desc
解决方法
我试图重现你的例子,以实现关键事件
你应该知道我已经添加了一个条件来防止额外滚动,所以你的幻灯片将使用幻灯片的宽度来滚动;
if($(this).is(':animated')) return;
我还使用键箭头添加了滚动:
见下面的片段:
$('.slide-container').on('mousewheel DOMMouseScroll',function(event) {
if ($(this).is(':animated')) return;
var delta = Math.max(-1,Math.min(1,(event.originalEvent.wheelDelta || -event.originalEvent.detail)));
$(this).animate({
scrollLeft: ($(this).scrollLeft() - (delta * $('.slide').innerWidth()))
},200);
event.preventDefault();
var $numbers = $('.indicator').children();
//check delta value 1 or -1
var count = (delta == -1) ? $(".indicator .active").index() + 1 : $(".indicator .active").index() - 1;
//if count is less then divs and not -1
if (count < $('.indicator').children().length && count != -1) {
//add active class there
$numbers.eq(count).addClass('active').siblings().removeClass('active');
}
});
$('body').keydown(function(e) {
if ($(".slide-container").is(':animated')) return;
var $indicators = $('.indicator').children();
var count = -1;
if (e.keyCode == 37) { // left
$(".slide-container").animate({
scrollLeft: $(".slide-container").scrollLeft() + ($('.slide').innerWidth())
},200);
count = $(".indicator .active").index() + 1
} else if (e.keyCode == 39) { // right
$(".slide-container").animate({
scrollLeft: $(".slide-container").scrollLeft() + (-$('.slide').innerWidth())
},200);
count = $(".indicator .active").index() - 1
}
if (count < $('.indicator').children().length && count != -1) {
//add active class there
$indicators.eq(count).addClass('active').siblings().removeClass('active');
}
});
body {
font-family: 'Roboto',sans-serif;
overflow: hidden;
border: 1px solid black;
}
* {
margin: 0;
padding: 0;
}
.header {
position: fixed;
width: 100%;
text-align: center;
background: yellow;
}
.horizontal-scroll-section {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding-top: 50px;
}
.slide-container {
display: flex;
width: 90%;
height: 80%;
overflow-x: hidden;
scroll-snap-type: X proximity;
}
.slide {
flex: 0 0 100%;
height: 100%;
font-size: 36px;
}
.slide:nth-child(odd) {
background: red;
}
.slide:nth-child(even) {
background: blue;
}
.indicator {
position: absolute;
top: 50%;
left: 10px;
color: black;
}
.indicator div {
opacity: .5;
}
.indicator div.active {
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="continer">
<div class="header">
<h1 class="title"> Horizontal Scrolling </h1>
<span>(Use Mousewheel)</span>
</div>
<div class="horizontal-scroll-section">
<div class="slide-container">
<div class="slide">A</div>
<div class="slide">B</div>
<div class="slide">C</div>
<div class="slide">D</div>
<div class="slide">E</div>
</div>
</div>
<span class="indicator">
<div class="active">─</div>
<div>─</div>
<div>─</div>
<div>─</div>
<div>─</div>
</span>
</div>
<!--continer ends here-->
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。