JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<script src="https://coolcarousels.frebsite.nl/c/23/jquery.carouFredSel-6.0.4-packed.js" type="text/javascript"></script>
<div id="wrapper">
	<div id="carousel">
		<div>
			<img src="https://www.interana.com/hubfs/Interana_July2018/images/microsoft.svg" alt="fruit1" width="200" height="200" />
			<span>Apple</span>
		</div>
		<div>
			<img src="https://www.interana.com/hubfs/Interana_July2018/images/microsoft.svg" alt="fruit2" width="200" height="200" />
			<span>Mandarin</span>
		</div>
		<div>
			<img src="https://www.interana.com/hubfs/Interana_July2018/images/microsoft.svg" alt="fruit3" width="200" height="200" />
			<span>Banannas</span>
		</div>
		<div>
			<img src="https://www.interana.com/hubfs/Interana_July2018/images/microsoft.svg" alt="fruit4" width="200" height="200" />
			<span>Cherries</span>
		</div>
		<div>
			<img src="https://www.interana.com/hubfs/Interana_July2018/images/microsoft.svg" alt="fruit5" width="200" height="200" />
			<span>Orange</span>
		</div>
		<div>
			<img src="https://www.interana.com/hubfs/Interana_July2018/images/microsoft.svg" alt="fruit6" width="200" height="200" />
			<span>Melon</span>
		</div>
		<div>
			<img src="https://www.interana.com/hubfs/Interana_July2018/images/microsoft.svg" alt="fruit7" width="200" height="200" />
			<span>Lemon</span>
		</div>
		<div>
			<img src="https://www.interana.com/hubfs/Interana_July2018/images/microsoft.svg" alt="fruit8" width="200" height="200" />
			<span>Grapes</span>
		</div>
		<div>
			<img src="https://www.interana.com/hubfs/Interana_July2018/images/microsoft.svg" alt="fruit9" width="200" height="200" />
			<span>Peach</span>
		</div>
		<div>
			<img src="https://www.interana.com/hubfs/Interana_July2018/images/microsoft.svg" alt="fruit10" width="200" height="200" />
			<span>Pear</span>
		</div>
		<div>
			<img src="https://www.interana.com/hubfs/Interana_July2018/images/microsoft.svg" alt="fruit11" width="200" height="200"...

CSS

#wrapper {
	background-color: #fff;
	border-top: 1px solid #ccc;
	width: 100%;
	height: 100px;
	margin-top: -1px;
	position: absolute;
	left: 0;
	top: 50%;
}
#carousel {
	margin-top: -100px;
}
#carousel div {
	text-align: center;
	width: 200px;
	height: 250px;
	float: left;
	position: relative;
}
#carousel div img {
	border: none;
}
#carousel div span {
	display: none;
}
#carousel div:hover span {
	background-color: #333;
	color: #fff;
	font-family: Arial, Geneva, SunSans-Regular, sans-serif;
	font-size: 14px;
	line-height: 22px;
	display: inline-block;
	width: 100px;
	padding: 2px 0;
	margin: 0 0 0 -50px;
	position: absolute;
	bottom: 30px;
	left: 50%;
	border-radius: 3px;
}

JavaScript

var $c = $('#carousel'),
		$w = $(window);
 
	$c.carouFredSel({
		align: false,
		items: 10,
		scroll: {
			items: 1,
			duration: 2000,
			timeoutDuration: 0,
			easing: 'linear',
			pauseOnHover: 'immediate'
		}
	});
 
	
	$w.bind('resize.example', function() {
		var nw = $w.width();
		if (nw < 990) {
			nw = 990;
		}
 
		$c.width(nw * 3);
		$c.parent().width(nw);
 
	}).trigger('resize.example');