<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://unpkg.com/flickity@2/dist/flickity.pkgd.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/flickity@2/dist/flickity.min.css"> <h1>Flickity</h1> <!-- Flickity HTML init --> <div class="carousel" data-flickity='{ "draggable": false }'> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> <div class="carousel-cell"></div> </div> <div class="col-12 copy-right text-center">© Friday, March 1, 2024 quanth</div>

/* external css: flickity.css */ * { box-sizing: border-box; } body { font-family: sans-serif; } h1 { text-align: center; } .carousel { background: #FAFAFA; } .carousel-cell { width: 66%; height: 200px; margin-right: 10px; background: #8C8; border-radius: 5px; counter-increment: carousel-cell; } /* cell number */ .carousel-cell:before { display: block; text-align: center; content: counter(carousel-cell); line-height: 200px; font-size: 80px; color: white; } .copy-right { margin-top: 50px; }

var elem = document.querySelector('.carousel'); var flkty = new Flickity( elem, { // options cellAlign: 'center', autoPlay: true, wrapAround: true, contain: true, arrowShape: 'M 0,50 L 60,00 L 50,30 L 80,30 L 80,70 L 50,70 L 60,100 Z' });