The Simplest jQuery Slider Ever

Sliders are a staple of modern web design. They can display images, text, or other elements in an interactive, visually appealing way. However, most slider plugins are overkill for basic use cases, bloating your project with unnecessary features.

Enter The Simplest jQuery Slider Ever—a lightweight, functional slider that's easy to implement, customize, and understand. Here's how you can add this minimalist slider to your next project.

Demo

See the slider in action:

Download the demo and code for the simplest slider ever

HTML Structure

Here’s the bare bones HTML for the slider. It consists of:

1. A wrapper for the slider.
2. Navigation buttons (< and >).
3. A container for the sliding elements.

<div class="simplest-slider-ever">
    <div class="handlers">
        <div class="handler direction before"><</div>
        <div class="handler direction after">></div>
    </div><!--handlers-->
    <div class="flex-wrapper">
        <div class="flex">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
        </div><!--flex-->
    </div><!--flex-wrapper-->
</div><!--simplest-slider-ever-->

Styling the Slider

A little CSS goes a long way! Here's how we style the slider for a clean, responsive look:

.simplest-slider-ever,
.simplest-slider-ever * {
    clear: both;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
.simplest-slider-ever {
    min-height: 100px;
    width: 600px;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    display: block;
    direction: ltr;
    text-align: left;
}
.simplest-slider-ever .handler.direction {
    direction: ltr;
    text-align: left;
    position: absolute;
    top: 50%;
    margin-top: -13px;
    color: rgba(71, 71, 71, 1);
    font-weight: bold;
    font-size: 24px;
    cursor: pointer;
}
.simplest-slider-ever .handler.before {
    left: 6px;
}
.simplest-slider-ever .handler.after {
    right: 6px;
}
.simplest-slider-ever .handler.direction.disabled {
    color: rgba(71, 71, 71, 0.3);
    cursor: not-allowed;
}
.simplest-slider-ever .flex-wrapper {
        width: calc(100% - 60px);
        margin-right: auto;
        margin-left: auto;
        overflow: hidden;
        border: 1px solid black;
}
.simplest-slider-ever .flex {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0;
}
.simplest-slider-ever .flex > div {
    height: 180px;
    flex-basis: 180px;
    align-self: center;
    background-color: #efefef;
    color: black;
    text-align: center;
    line-height: 180px;
    margin: 10px 3px;
    border: 1px solid black;
    font-size: 48px;
    font-weight: bold;
    flex-shrink: 0;
}

Adding Functionality with jQuery

Here’s the JavaScript that brings the slider to life. It enables smooth transitions and handles navigation button clicks.

Explanation

1. Movement Logic: Calculates the current position and moves the slider left or right.
2. Boundaries: Prevents the slider from moving too far in either direction.
3. Responsive: Recalculates dimensions on window resize.

var simplestSliderEver = function() {
    const $flex = $('.simplest-slider-ever .flex').css('transition', 'transform 0.5s');
    const $handleLeft = $('.simplest-slider-ever .before');
    const $handleRight = $('.simplest-slider-ever .after');
    
    let flexWidth = 400;
    let shortMovement = 100;
    let longMovement = 200;
    

    // Dynamically calculate flexWidth
    function setFlexWidth() {
        flexWidth = ($flex.innerWidth() > 100) ? $flex.innerWidth() : $(document).width() * 0.9; 
        shortMovement = flexWidth/4;
        longMovement = flexWidth*2/3;
    }

    let timeout;

    // Helper function to get current translateX value
    function getTranslateX(element) {
        const transformMatrix = element.css('transform');
        if (transformMatrix === 'none') {
            return 0; // Default if no transform applied
        }
        const matrixValues = transformMatrix
            .replace('matrix(', '')
            .replace(')', '')
            .split(', ');
        return parseFloat(matrixValues[4]) || 0; // Extract translateX value
    }

    // Move the .flex element
    function moveFlex(movement) {
        const currentLeft = getTranslateX($flex);
        let newLeft = currentLeft + movement;

        $handleLeft.removeClass("disabled");
        $handleRight.removeClass("disabled");

        // Boundaries check
        const maxMovement = flexWidth * 0.95;
        if (newLeft > maxMovement) {
            newLeft = maxMovement;
            $handleRight.addClass("disabled");
        } else if (newLeft < -maxMovement) {
            newLeft = -maxMovement;
            $handleLeft.addClass("disabled");
        }

        // Apply the movement with animation
        $flex.css('transform', `translateX(${newLeft}px)`);
    }

    // Handle short and long clicks
    function handleClick($handle, shortMovement, longMovement) {
        setFlexWidth();
        
        $handle.on('mousedown', function () {
            timeout = setTimeout(function () {
                moveFlex(longMovement);
            }, 500); // Long click
        });

        $handle.on('mouseup mouseleave', function () {
            clearTimeout(timeout); // Clear timeout if mouse is released early

            // Short click
            if (timeout) {
                moveFlex(shortMovement);
            }
        });
    }

    // Set flexWidth on load and resize
    setFlexWidth();
    $(window).on('resize', setFlexWidth);

    // Set up handlers for .after and .before elements
    handleClick($handleLeft, -shortMovement, -longMovement); // Move left
    handleClick($handleRight, shortMovement, longMovement); // Move right
}
simplestSliderEver();

Download the demo and code for the simplest slider ever

Recommended for you:

JavaScript datetime object helper functions

The cornerSlider jQuery plugin

Using jQuery and AJAX to dynamically update a page

4. Disclaimer

As far as I know, the script within this page is functional and harmless. However I make no guarantees. I also take no responsibility for any damage you may do when using the script (the chances of any problems occuring are slim but who knows). Please use this script responsibly and judgementally.