光滑的轮播没有为元素分配适当的宽度

Question

我在循环中有以下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>")

其中<div class="team-scroller teams"></div>是父元素，并且它有多个<div class="team-panel"></div>作为子元素。以下是光滑的初始化代码

$('.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个元素。换句话说，没有通过光滑正确分配子元素的宽度。 如何为子元素指定合适的宽度？