JSFiddle - React, Tailwind, and code Playground

by lollero

HTML

<ul id="slider">
	<li>
		<img src="http://lorempixel.com/400/200/food/1/" alt="">
	</li>
	<li>
		<img src="http://lorempixel.com/400/200/food/2/" alt="">
	</li>
	<li>
		<img src="http://lorempixel.com/400/200/food/3/" alt="">
	</li>
	<li>
		<img src="http://lorempixel.com/400/200/food/4/" alt="">
	</li>
</ul>

CSS

#slider, #slider ul, #slider li {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

#slider ul li {
	display: none;
}

#slider ul .show {
	display: block;
}

JavaScript

var o,
slider = {

	settings: {
		slider: $('#slider'),
		controls: 'dots',
	},

	init: function() {

		o = this.settings;

		o.slider
			.attr('id', '')
			.wrap('<div id="slider"></div>');

		var slider = $('#slider'),
			li = slider.find('li'),
			img = slider.find('img');

		li.first().addClass('show');
		
		li.length

	},

};


slider.init();