JSFiddle - React, Tailwind, and code Playground

by Abruzzi Hraig

JavaScript

function Slider(slider_class, animation_type, slider_width, page_counts) {
    var _ = this;
    _.slider_tag = $('.' + slider_class);
    _.slider_content = _.slider_tag.find('.slider-content');
    _.prev = _.slider_tag.find('.prev');
    _.next = _.slider_tag.find('.next');
    _.dots = _.slider_tag.find('.slider-dotted');
    _.cursor = 0;
    _.width = slider_width;
    _.jump = function(dist_cursor) {
        dist_cursor = (dist_cursor < 0) ? dist_cursor+page_counts : dist_cursor%page_counts;
        var gap = dist_cursor - _.cursor;
        var last_left = _.cursor*-_.width;
        _.cursor = dist_cursor;
        
        _.dots.removeClass('active').eq(dist_cursor).addClass('active');
        _.slider_content.finish().velocity({
            left: last_left-_.width*gap
        }, 500, animation_type);
    };
    _.prev.click(function () {
        _.jump(_.cursor-1)
    });
    _.next.click(function () {
        _.jump(_.cursor+1)
    });
    _.dots.click(function() {
        _.jump($(this).index());
    });
}