JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />
<div class="box-wrapper">
<ul class="bxslider">
  <li style="background-image: url('https://mba.haas.berkeley.edu/hubfs/+EWMBA/Website%20Media/Circles/avg_298c.jpg?t=1537244180632');"></li>
  <li style="background-image: url('https://mba.haas.berkeley.edu/hubfs/+EWMBA/Website%20Media/Circles/avg_298c.jpg?t=1537244180632');"></li>
  <li style="background-image: url('https://mba.haas.berkeley.edu/hubfs/+EWMBA/Website%20Media/Circles/avg_298c.jpg?t=1537244180632');"></li>
  <li style="background-image: url('https://mba.haas.berkeley.edu/hubfs/+EWMBA/Website%20Media/Circles/avg_298c.jpg?t=1537244180632');"></li>
</ul>
</div>

CSS

.box-wrapper{
    height: 500px;
}
.bx-viewport, .bx-wrapper{
    position:relative;
    width:100%;
    height:100% !important;
    top:0;
    left:0;
}
.bxslider, .bxslider li{
    height: 100% !important;;
}
.bxslider li{
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}
.bx-wrapper .bx-viewport{
    border: none !important;
}

JavaScript

$(document).ready(function(){
    $('.bxslider').bxSlider({
        mode: 'fade',
    captions: true,
    slideWidth: 600
    });
});