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: 500%;
}

.slider-list li
{
    float: left;
    width: 20%;
    height: 100px;
    border: 1px solid red;
}

JavaScript

(function($)
{
    // jQuery.fx.interval = 16;
    
    $.easing.easeInOutQuad = function(x, t, b, c, d)
    {
		if ((t/=d/2) < 1) return c/2*t*t + b;
		return -c/2 * ((--t)*(t-2) - 1) + b;
	}
    
    $.fn.slider = function(options)
    {
        var settings = $.extend({}, {
            slide_duration: 500,
            slide_easing: 'swing'
        }, options);
        
        return this.each(function()
        {
            slider_nav = $('.slider-nav');
            slider_list = $('.slider-list');
            
            slider_nav.children('li').each(function()
            {
                var self = $(this);
                self.click(function()
                {
                    var index = self.index();
                    var slide = slider_list.children('li')
                    if (slide != undefined)
                    {
                        var num_elements = Math.min(slide.length, index);
                        var offset = 0;
                        
                        for (var i = 0; i < num_elements; i++)
                        {
                            offset += slide[i].offsetWidth;
                        }
                        
                        slider_list.animate({'margin-left': (-offset).toString() + 'px'}, settings.slide_duration, settings.slide_easing);
                    }
                });
            });
        });
    };
})(jQuery);

$('.slider').slider({slide_easing: 'easeInOutQuad'});