JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/js/swiper.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/css/swiper.css">
<section id="promos">
    <div class="middle">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <dl class="swiper-slide" style="background-image:url(//s3.amazonaws.com/hebs-cms/AIDAJHMRIR6CBA4WXXBLG/cms/cache/288x176/f8/3-f8c6d609ecce7e128195d6da569e937b.jpg);">
                    <dt>Learn More</dt>
                    <dd>
                        <p>Enjoy an effortless, luxurious stay at HOTEL 48LEX with our VIP Perks.</p>
                        <a href="/special-offers/vip-travel-perks" class="promo-button" onclick="var s=s_gi(s_account);s.linkTrackVars='eVar1';s.eVar1='VIP Travel Perks';(s.tl(this,'o','Promo Tile Click'));">Learn More</a>
                    </dd>
                </dl>
                <dl class="swiper-slide" style="background-image:url(//s3.amazonaws.com/hebs-cms/AIDAJHMRIR6CBA4WXXBLG/cms/cache/288x176/ac/4-ac0cc64898c0124872754391907d9f2d.jpg);">
                    <dt>Advance Purchase</dt>
                    <dd>
                        <p>Save up to 20% when you book in advance.</p>
                        <a href="/special-offers/advance-purchase" class="promo-button" onclick="var s=s_gi(s_account);s.linkTrackVars='eVar1';s.eVar1='Advance Purchase';(s.tl(this,'o','Promo Tile Click'));">Advance Purchase</a>
                    </dd>
                </dl>
                <dl class="swiper-slide" style="background-image:url(//s3.amazonaws.com/hebs-cms/AIDAJHMRIR6CBA4WXXBLG/cms/cache/288x176/0b/5-0be5e280cc0ce5eec69daeda2021ca77.jpg);">
                    <dt>Monthly Exclusive Offer</dt>
                    <dd>
                        <p>Book our More Summer special today.</p>
                        <a href="/special-offers/monthly-exclusive-offer" class="promo-button" onclick="var...

SCSS

* {
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent 50% 50% no-repeat;
    background-size: cover;
    text-decoration: none;
    list-style: none;
}

.swiper-wrapper {
    .swiper-slide,
	.swiper-slide-duplicate {
        opacity: 0;
        transition: opacity .4s;
        &.swiper-slide-visible,
        &.swiper-slide-active {
            opacity: 1;
        }
    }
}

dl {
    font: normal 12px/16px Arial;
    text-align: center;
    height: 120px !important;
    padding-top: 140px;
    background-color: #ebebeb;
    background-position: 50% 0;
    background-size: auto 140px;
    white-space: normal;
    position: relative;
    dt {
        color: #000;
        text-transform: uppercase;
        line-height: 36px;
        margin-top: 15px;
    }
    dd {
        padding: 0 20px;
        color: #666;
        .promo-button {
            font-size: 0;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
    }
}

JavaScript

$(function() {

    $('.swiper-container').swiper({
        loop: true,
        loopedSlides: 20,
        autoplay: 1000,
        spaceBetween: 20,
        speed: 600,
        slidesPerView: 4,
        preloadImages: false,
        lazyLoading: true,
        lazyLoadingInPrevNext: true,
        simulateTouch: false,
        watchSlidesProgress: true,
        watchSlidesVisibility: true,
        nextButton: $('.swiper-button-next'),
        prevButton: $('.swiper-button-prev')
    });

})