Как убрать слайд из слайкслайдера по классу

Question

Я хотел бы использовать скользящий слайдер и иметь максимальное количество слайдов. Все 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>