I got an error when display slider with slick.js which add two more slide at the beginning and the end of my slider. I want to make slider display normal. And here is my setting. Are there any suggestion to solve this problem. Thank you in advance.

I run this code with nodejs and ejs.

In home.ejs page

      <div id="carousel-list">
        <div>
          <section class="col-xs-6 col-lg-4">
            <ul class="list-item">
                <img src="img/list_img.jpg" alt="list_img">
                <div class="over-play"></div>
                <a href="#" target="_self" title="Victoria Village"> <i class="fa fa-caret-right" aria-hidden="true"></i></a>
            </ul>
         </section>
        </div>
        <div>
          <section class="col-xs-6 col-lg-4">
            <ul class="list-item">
                <img src="img/list_img.jpg" alt="list_img">
                <div class="over-play"></div>
                <a href="#" target="_self" title="Victoria Village"> <i class="fa fa-caret-right" aria-hidden="true"></i></a>
            </ul>
         </section>
        </div>
        <div>
          <section class="col-xs-6 col-lg-4">
            <ul class="list-item">
                <img src="img/list_img.jpg" alt="list_img">
                <div class="over-play"></div>
                <a href="#" target="_self" title="Victoria Village"> <i class="fa fa-caret-right" aria-hidden="true"></i></a>
            </ul>
          </section>
        </div>
    </div>

In script.js page

    $("#carousel-list").slick({
      dots: true,
      slidesToShow: 3,
      slidesToScroll: 1,
    });

Problem, it auto add tag at the beginning of slider Here is an image show result and what slick.js generate

0 Answers