Javascript 在第一张幻灯片上禁用 Prev Control 并在最后一张幻灯片上禁用 Next control
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/33789586/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable Prev Control on first slide and disable Next control on last slide
提问by gwar9
using Slick and looking for a way to have the prev control disabled and hidden until the user clicks the next arrow. Similarly I want the Next control to become disabled and hidden once the user reaches the last slide.
使用 Slick 并寻找一种方法来禁用和隐藏上一个控件，直到用户单击下一个箭头。同样，我希望 Next 控件在用户到达最后一张幻灯片后被禁用和隐藏。
A good illustration of what I'm trying to accomplish is here
我正在努力完成的工作的一个很好的例子是here
Does slick have an attribute already for this that I have overlooked? Is this something that maybe can be accomplished using CSS by adding a disabled class?
slick 是否已经有一个我忽略的属性？这是否可以通过添加禁用类使用 CSS 来完成？
The only thing similar I have found is this
我发现的唯一类似的东西是这个
$('.pages .slider').slick({
autoplay: true,
autoplaySpeed: 5000,
infinite: false,
onAfterChange: function(slide, index) {
if(index == 4){
$('.pages .slider').slickPause();
But its not exactly what I am looking for.
但它不正是我正在寻找的。
采纳答案by Raphael Parent
Solution
解决方案
You can add the css pointer-events: noneto your button. That css property disable all event on an element. So something like that.
您可以将 css 添加pointer-events: none到您的按钮。该 css 属性禁用元素上的所有事件。所以类似的事情。
// Slick stuff
...
onAfterChange: function(slide, index) {
if(index === 4) {
$('.slick-next').css('pointer-events', 'none')
}
else {
$('.slick-next').css('pointer-events', 'all')
}
}
And something on the same guideline for .slick-prevelement.
和.slick-prev元素相同的指南。
In that solution you should get the function out of the configand only put a reference to it with something like this.
在该解决方案中，您应该从配置中获取该功能，并仅使用类似的内容对其进行引用。
// Inside slick config
onAfterChange: afterChange
// Below somewhere
var afterChange = function(slide, index) { //stuff here }
Also check to see if there is a way to get the length of the slider and verify it instead of hardcoding 4in the ifstatement. You can probably do something like $('.slide').length
还要检查是否有办法获取滑块的长度并验证它而不是4在if语句中进行硬编码。你可能可以做类似的事情$('.slide').length
Edit
编辑
Here's how to implement the afterChange()function.
下面介绍如何实现该afterChange()功能。
$(document).ready(function(){
$('.scrollable').slick({
dots: false,
slidesToShow: 1,
slidesToScroll: 3,
swipeToSlide: true,
swipe: true,
arrows: true,
infinite: false,
});
$('.scrollable').on('afterChange', function (event, slick, currentSlide) {
if(currentSlide === 2) {
$('.slick-next').addClass('hidden');
}
else {
$('.slick-next').removeClass('hidden');
}
if(currentSlide === 0) {
$('.slick-prev').addClass('hidden');
}
else {
$('.slick-prev').removeClass('hidden');
}
})
});
And some CSS, If you wanna do animation you should do it here.
还有一些 CSS，如果你想做动画，你应该在这里做。
.slick-prev.hidden,
.slick-next.hidden {
opacity: 0;
pointer-events:none;
}
回答by Jeff Monteiro
Just use infite: false and create a custom css for class slick-disabled. Eg.
只需使用 infite: false 并为类 slick-disabled 创建自定义 css。例如。
JS - jQuery
JS - jQuery
$('.my-slider').slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
});
CSS
CSS
.slick-disabled {
opacity: 0;
pointer-events:none;
}
回答by Andre Nimczick
There is a simple Way to style the Prev-/Next-Buttons if the first or last Item is reached. Make shure that the Infinite Mode is set to false. Then style the Buttons like this:
如果到达第一个或最后一个 Item，则有一种简单的方法来设置 Prev-/Next-Buttons 的样式。确保无限模式设置为 false。然后像这样设置按钮的样式：
.slick-arrow[aria-disabled="true"]{
opacity: .5;
}That's all you need!
这就是你所需要的！
回答by York Wang
A very simple solution is:
一个非常简单的解决方案是：
set the infinite to false. eg
$('.my-slider').slick({ infinite: false });add the following css
.slick-disabled { display: none; pointer-events:none; }
将无限设置为假。例如
$('.my-slider').slick({ infinite: false });添加以下css
.slick-disabled { display: none; pointer-events:none; }
and that is it.
就是这样。
回答by user10652642
Add CSS code:
添加 CSS 代码：
.slick-disabled {
display: none !important;
}
回答by Anupam Maurya
Folks,
各位，
Put
放
arrows: false,
in setting JSON config. So simple!!
在设置 JSON 配置中。很简单！！
回答by MrBoJangles
I modified the behavior of slick.js directly, like so:
我直接修改了 slick.js 的行为，如下所示：
// making the prevArrow not show on init:
if (_.options.infinite !== true) {
_.$prevArrow
.addClass('slick-disabled')
.attr('aria-disabled', 'true')
.css('display', 'none'); // The new line of code!
}
And:
和：
if (_.options.arrows === true &&
_.slideCount > _.options.slidesToShow &&
!_.options.infinite
) {
_.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
_.$nextArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
if (_.currentSlide === 0) {
_.$prevArrow.addClass('slick-disabled').attr('aria-disabled', 'true').css('display', 'none');
_.$nextArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
} else if (_.currentSlide >= _.slideCount - _.options.slidesToShow && _.options.centerMode === false) {
_.$nextArrow.addClass('slick-disabled').attr('aria-disabled', 'true').css('display', 'none');
_.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
} else if (_.currentSlide >= _.slideCount - 1 && _.options.centerMode === true) {
_.$nextArrow.addClass('slick-disabled').attr('aria-disabled', 'true').css('display', 'none');
_.$prevArrow.removeClass('slick-disabled').attr('aria-disabled', 'false').css('display', '');
}
}
Just a matter of using the jquery .css()method and setting display. Seems to work quite dandily.
只是使用 jquery.css()方法和设置的问题display。似乎工作得相当潇洒。
回答by user7824557
another way to do it is to slide to the same slide when you swipe(previous) on the first slide or swipe(next) on the last slide. Use swiper method swiper.SlideTo(n,n,m);
另一种方法是当您在第一张幻灯片上滑动（上一张）或在最后一张幻灯片上滑动（下一张）时滑动到同一张幻灯片。使用 swiper 方法 swiper.SlideTo(n,n,m);
