Jquery 光滑的转盘未为图元指定适当的宽度

我在一个循环中有以下js代码

$(".team-scroller .teams").append("<div class='team-panel'>" +
                                "<div class='team-text'>" + first_team + "</div>" +
                                "<div class='team-text'>VS</div>" +
                                "<div class='team-text'>" + second_team +"</div>" +
                                "<div class='row'>" +
                                  "<div class='colmn-5'>" +
                                    "<div class='mdate'>" + day + " " + month + "</div>" +
                                  "</div>" +
                                  "<div class='colmn-5' style='float:right;'>" +
                                    "<a class='buy-tickets-btn' href='" + book_link + "'>Buy Tickets</a>" +
                                  "</div>" +
                              "</div>")

其中是父元素，它有多个子元素。以下是slick的初始化代码

$('.team-scroller .teams').slick({
        infinite: false,
        slidesToShow: 4,
        slidesToScroll: 4,
        arrows: true,
        prevArrow: '<div class="left-dir"><span class="ic-arlt rgarr"></span></div>',
        nextArrow: '<div class="right-dir"><span class="ic-arrt rgarr"></span></div>',
        responsive: [
          {
            breakpoint: 1024,
            settings: {
              slidesToShow: 3,
            }
          },
          {
            breakpoint: 600,
            settings: {
              slidesToShow: 2,
            }
          },
          {
            breakpoint: 480,
            settings: {
              slidesToShow: 1,
            }
          }
        ]
      });

问题是-我在每个卷轴中看到4个元素和第五个元素的开始部分，而不是每个卷轴中只有4个元素。换句话说，子元素的宽度不是由slick正确指定的。

---

我如何才能让斯里克为子元素指定适当的宽度

你能加小提琴吗？或者编写循环？如果这是dom结构。您必须使用$'.team scroller.teams'。不应该有任何空格。这是一个代码笔链接。尽管它在那里工作正常