javascript - Bootstrap 4 卡片组件作为 Fleckity 在幻灯片中将细胞组合在一起

Question

今天我从 Bootstrap 4 开始，仍在探索它，而且我对使用 Flickity 还是很陌生。现在我尝试创建一个 Flickity 轮播， 使用 Bootstrap 4 的卡片组件而不是使用以下代码的常用图像对单元格进行分组。但是发生错误。这可能吗？

HTML

<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%;
}