Javascript 在第三张幻灯片上使用slick js显示弹出模式
您好，我有一个问题，我有一个关于slick.js的问题。我有一个功能，我有一个滑块。如果您想查看更多有关内容的信息，将显示注册模式 我已经做了如下代码。有没有可能，我希望滑块正常运行，直到第二张幻灯片，第三张幻灯片出现时，模态寄存器才会显示 当用户想要进入第三张幻灯片时，它将继续被引导到模态寄存器，这样用户就无法进入第四张幻灯片。可能吗 有人能帮我吗？我不知道怎么做 我的JSJavascript 在第三张幻灯片上使用slick js显示弹出模式,javascript,jquery,bootstrap-modal,slick.js,Javascript,Jquery,Bootstrap Modal,Slick.js,您好，我有一个问题，我有一个关于slick.js的问题。我有一个功能，我有一个滑块。如果您想查看更多有关内容的信息，将显示注册模式 我已经做了如下代码。有没有可能，我希望滑块正常运行，直到第二张幻灯片，第三张幻灯片出现时，模态寄存器才会显示 当用户想要进入第三张幻灯片时，它将继续被引导到模态寄存器，这样用户就无法进入第四张幻灯片。可能吗 有人能帮我吗？我不知道怎么做 我的JS var $slider = $('.slider-banner'); var $progres
var $slider = $('.slider-banner');
var $progressBar = $('.progress');
var $status = $('.pagingInfo');
var $progressBarLabel = $( '.slider__label' );
$slider.on('init reInit afterChange', function (event, slick, currentSlide, nextSlide) {
//currentSlide is undefined on init -- set it to 0 in this case (currentSlide is 0 based)
if(!slick.$dots){
return;
}
var i = (currentSlide ? currentSlide : 0) + 1;
$status.text((i-1) + '-' + (i) + '/' + slick.slideCount);
});
// Progress Bar
$slider.on('beforeChange', function(event, slick, currentSlide, nextSlide) {
var calc = ( (nextSlide) / (slick.slideCount-1) ) * 100;
$progressBar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc );
$progressBarLabel.text( calc + '% completed' );
});
$('.slider-banner').slick({
// arrows: false,
dots: true,
slidesToShow: 2,
slidesToScroll: 1,
prevArrow: "<button class='arrowBannerLeft'><i class='fas fa-chevron-left'></i></button>",
nextArrow: "<button class='arrowBannerRight' data-toggle='modal' data-target='#exampleModal'><i class='fas fa-chevron-right'></i></button>",
});
#bannerHome{
height: 100vh ;
background-color: #c6c6c6;
}
#bannerHome #homeBanner {
height: 100vh ;
padding: 0;
position:relative;
}
#bannerHome #homeBanner .slider-banner {
height: 100%;
width: 100%;
}
#bannerHome #homeBanner .slider-banner .item {
height: 100vh ;
margin: 0 5px;
}
#bannerHome #homeBanner .slider-banner .item .content{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
}
#bannerHome #homeBanner .slider-banner .item .content .second-layer .title{
width:55%;
}
#bannerHome #homeBanner .slider-banner .item .content .second-layer h1{
color: #fff;
font-size: 25px;
line-height: 25px;
}
.arrowBannerLeft{
position: absolute;
background: transparent;
border: none;
top: 50%;
left: 2%;
transform: translate(-2%, -50%);
z-index: 1;
}
.arrowBannerLeft:focus{
outline: none;
box-shadow: none;
}
.arrowBannerRight{
position: absolute;
background: transparent;
border: none;
top: 50%;
right: 2%;
transform: translate(-2%, -50%);
z-index: 1;
}
.arrowBannerRight:focus{
outline: none;
box-shadow: none;
}
.pagingInfo{
position:absolute;
bottom: 7%;
left:50%;
transform:translate(-50%,-50%);
}
.progress {
position:absolute;
bottom: 5%;
left:50%;
transform:translate(-50%,-50%);
display: block;
width: 100%;
height: 5px;
border-radius: 5px;
overflow: hidden;
background-color: #f5f5f5;
background-image: linear-gradient(to right, #ED951E ,#ED951E);
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size .4s ease-in-out;
}
ul.slick-dots {
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet"/>
<section id="bannerHome">
<div class="container-fluid">
<div class="row">
<div class="col-12" id="homeBanner">
<div class="slider-banner">
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="second-layer">
<div class="title">
<h1>
Lorem ipsum dolor sit amet.
</h1>
</div>
</div>
</div>
</div>
</div>
<!-- Number Indicator -->
<span class="pagingInfo"></span>
<!-- Progress Indicator -->
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<span class="slider__label sr-only"></span>
</div>
</div>
</div>
</section>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。
Lorem ipsum dolor sit amet。