JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20140415/jquery.cycle2.autoheight.min.js"></script>
<div class="header-container">
    <div class="header">header</div>
</div>
<div id="cycle-slideshow" class="cycle-slideshow" data-cycle-auto-height="2:1" data-cycle-slides="> .slide-container" data-cycle-timeout=4000 data-cycle-pager=".pager" data-cycle-pager-template="<a href=#> &nbsp;{{slideNum}}&nbsp; </a>">
    <div class="slide-container" style="background-image:url(http://placehold.it/600x300);"></div>
    <div class="slide-container" style="background-image:url(http://placehold.it/300x150);"></div>
</div>
<div class="pager-container">
    <div class="pager"></div>                   
</div>

CSS

.header,.pager{
    text-align:center;
    font-size:20px;
    text-transform:uppercase;
    background-color:yellow;
    height:50px;
    line-height:50px;    
}
a{
    text-decoration:none;
}
.slide-container{
    width:100%;
    
}
.cycle-slide{
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center center;
}

JavaScript

function resize(){
    if($(window).width() < 581){
        
        $('.header').html('JQuery script is determinging the height');
        var newHeight = $(window).height() - $('.header-container').height() - $('.pager-container').height();        
        $('#cycle-slideshow').addClass("change-height");
        $('head').append('<style> .change-height{ height:'+ newHeight+'px !important; } </style>');  
    }
    else{
        $('.header').html('cycle 2 is determining the height');
        $('.change-height#cycle-slideshow').removeClass('change-height');                        
    }
}
$(window).resize(function(){
    resize();
});
$(document).ready(function(){
    resize();
});