JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdn.jsdelivr.net/bxslider/4.1/jquery.bxslider.js"></script>
<body>
	<div class="carouselWrapper">
		<div class="carousel">
			<div class="slide">
				<div class="imgslide">
					<img src="https://dummyimage.com/600x400/000/fff" />
				</div>
			</div>
			<div class="slide">
				<div class="imgslide">
					<img src="https://dummyimage.com/600x400/000/fff" />
				</div>
			</div>
			<div class="slide">
				<div class="imgslide">
					<img src="https://dummyimage.com/600x400/000/fff" />
				</div>
			</div>
		</div>
	</div>
</body>

CSS

.carouselWrapper {
margin: 0 auto;
max-width: 1000px;
}


.carouselWrapper .bx-viewport {
	padding-left: 25%;
    padding-right: 25%;
    width: inherit !important
}

.carousel .slide .imgslide {	overflow: hidden; }
.carousel .slide .imgslide img { width: 100%; }

JavaScript

$(function() {
	$('.carousel').bxSlider({
		pager: false,
		slideWidth: 800,
		minSlides: 1,
	    maxSlides: 3,
	    moveSlides: 1,
		adaptiveHeight: true,
	    slideMargin: 10
	});
	
	$('.bx-wrapper').first().css('width', '400px');
});