為什么我的帶有指示器的光滑滑塊不起作用？
[英]Why my slick slider with indicator not working?
問題描述
我有一個關於光滑滑塊的問題。 我制作了一個光滑的滑塊，我想為每張幻燈片創建一個指示器。 我在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;
});
1 個解決方案
解決方案1
1 已采納 2020-08-28 09:28:29
看看這個片段：
#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>
為什么我的自定義 Slick slider 在網站上沒有對齊和正常工作？
[英]Why is my custom Slick slider not aligning and working properly on the website?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.