An example implementation of a hero slider with bxSlider and Nebula

bxslider-hero.css

div#heroslider {position: relative; height: 500px; overflow: hidden; -webkit-transition: all 1s ease 0s; -moz-transition: all 1s ease 0s; -o-transition: all 1s ease 0s; transition: all 1s ease 0s;}
	div#heroslider.closed {height: 0;}
	.bx-wrapper {}
        .bx-wrapper .bx-viewport {min-height: 500px; border: none; left: 0; z-index: 1;}
            ul.bxslider {margin: 0; background: #222 url('images/black-linen.png'); height: 100%;}
                ul.bxslider li {padding: 0; height: 100%;}
                    ul.bxslider li div {position: absolute; top: 30%; left: 50%; width: 70%; max-width: 940px;}
                        ul.bxslider li div p {display: table; position: relative; margin-left: -50%; padding: 10px 30px; color: #000; text-align: center; text-transform: uppercase; margin-bottom: 5px; background: #fff; background: rgba(255, 255, 255, 0.9); box-shadow: 1px 1px 3px 0 rgba(0,0,0,0.2);}
                        ul.bxslider li div p.line1 {font-size: 48px;}
                        ul.bxslider li div p.line2 {font-size: 24px;}
                        ul.bxslider li div a {display: inline-block; position: relative; margin-left: -50%; padding: 10px 30px; color: #fff; font-size: 24px; text-align: center; text-transform: uppercase; background: #0098d7; background: var(--primary-color);}
                            ul.bxslider li div a:hover {background: #95d600; background: var(--secondary-color);}                   
                    ul.bxslider li img {min-height: 100%; min-width: 1600px; /* width: 100%; */ margin: 0 auto; box-shadow: 0 0 50px 0 rgba(0,0,0,0.8)} /* Uncomment the width for the image to stretch across the entire viewport. */
.bx-wrapper .bx-has-controls-direction {position: absolute; top: 50%; left: 50%; width: 100%; max-width: 1100px; height: 32px;}
	.bx-wrapper .bx-has-controls-direction .bx-controls-direction {position: relative; height: 32px; left: -50%;}
	.bx-wrapper .bx-controls-direction a {top: 0; margin-top: 0; z-index: 100;}

bxslider-hero.html

<div id="heroslider"><!-- Consider adding the class "closed" here to prevent FOUC. However, consider UX if so. -->
	<div class="nebulashadow inner-top bulging" style="z-index: 2;"></div>
	<ul class="heroslider bxslider">
		<li>
			<div>
				<p class="line1">Lorem Ipsum</p>
				<p class="line2">dolor sit amet, consectetur adipiscing elit.</p>
				<a class="nebulaframe anchored-right" href="#" onclick="return false;">bibendum hendrerit sed</a>
			</div>
			<img class="random-unsplash" src="http://unsplash.it/1600/300?random" alt="Slide 1" />
		</li>
	</ul>
	<div class="nebulashadow inner-bottom bulging" style="z-index: 2;"></div>
</div><!-- /heroslider -->

bxslider-hero.js

jQuery('.heroslider').bxSlider({
	mode: 'fade',
	speed: 800,
	captions: false,
	pager: false,
	auto: false,
	pause: 6000,
	autoHover: true,
	adaptiveHeight: true,
	useCSS: false,
	easing: 'easeInOutCubic',
	controls: true
});

//If the slider is closed on init, use the following:
jQuery(window).on('load', function() {
	setTimeout(function(){
		jQuery('#heroslider').removeClass('closed');
	}, 1000);			
}); //End Window Load

this good, thanks