User Bootstrap 5 For Style

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet">

Download

CSS:

flickity.min.css minified, or flickity.css un-minified

JavaScript:

flickity.pkgd.min.js minified, or flickity.pkgd.js un-minified

Or Use CDN

<!-- CSS -->
<link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css">
<!-- JavaScript -->
<script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script>

Or Use Package managers

Install with npm: npm install flickity

Install with Bower: bower install flickity --save

HTML Code

<!--Breaking start-->
    <div class="container-xl">
        <div class="row g-0 mt-3">
            <!--Breaking box-->
            <div class="col-1">
                <div class="d-inline-block d-md-block bg-dark text-white text-center breaking-caret p-2">
                    <i class="fas fa-dot-circle"></i>
                    <span class="d-none d-md-inline-block">Latest</span>
                </div>
            </div>

            <!--Breaking content-->
            <div class="col-11">
                <div class="bg-white position-relative p-2">
                    <div class="box-carousel" data-flickity='{ "cellAlign": "left", "wrapAround": true, "adaptiveHeight": true, "prevNextButtons": false , "autoPlay": 5000, "pageDots": false, "imagesLoaded": true }'>
                        <!--list post-->
                        <div class="col-12">
                            <a class="hover-link" href="#">Google Employees Protest Secret Work on Censored Search
                                Engine for
                                China</a>
                        </div>
                        <!--list post-->
                        <div class="col-12">
                            <a class="hover-link" href="#">Investors Betting Against Tesla Made $1 Billion on Friday</a>
                        </div>
                        <!--list post-->
                        <div class="col-12">
                            <a class="hover-link" href="#">Carmelo Anthony Officially Signs with the Houston Rockets</a>
                        </div>
                        <!--list post-->
                        <div class="col-12">
                            <a class="hover-link" href="#">Lemon make your skin fresh and glowing</a>
                        </div>
                        <!--list post-->
                        <div class="col-12">
                            <a class="hover-link" href="#">5 Takeaways From Elon Musk’s Interview With The Times About
                                Tesla</a>
                        </div>
                    </div>
                    <!--end breaking news-->
                </div>
            </div>
        </div>
    </div>
    <!--End breaking-->

CSS Code:

body{
  background-color:#f5f5f7 !important;
}
a{
  text-decoration: none !important;
  color: #000 !important;
}