我写了一个javascript函数来禁用"之前的#34;当前幻灯片为0时的箭头,并禁用" next"我到达最后一张幻灯片时的箭头。我想要"之前"页面加载时仅禁用一次箭头,之后即使在到达第一张幻灯片(当前幻灯片:0)后,我想要"之前的"箭头可见。目前,我有3张幻灯片(0,1,2)
我尝试使用onload()函数仅在第一次加载时隐藏箭头,但这并不起作用。
$(function(){
$('.hero-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
dots:false,
infinite: true
});
var currentSlide = $('.hero-slider').slick('slickCurrentSlide');
if(currentSlide==0)
{
$('.slick-prev').hide();
}
else if(currentSlide==2)
{
$('.slick-next').hide();
}
});
$('.hero-slider').on('afterChange', function(){
console.log($('.hero-slider').slick('slickCurrentSlide'));
var currentSlide = $('.hero-slider').slick('slickCurrentSlide');
if(currentSlide==0)
{
$('.slick-prev').hide();
$('.slick-next').show();
}
else if(currentSlide==2)
{
$('.slick-next').hide();
$('.slick-prev').show();
}
if(currentSlide>0 && currentSlide<2)
{
$('.slick-prev').show();
$('.slick-next').show();
}
});
&#13;
答案 0 :(得分:0)
仅保留滑块初始化代码并删除事件处理程序和其他代码。
jQuery(function($) {
$('.hero-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
dots:false,
infinite: true
});
});
jQuery(function($) {
$('.hero-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
dots:false,
infinite: true
});
});
&#13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<section class="info-banner">
<div class="hero-slider">
<div class="info-slider-content" style="background-image: url(images/visual2.jpg);">
<div class="banner-content info-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </p>
</div>
</div>
<div class="info-slider-content" style="background-image: url(images/visual3.jpg);">
<div class="banner-content info-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
</div>
</div>
<div class="info-slider-content" style="background-image: url(images/visual2.jpg);">
<div class="banner-content info-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et </p>
</div>
</div>
</div>
</section>
&#13;
更新:如果您想最初隐藏按钮,请在更改幻灯片后更新事件处理程序中的按钮一次(使用one()
方法仅执行一次)。
jQuery(function($) {
$('.hero-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
dots: false,
infinite: true
});
var currentSlide = $('.hero-slider').slick('slickCurrentSlide');
$('.slick-prev').toggle(currentSlide != 0);
$('.slick-next').toggle(currentSlide != 2);
$('.hero-slider').one('afterChange', function() {
$('.slick-prev,.slick-next').show();
});
});
jQuery(function($) {
$('.hero-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
dots: false,
infinite: true
});
var currentSlide = $('.hero-slider').slick('slickCurrentSlide');
$('.slick-prev').toggle(currentSlide != 0);
$('.slick-next').toggle(currentSlide != 2);
$('.hero-slider').one('afterChange', function() {
$('.slick-prev,.slick-next').show();
});
});
&#13;
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>
<section class="info-banner">
<div class="hero-slider">
<div class="info-slider-content" style="background-image: url(images/visual2.jpg);">
<div class="banner-content info-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>
</div>
</div>
<div class="info-slider-content" style="background-image: url(images/visual3.jpg);">
<div class="banner-content info-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa</p>
</div>
</div>
<div class="info-slider-content" style="background-image: url(images/visual2.jpg);">
<div class="banner-content info-content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et</p>
</div>
</div>
</div>
</section>
&#13;