JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.min.js"></script>
<div class="main-gallery">
    <div class="gallery-cell">
        <img class="gallery-cell-image" data-flickity-lazyload="http://champions.totalegolf.com/portals/119/Images/cottages-slider-03.jpg" />
    </div>
    <div class="gallery-cell">
        <img class="gallery-cell-image" data-flickity-lazyload="http://champions.totalegolf.com/portals/119/Images/cottages-slider-02.jpg" />
    </div>
    <div class="gallery-cell">
        <img class="gallery-cell-image" data-flickity-lazyload="http://champions.totalegolf.com/portals/119/Images/cottages-slider-01.jpg" />
    </div>
    <div class="gallery-cell">
        <img class="gallery-cell-image" data-flickity-lazyload="http://champions.totalegolf.com/portals/119/Images/cottages-slider-02.jpg" />
    </div>
</div>

CSS

img {
    width: 400px;
}
.gallery-cell-image {
    display: block;
    opacity: 0;
    -webkit-transition: opacity 0.4s;
    transition: opacity 0.4s;
}
.gallery-cell-image.flickity-lazyloaded, .gallery-cell-image.flickity-lazyerror {
    opacity: 1;
}

JavaScript

$(window).load(function () {
    $('.main-gallery').flickity({
        wrapAround: true,
        freeScroll: true,
        lazyLoad: 3
    });
});