我正在设计光滑的滑块,所有工作正常排除隐藏的 div。
当我刷新页面时,它正在加载所有隐藏的 div 而不是隐藏的,所以我设置了 overflow:hidden;
并且它停止在滑块支架外部加载隐藏的 div。
但仍然继续在 slider-holder div 中加载隐藏的 div。
我还需要css修正
我已经尝试过使用和不使用此代码的变体 not:(:nth-child(1));
.slider-holder {
display:none!important
}
.slider-holder.slick-initialized {
display:block!important
}
当我刷新页面时,仍然会在滑块支架中加载隐藏的 div。
我的代码:
$('#slider-holder').slick({
autoplay: true,
autoplaySpeed: 4900,
slidesToShow: 1,
slidesToScroll: 1,
infinite: true,
adaptiveHeight: true,
speed: 200,
swipeToSlide: true,
cssEase: 'linear',
lazyLoad: 'progressive',
});
.featured-slider{
width:50%;
min-height:400px;
position:relative;
display:block;
float:left;
overflow:hidden!important;
}
.slider-holder {
width: 100%;
max-width: 100vw;
display: block;
position: relative;
overflow:hidden!important;
}
.slider {
background-color: lightgray;
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 100%;
max-width: 100vw;
min-height: 400px;
display: block;
overflow:hidden!important;
}
.slider .slider-nav {
position: absolute;
height: 48px;
width: 100%;
max-width: 100%;
top: 0;
bottom: 0;
margin: auto;
pointer-events: none;
}
.slider-nav .prev {
font-size: 32px;
color: #fff;
float: left;
height: 48px;
width: 48px;
line-height: 48px;
text-align: center;
position: relative;
left: 10px;
opacity: 10;
z-index: 2;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0;
pointer-events: auto;
text-align: left;
}
.slider-nav .next {
font-size: 32px;
color: #fff;
float: right;
height: 48px;
width: 48px;
line-height: 48px;
position: relative;
right: 10px;
text-align: center;
opacity: 10;
z-index: 2;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0;
pointer-events: auto;
text-align: right;
background-color: #f8f8f8;
}
.slider-nav > i {
position: relative;
vertical-align: middle;
display: inline-block;
width: 48px;
height: 48px;
}
.slider .slider:hover .slider-nav.prev,
.slider:hover .slider-nav.next {
-moz-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
transition: all 0.3s ease-in-out 0s;
opacity: 0.8;
}
.caption {
position: absolute;
bottom: 0;
left: 0;
padding: 15px 20px 15px 20px;
pointer-events: none
}
.caption h3 {
margin-bottom: 0
}
.caption .title {
font-size: 15px;
color: #fff !important;
line-height: 21px;
font-weight: 500;
overflow-wrap: break-word
}
.caption a {
pointer-events: auto
}
.slider .caption .title {
color: #fff;
font-size: 22px;
font-weight: 500;
line-height: 28px;
margin-top: 10px;
position: relative
}
.slider .caption .title a {
color: #fff
}
.category-label {
background-color: #0a0a0a;
color: #fff;
display: inline-block;
font-size: 11px;
font-weight: 400;
position: relative;
height: 1.8em;
line-height: 1.8;
padding: 0 .7em;
cursor: pointer;
z-index: 100;
pointer-events: auto;
white-space: nowrap
}
.slider .category-label,
.featured-news .news-card .category-label {
position: absolute;
top: 20px;
left: 20px
}
.slider .post-meta {
margin-bottom: 0;
position: relative;
z-index: 14
}
.slider .post-meta a {
color: #b0b0b0;
pointer-events: auto;
}
.slider .caption .category-link {
pointer-events: auto
}
.post-meta {
display: block;
width: 100%;
float: left
}
.post-meta span {
list-style: none;
float: left;
margin-right: 8px;
color: #999;
font-size: 11px;
display: block
}
.post-meta a {
list-style: none;
float: left;
margin-right: 8px;
color: #999;
font-size: 11px;
display: block;
font-weight: 600
}
.post-meta span i {
margin-right: 5px
}
.overlay {
background: rgba(0, 0, 0, 0) linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.46) 50%, rgba(0, 0, 0, 0.80) 100%);
bottom: 0;
content: "";
height: 50%;
opacity: .9;
position: absolute;
transition: all .3s ease-in 0s;
width: 100%;
will-change: opacity
}
.slick-slide{
outline:none!important
}
.slider-holder {
display:none!important
}
.slider-holder.slick-initialized {
display:block!important
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<div class="featured-slider">
<div class="slider-holder" id="slider-holder">
<div class="slider" style="background-image: url('https://static.depositphotos.com/storage/file_upload/file_7492ab772ab5492d96018940debac479.jpg?1628180370')">
<a href="/life-style/children" class="category-link"><span class="category-label" style="background-color: #222222">Children</span></a>
<div class="overlay"></div>
<div class="caption">
<a href="/what-is-gta-online-and-how-to-play-it">
<h3 class="title">Use Trello Codes to Get the Most Out of Slayers Un... 1</h3>
</a>
<p class="post-meta">
<a href="/profile/user">User</a>
<span>Jan 18, 2023</span>
<span><i class="fa-regular fa-comment"></i>0</span>
<span class="mr-0"><i class="fa-solid fa-eye"></i>16</span>
</p>
</div>
</div>
<div class="slider" style="background-image: url('https://static.depositphotos.com/storage/file_upload/file_e285ad0d98faecc0ef4cbee582b77700.jpg?1628180400')">
<a href="/life-style/children" class="category-link"><span class="category-label" style="background-color: #222222">Children</span></a>
<div class="overlay"></div>
<div class="caption">
<a href="/what-is-gta-online-and-how-to-play-it">
<h3 class="title">Use Trello Codes to Get the Most Out of Slayers Un... 2</h3>
</a>
<p class="post-meta">
<a href="/profile/user">User</a>
<span>Jan 18, 2023</span>
<span><i class="fa-regular fa-comment"></i>0</span>
<span class="mr-0"><i class="fa-solid fa-eye"></i>16</span>
</p>
</div>
</div>
</div>
<div id="slider-nav" class="slider-nav">
<button class="prev">
<span class="notext">Back</span>
<i class="fa-solid fa-chevron-left"></i>
</button>
<button class="next">
<i class="fa-solid fa-chevron-right"></i>
<span class="notext">Next</span>
</button>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>