JSFiddle - React, Tailwind, and code Playground

HTML

<div class="swiper-container relative w-full text-center text-white curve-bottom overflow-hidden" style="height: 36rem;">

        <div class="swiper-wrapper">
            
            <div class="swiper-slide">
                <img src="https://placehold.co/600x400?text=Slide1" alt="Glasgow" class="w-full h-full object-center object-cover">
            </div>
            
            <div class="swiper-slide">
                <img src="https://placehold.co/600x400?text=Slide2" alt="London" class="w-full h-full object-right-top object-cover">
            </div>
            
            <div class="swiper-slide">
                <img src="https://placehold.co/600x400?text=Slide3" alt="Manchester" class="w-full h-full object-left object-cover">
            </div>
            
            <div class="swiper-slide">
                <img src="https://placehold.co/600x400?text=Slide4" alt="Edinburgh" class="w-full h-full object-center object-cover">
            </div>

        </div>
    
    </div>

    <!-- Swiper.js Script -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        const swiper = new Swiper('.swiper-container', {
            loop: true, // Ensures seamless looping
            autoplay: {
                delay: 2500, // 7 seconds between slides
                disableOnInteraction: false, // Continues autoplay after interactions
            },
            effect: 'fade', // Smooth fade transition between slides
            fadeEffect: {
                crossFade: true, // Prevents visible overlap of slides
            },
            speed: 2500, // Controls the duration of fade transitions
        });
    </script>

    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">

    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>