如何按类别从slickslider中删除幻灯片

时间:2019-05-13 15:52:42

标签: jquery slider hide slick

我想使用光滑的滑块并具有最大数量的幻灯片。所有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>

0 个答案:

没有答案