如何解决为什么带有指示器的光滑滑条不起作用?
我对光滑的滑块有疑问。我已经制作了一个光滑的滑块,我想为每个幻灯片创建一个指示器。我有Codepen中的代码,请检查。
我想要的
当我在第一张幻灯片上时,活动边框在滑块1指示器上,当我在幻灯片2上时,指示器在滑块2指示器上,如下所示。
我一直在寻找几种方法,但仍然无法使用。如果您知道如何,请帮助我。因为我不知道如何制作这样的自定义指标。我需要你的帮助。
HTML
<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="first-layer">
<p>01</p>
<p>01</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30,2020</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="first-layer">
<p>02</p>
<p>02</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30,2020</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-indicator">
<div class="slider-1 active">
For Slider 1
</div>
<div class="slider-2">
For Slider 2
</div>
</div>
</div>
</div>
</div>
</section>
CSS
#bannerHome{
height: 100vh ;
background-color: #c6c6c6;
#homeBanner {
height: 100vh ;
padding: 0;
.slider-banner {
height: 100%;
width: 100%;
.item {
height: 100vh ;
.content{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
.first-layer{
position: absolute;
top: 45%;
left: 0;
transform: translate(0,-45%);
p {
color: #fff;
font-size: 350px;
opacity: .15;
&:nth-child(2){
position: absolute;
font-size:45px;
top: 40%;
left: 25%;
transform: translate(-25%,-40%);
opacity: 1;
&::before{
content: '';
position: absolute;
width: 20px;
height: 3px;
background-color: #fff;
top: 10px;
left: -50px;
}
}
}
}
.second-layer{
.title{
width:55%;
h1{
color: #fff;
font-size: 25px;
line-height: 25px;
}
}
.date{
display: flex;
position: relative;
margin-top: 30px;
p{
color: #e6e6e6;
margin-right: 10px;
font-size: 15px;
&:nth-child(2){
padding-left: 10px;
position: relative;
display:none;
&::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
border-left: 1px solid #e6e6e6;
height: 100%;
}
}
}
}
}
}
}
}
}
}
.arrowBannerLeft{
position: absolute;
background: transparent;
border: none;
top: 55%;
left: 5%;
transform: translate(-5%,-55%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.arrowBannerRight{
position: absolute;
background: transparent;
border: none;
top: 48%;
left: 5%;
transform: translate(-5%,-48%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.slider-indicator {
position: absolute;
display: flex;
bottom: 15%;
left: 50%;
transform: translate(-50%,-15%);
z-index: 1;
.slider-1,.slider-2 {
color: #fff;
padding: 10px 40px;
border-top: 1px solid #000;
&.active{
border-top: 3px solid #EB961D;
}
}
}
JS
var bannerSlider = $('.slider-banner');
$('.slider-banner').slick({
// arrows: false,// dots: true,slidesToShow: 1,slidesToScroll: 1,prevArrow: "<button class='arrowBannerLeft'><img src='assets/img/component/icon/arrowBlockLeft.svg' class='img-fluid'></button>",nextArrow: "<button class='arrowBannerRight'><img src='assets/img/component/icon/arrowBlockRight.svg' class='img-fluid'></button>",});
$(".arrowBannerLeft").on("click",function() {
$('.slider-banner').slick("slickNext");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide")
});
$(".arrowBannerRight").on("click",function() {
$(".slider-banner").slick("slickPrev");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide");
});
$('.slider-banner').on('beforeChange',function(event,slick,currentSlide,nextSlide) {
var active_val = parseInt($(".slider-indicator .slide").addClass('active'));
var currentSlideIndex = nextSlide;
});
解决方法
查看此代码段:
#bannerHome{
height: 100vh ;
background-color: #c6c6c6;
#homeBanner {
height: 100vh ;
padding: 0;
.slider-banner {
height: 100%;
width: 100%;
.item {
height: 100vh ;
.content{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
height: 100%;
padding: 0 10%;
.first-layer{
position: absolute;
top: 45%;
left: 0;
transform: translate(0,-45%);
p {
color: #fff;
font-size: 350px;
opacity: .15;
&:nth-child(2){
position: absolute;
font-size:45px;
top: 40%;
left: 25%;
transform: translate(-25%,-40%);
opacity: 1;
&::before{
content: '';
position: absolute;
width: 20px;
height: 3px;
background-color: #fff;
top: 10px;
left: -50px;
}
}
}
}
.second-layer{
.title{
width:55%;
h1{
color: #fff;
font-size: 25px;
line-height: 25px;
}
}
.date{
display: flex;
position: relative;
margin-top: 30px;
p{
color: #e6e6e6;
margin-right: 10px;
font-size: 15px;
&:nth-child(2){
padding-left: 10px;
position: relative;
display:none;
&::before{
content: '';
position: absolute;
left: 0;
bottom: 0;
border-left: 1px solid #e6e6e6;
height: 100%;
}
}
}
}
}
}
}
}
}
}
.arrowBannerLeft{
position: absolute;
background: transparent;
border: none;
top: 55%;
left: 5%;
transform: translate(-5%,-55%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.arrowBannerRight{
position: absolute;
background: transparent;
border: none;
top: 48%;
left: 5%;
transform: translate(-5%,-48%);
z-index: 1;
&:focus{
outline: none;
box-shadow: none;
}
}
.slider-indicator {
position: absolute;
display: flex;
bottom: 15%;
left: 50%;
transform: translate(-50%,-15%);
z-index: 1;
}
.slider-1,.slider-2 {
color: #fff;
padding: 10px 40px;
border-top: 1px solid #000;
}
.slider-1.active,.slider-2.active{
border-top: 3px solid #EB961D;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Bootstrap core CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css" integrity="sha512-wR4oNhLBHf7smjy0K4oqzdWumd+r5/+6QO/vDda76MW5iug4PT7v86FoEkySIJft3XA0Ae6axhIvHrqwm793Nw==" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css" integrity="sha512-6lLUdeQ5uheMFbWm3CP271l14RsX1xtx+J5x2yeIDkkiBpeVTNhTqijME7GgRKKi6hCqovwCoBTlRBEC20M8Mg==" crossorigin="anonymous" />
<title>Test</title>
</head>
<body>
<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="first-layer">
<p>01</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30,2020</p>
</div>
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="first-layer">
<p>02</p>
</div>
<div class="second-layer">
<div class="title">
<h1>
Digitalisasi dan Industri 4.0: Manajemen data untuk perkembangan tren transformasi
</h1>
</div>
<div class="date">
<p>Lintasarta</p>
<p>July 30,2020</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-indicator">
<div class="slider-1 active">
For Slider 1
</div>
<div class="slider-2">
For Slider 2
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<!-- Bootstrap tooltips -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<!-- Bootstrap core JavaScript -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js" integrity="sha512-XtmMtDEcNz2j7ekrtHvOVR4iwwaD6o/FUJe6+Zq+HgcCsk3kj4uSQQR8weQ2QVj1o0Pk6PwYLohm206ZzNfubg==" crossorigin="anonymous"></script>
<script type="text/javascript">
var bannerSlider = $('.slider-banner');
$('.slider-banner').slick({
// arrows: false,// dots: true,slidesToShow: 1,slidesToScroll: 1,prevArrow: "<button class='arrowBannerLeft'><i class='fas fa-chevron-left'></i></button>",nextArrow: "<button class='arrowBannerRight'><i class='fas fa-chevron-right'></i></button>",});
$(".arrowBannerLeft").on("click",function() {
$('.slider-banner').slick("slickNext");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide")
});
$(".arrowBannerRight").on("click",function() {
$(".slider-banner").slick("slickPrev");
var currentSlideIndex = $(".slider-banner").slick("slickCurrentSlide");
});
$('.slider-banner').on('beforeChange',function(event,slick,currentSlide,nextSlide) {
$(".slider-"+(nextSlide+1)).addClass('active');
$(".slider-"+(currentSlide+1)).removeClass('active');
var currentSlideIndex = nextSlide;
});
</script>
</body>
</html>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。