我想使用光滑的滑块并具有最大数量的幻灯片。所有10张幻灯片都已经编码,我想使用一个变量,以便只显示一些幻灯片,或者将一个类(如“隐藏幻灯片”)放到不想显示的幻灯片上幻灯片。
圆滑的滑块具有删除幻灯片的功能,但是通过单击按钮即可工作并删除最后一张幻灯片。我只想显示最大数量的幻灯片,或将一个类放到要隐藏的幻灯片上。
有人可以帮忙吗?
<section class="main-slider">
<div class="container-fluid sl">
<!-- Note that `.slider-content` wraps `.row` -->
<div class="slider-content">
<div class="row">
<div class="col-md-6" style="background-color:blue;">
<div class="banner-title mktoText text-center" id="BannerTitle1" mktoName="Header Image - Title" >
<h1>Lalalaalal</h1>
</div>
<div class="banner-subtitle text-center" id="BannerSubTitle1" >
<p>The new blah</p>
</div>
</div>
<div class="col-md-6" style="background-color:red;">
<div class="body-background-image">
<div class="banner-title text-center" id="BannerTitle2" >
<h1>Lalalalala</h1>
</div>
<div class="banner-subtitle text-center" id="BannerSubTitle2" mktoName="Header Image - SubTitle" >
<p>The new blah</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-content Test">
<div class="row">
<div class="col-md-6" style="background-color:red;">
<div class="banner-title text-center" id="BannerTitle3" >
<h1>alalalalal</h1>
</div>
<div class="banner-subtitle text-center" id="BannerSubTitle3" >
<p>The blah</p>
</div>
</div>
<div class="col-md-6" style="background-color:blue;">
<div class="body-background-image">
<div class="banner-title text-center" id="BannerTitle4" >
<h1>lalalallala</h1>
</div>
<div class="banner-subtitle text-center" id="BannerSubTitle4" >
<p>The new blah</p>
</div>
</div>
</div>
</div>
</div>
<div class="slider-content">
<div class="row">
<div class="col-md-6" style="background-color:blue;">
<div class="banner-title text-center" id="BannerTitle5" >
<h1>lallaklalala</h1>
</div>
<div class="banner-subtitle text-center" id="BannerSubTitle5" >
<p>The new blah</p>
</div>
</div>
<div class="col-md-6" style="background-color:red;">
<div class="body-background-image">
<div class="banner-title text-center" id="BannerTitle6" >
<h1>alalalalalala</h1>
</div>
<div class="banner-subtitle text-center" id="BannerSubTitle6" >
<p>The new blah</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<script>
$(document).ready(function(){
$('.sl').slick({
autoplay:true,
autoplaySpeed: 3000,
arrows:false,
infinite: true,
speed: 500,
fade: true,
cssEase: 'linear',
slidesToShow:1
});
</script>