Bootstrap 4 Cards Component As A Fleckity Groups Cells Together In Slides

Question

Today I started with Bootstrap 4 and still exploring with it and I' still new with using Flickity. Now I tried to create a Flickity carousel, a groups cells using the cards component of Bootstrap 4 instead of usual images using the following codes below. But error happening. Is this possible or not??

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

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

STYLES

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