JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css">
<script src="http://bxslider.com/js/jquery.min.js"></script>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<div id="bodySlider">

<ul class="bxslider">
    <li><span class="pic pic-1"></span></li>
  <li><span class="pic pic-2"></span></li>
  <li><span class="pic pic-3"></span></li>
</ul>

</div>


<div class="bodyCOntainer">
    <div>navigation part here </div>
    <h1>My page Headint</h1>
    <p>Body Content here</p>
    <div>Footer here </div>
</div>

CSS

#bodySlider{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    z-index:1;
}
.bodyCOntainer{
    position:relative;
    z-index:2;
    width:500px;
    margin:0 auto;
    background:red;
    margin-top:50px;
}


.bx-wrapper .bx-viewport{border:0;box-shadow:none;}
.bx-wrapper .bx-viewport li img{
}
.pic{
    width:100%;
    display:block;
    height:500px;
    background-size:cover;
    background-repeat:none;
    background-position:top center;
}
.pic-1{
    background-image:url("http://dummyimage.com/1200x1200/000/0011ff.jpg");
}
.pic-3{
    background-image:url("http://dummyimage.com/1200x1200/000/ffffff.jpg");
}
.pic-2{
    background-image:url("http://dummyimage.com/1200x1200/000/a2ff00.jpg");
}

JavaScript

$('.bxslider').bxSlider({
  auto: true,
    controls:false,
    pager:false
});