JSFiddle - React, Tailwind, and code Playground

by x3graphics

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation/foundation.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/js/foundation/foundation.interchange.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/5.5.0/css/foundation.css">
<script src="//cdn.jsdelivr.net/bxslider/4.1.1/jquery.bxslider.js"></script>
<div class="home-slider-container">
    <div class="home-slider">
        <div class="slide"> <a href="#">
            <img data-interchange="[http://placehold.it/768x400, (default)], [http://placehold.it/1920x400, (medium)]" />
                        </a>

        </div>
        <div class="slide"> <a href="#">
            <img data-interchange="[http://placehold.it/768x400, (default)], [http://placehold.it/1920x400, (medium)]" />
                        </a>

        </div>
        <div class="slide"> <a href="#">
            <img data-interchange="[http://placehold.it/768x400, (default)], [http://placehold.it/1920x400, (medium)]" />
                        </a>

        </div>
    </div>
</div>
<script>
    $(document).foundation('interchange','reflow');
</script>

JavaScript

var homeSlider = $('.home-slider').bxSlider({
     auto: true,
     autoHover: true,
     width: 1920,
     minSlides: 1,
     maxSlides: 1,
     pager: false,
     nextText: '',
     prevText: '',
     preloadImages: 'all',
     pause: 5000,
     adaptiveHeight: true
 });