JSFiddle - React, Tailwind, and code Playground

by Cerlin ST

HTML

<script src="http://unslider.com/unslider.js"></script>
<div class="banner " style="overflow: hidden; width: 100%; height: 415px;">
			<ul style="width: 400%; position: relative; left: 0%; height: 415px;">
				<li style="width: 25%; background-image: url(http://unslider.com/img/sunset.jpg); background-size: 100% 100%;">
					<h1>The jQuery slider that just slides.</h1>
					<p>No fancy effects or unnecessary markup, and it’s less than 3kb.</p>
					
					<a class="btn" href="#download">Download</a>
				</li>
				
				<li style="width: 25%; background-image: url(http://unslider.com/img/wood.jpg); background-size: 100% 100%;">
					<h1>Fluid, flexible, fantastically minimal.</h1>
					<p>Use any HTML in your slides, extend with CSS. You have full control.</p>
					
					<a class="btn" href="#download">Download</a>
				</li>
				
				<li style="width: 25%; background-image: url(http://unslider.com/img/subway.jpg); background-size: 100% 100%;">
					<h1>Open-source.</h1>
					<p>Everything to do with Unslider is hosted on GitHub.</p>
					
					<a class="btn" href="//github.com/idiot/unslider">Contribute</a>
				</li>
				
				<li style="width: 25%; background-image: url(http://unslider.com/img/shop.jpg); background-size: 100% 100%;">
					<h1>Uh, that’s about it.</h1>
					<p>I just wanted to show you another slide.</p>
					
					<a class="btn" href="#download">Download</a>
				</li>
			</ul>
		</div>
		<div class="banner active" style="overflow: hidden; width: 100%; height: 415px;">
			<ul style="width: 400%; position: relative; left: 0%; height: 415px;">
				<li style="width: 25%; background-image: url(http://unslider.com/img/sunset.jpg); background-size: 100% 100%;">
					<h1>The jQuery slider that just slides.</h1>
					<p>No fancy effects or unnecessary markup, and it’s less than 3kb.</p>
					
					<a class="btn" href="#download">Download</a>
				</li>
				
				<li style="width: 25%; background-image: url(http://unslider.com/img/wood.jpg); background-size:...

CSS

.banner { position: relative; overflow: auto; }
    .banner li { list-style: none; }
        .banner ul li { float: left; }

JavaScript

$(function() {
    var banners = $('.banner');
    banners.unslider();
    $(document).unbind('keydown').keydown(function(e){
        var index = banners.index($('.active')[0]) + 1;
        var data = $('.active').data('unslider'+index);

		if(e.keyCode === 37 ) {
		    e.preventDefault();
		    data.prev();
		    return false;
		}
		if(e.keyCode === 39 ) {
		    e.preventDefault();
		    data.next();
		    return false;
		}
    });
});