Horizon Slider - All Demos

Quick Start Guide

Get your Horizon Slider up and running in minutes! Follow these simple steps to integrate it into your project.

1. Include Necessary Files in Your HTML Head

Add these lines to the `head` section of your HTML file.

<!-- Horizon Slider CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/mansurivilla/horizonslider/prod/css/HorizonSlider.min.css">

<!-- GSAP Core (required by Draggable) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>

2. Basic HTML Layout for Your Slider

Use this basic structure for each slider you want to create. Customize the `slide` content as needed.

<!-- Your Slider Container -->
<div class="horizon-slider_container my-custom-slider">
    <div class="horizon-slider_track">
        <div class="horizon-slide">Your Slide Content 1</div>
        <div class="horizon-slide">Your Slide Content 2</div>
        <div class="horizon-slide">Your Slide Content 3</div>
        <!-- Add more slides as needed -->
    </div>
    <!-- Navigation and tracker will be dynamically generated here -->
</div>

3. Initialize Your Slider with JavaScript

Place this script just before your closing `</body>` tag. Remember to link your Horizon Slider JS file.

<!-- Horizon Slider JavaScript -->
<script src="https://cdn.jsdelivr.net/gh/mansurivilla/horizonslider/prod/js/HorizonSlider.min.js"></script>

<script>
    // Initialize your slider(s)
    horizonSlider({
        '.my-custom-slider': { // Use the class name of your slider container
            loop: true,
            margin: 20,
            nav: true,
            showTracker: true,
            drag: true,
            autoplay: {
                delay: 4000,
                pauseOnHover: true
            },
            responsive: {
                0: { items: 1 },    // 1 item on screens < 768px
                768: { items: 2 },  // 2 items on screens >= 768px
                1024: { items: 3 }  // 3 items on screens >= 1024px
            }
        }
    });
</script>

Basic Slider Demo

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

A simple implementation showing the core slider functionality with default navigation, tracker, and draggable support.

Autoplay Slider with Loop & Pause on Hover

Auto Slide 1

Auto Slide 2

Auto Slide 3

Auto Slide 4

Auto Slide 5

Auto Slide 6

Auto Slide 7

Experience smooth automatic transitions. Hover over the slider to pause the autoplay, and it will resume when your mouse leaves.

Slider with Disabled Drag

No Drag 1

No Drag 2

No Drag 3

No Drag 4

No Drag 5

This slider demonstrates how to disable the dragging feature. Navigation is controlled solely by the previous/next buttons.

Slider with Image Content

Majestic mountains in the morning light.

Tranquil green forest, full of life.

The calming blue of the endless ocean.

City lights twinkling in the night.

Golden sand dunes under a clear sky.