[英]Disable Prev Control on first slide and disable Next control on last slide
using Slick and looking for a way to have the prev control disabled and hidden until the user clicks the next arrow.使用 Slick 并寻找一种方法来禁用和隐藏上一个控件,直到用户单击下一个箭头。 Similarly I want the Next control to become disabled and hidden once the user reaches the last slide.
同样,我希望 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? slick 是否已经有一个我忽略的属性? Is this something that maybe can be accomplished using CSS by adding a disabled class?
这是否可以通过添加禁用类使用 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.但它不正是我正在寻找的。
Just use infite: false and create a custom css for class slick-disabled.只需使用 infite: false 并为类 slick-disabled 创建自定义 css。 Eg.
例如。
JS - jQuery JS - jQuery
$('.my-slider').slick({
infinite: false,
slidesToShow: 1,
slidesToScroll: 1
});
CSS CSS
.slick-disabled {
opacity: 0;
pointer-events:none;
}
You can add the css pointer-events: none
to your button.您可以将 css
pointer-events: none
到您的按钮。 That css property disable all event on an element.该 css 属性禁用元素上的所有事件。 So something like that.
所以类似的事情。
// 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-prev
element.和
.slick-prev
元素相同的指南。
In that solution you should get the function out of the config and 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 4
in the if
statement.还要检查是否有办法获取滑块的长度并验证它,而不是在
if
语句中硬编码4
。 You can probably do something like $('.slide').length
您可能可以执行类似
$('.slide').length
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;
}
A very simple solution is:一个非常简单的解决方案是:
set the infinite to false.将无限设置为假。 eg
例如
$('.my-slider').slick({ infinite: false });
add the following css添加以下css
.slick-disabled { display: none; pointer-events:none; }
and that is it.就是这样。
There is a simple Way to style the Prev-/Next-Buttons if the first or last Item is reached.如果到达第一个或最后一个 Item,则有一种简单的方法来设置 Prev-/Next-Buttons 的样式。 Make shure that the Infinite Mode is set to false.
确保无限模式设置为 false。 Then style the Buttons like this:
然后像这样设置按钮的样式:
.slick-arrow[aria-disabled="true"]{ opacity: .5; }
That's all you need!这就是你所需要的!
Add CSS code:添加 CSS 代码:
.slick-disabled {
display: none !important;
}
Very Simple Solution in Slick Slider Settings Slick Slider Settings 中非常简单的解决方案
$('.my-slider').slick({
infinite: false
});
Above settings will disable PREV and NEXT Arrows.以上设置将禁用 PREV 和 NEXT 箭头。 But for hiding disabled arrows you need below CSS:
但是要隐藏禁用的箭头,您需要在 CSS 下方:
.slick-disabled {
display: none !important;
}
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
.只是使用 jquery
.css()
方法和设置display
。 Seems to work quite dandily.似乎工作得相当潇洒。
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);
Folks,各位,
Put放
arrows: false,
in setting JSON config.在设置 JSON 配置中。 So simple!!
很简单!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.