Slidezy.js

Try It Out

Slidezy is a lightweight slider library built with pure JavaScript. (Source code available on GitHub)

• No dependencies
• Fully customizable with CSS
• Supports Loop, Autoplay, Custom UI
• Simple and intuitive API
• Lightweight and optimized

Here are some examples of how to use Slidezy:

1. Basic Slider (Default)

A simple out-of-the-box slider showing 1 item at a time with default navigation controls and pagination dots.

2. Carousel (Multiple Items, Loop & Slide By Page)

Displays 3 items simultaneously. Clicking 'Next' moves past an entire page of items at once, with infinite looping enabled.

3. Autoplay & Custom UI

Features automatic sliding that pauses on hover, and custom external navigation buttons configured via CSS selectors.

Installation

Method	Steps
Direct Download	Download ZIP Simply extract the ZIP file and use the slidezy.min.js and slidezy.min.css files in your project.

Slidezy provides a small CSS file that you can include directly via a CDN link. This makes it easy to integrate into your project and customize as needed.

Include the Slidezy JavaScript file in your project:

<script src="https://cdn.jsdelivr.net/gh/TAnhpika/slidezy@v1.0.0/slidezy.min.js"></script>

Usage

Here’s the basic HTML structure you’ll need to set up Slidezy:

<div class="my-slider">
    <div>Slide 1</div>
    <div>Slide 2</div>
    <div>Slide 3</div>
</div>

And here’s how you can use it with JavaScript:

// Initialize a new slider instance
const slider = new Slidezy('.my-slider', {
    items: 1,
    loop: true,
    autoplay: true,
    speed: 500
});

Options

Option	Type	Description
items	number	Number of items to show at once (default: 1)
loop	boolean	Enable continuous loop mode (default: false)
speed	number	Transition speed in milliseconds (default: 300)
autoplay	boolean	Enable auto play of slides (default: false)
autoplayTimeout	number	Autoplay interval in milliseconds (default: 3000)
slideBy	number | 'page'	Number of items to slide by. 'page' slides by the number of visible items (default: 1)
prevButton / nextButton	string	CSS selector for custom previous/next buttons.