JSFiddle - React, Tailwind, and code Playground

by nhuon

HTML

<div class="slider">
    <ul class="slider-list">
        <li>Slide 1</li>
        <li>Slide 2</li>
        <li>Slide 3</li>
        <li>Slide 4</li>
        <li>Slide 5</li>
    </ul>
    <ul class="slider-nav">
        <li>Slide 1</li>
        <li>Slide 2</li>
        <li>Slide 3</li>
        <li>Slide 4</li>
        <li>Slide 5</li>
    </ul>    
</div>

CSS

*
{
    margin: 0;
    padding: 0;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.slider
{
    width: 50%;
    overflow: hidden;
}

.slider-list
{
    width: 100%;
    position: relative;
}

.slider-list li
{
    position: absolute;
    width: 100%;
    height: 100px;
    border: 1px solid red;
}

.slider-nav
{
    margin-top: 100px;
}

JavaScript

(function($)
{
	$.fn.mon_slider = function(options)
	{
		var settings = $.extend({},
		{
			slide_interval: 5000,
			slide_duration: 500,
			slide_easing: 'swing',
			active_class: 'active'
		}, options);
		
		return this.each(function()
		{
			var slider = $(this);
			var slider_nav = slider.find('.slider-nav');
			var slider_list = slider.find('.slider-list');
			var slider_list_lis = slider_list.children('li')
			var slider_nav_lis = slider_nav.children('li');
			var slider_prevs = slider.find('.slider-prev');
			var slider_nexts = slider.find('.slider-next');
			var current_index = 0;
			var slider_interval_id;

			function ScrollToSlide(index)
			{
                var current_slide = slider_list_lis.eq(current_index);
                
				// Circular slider
				current_index = index % slider_list_lis.length;

                var next_slide = slider_list_lis.eq(current_index);
                var current_slide_width = current_slide.get(0).offsetWidth;
				
				// Offset the container to create a slide animation
                current_slide.animate({'left': -current_slide_width}, settings.slide_duration, settings.slide_easing, function()
                {
                    current_slide.hide();
                });
                next_slide.show();
                next_slide.css('left', current_slide_width);
                next_slide.animate({'left': 0}, settings.slide_duration, settings.slide_easing);

				// Update the navigation list
				slider_nav_lis.removeClass(settings.active_class);
				slider_nav_lis.eq(current_index).addClass(settings.active_class);
			}

			function ScrollToPrevSlide()
			{
				ScrollToSlide(current_index - 1);
			}

			function ScrollToNextSlide()
			{
				ScrollToSlide(current_index + 1);
			}

			// Setup navigation list
			// Clicking on one item in the list will show the corresponding slide
			slider_nav_lis.each(function()
			{
				var self =...