Javascript 引导4卡组件作为一个斑点，将单元格分组在幻灯片中

今天，我从Bootstrap4开始，仍然在探索它，我对使用Flickity仍然是新手。现在我尝试创建一个Flickity旋转木马，一个使用Bootstrap 4的cards组件的，而不是使用下面代码的普通图像。但错误正在发生这可能吗？？？

HTML

---

发生了什么错误？请编辑..图像不可见。因此，我也无法配置它们是否存在另一个错误，例如无法自动播放。@Manishpatolia使用div data flickity='{“groupCells”：true，“autoplay”：1500}'中的选项，而不是jquery，它工作正常。

<div class="gallery js-flickity carousel-card" id="card">
    <div class="gallery-cell">
      <div class="card">
            <img class="card-img-top" src="news1.jpeg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
    <div class="gallery-cell">
      <div class="card">
            <img class="card-img-top" src="news2.jpeg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
    <div class="gallery-cell">
      <div class="card">
            <img class="card-img-top" src="news3.jpeg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
    <div class="gallery-cell">
      <div class="card">
            <img class="card-img-top" src="news4.jpeg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
    <div class="gallery-cell">
      <div class="card">
            <img class="card-img-top" src="news1.jpeg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
    <div class="gallery-cell">
      <div class="card">
            <img class="card-img-top" src="news1.jpeg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
    <div class="gallery-cell">
      <div class="card">
            <img class="card-img-top" src="news1.jpeg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
    <div class="gallery-cell">
      <div class="card">
            <img class="card-img-top" src="news1.jpeg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
    <div class="gallery-cell">
      <div class="card">
            <img class="card-img-top" src="news1.jpeg" alt="Card image cap">
            <div class="card-block">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                <a href="#" class="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">
    $('.carousel-ace').flickity({
        pageDots: true,
        autoPlay: true,
        groupCells: 4
    });
</script>

/*Flickity*/

.gallery-cell {
    width: 28%;
    height: 200px;
    margin-right: 10px;
    counter-increment: gallery-cell;
    overflow: hidden;
}

.gallery-cell:before {
    display: block;
    text-align: center;
    line-height: 200px;
    font-size: 80px;
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}