Swift Slider 🎞️

A lightweight, modern, responsive, draggable slider built with vanilla JavaScript and CSS.
Supports horizontal/vertical slides, autoplay, arrows, dots, infinite scroll, progress bar, and responsive breakpoints out of the box.

🚀 Installation

You can install via npm:

npm i swift-slider-js

Or include it directly from jsDelivr CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swift-slider-js/dist/swift.min.css">
<script src="https://cdn.jsdelivr.net/npm/swift-slider-js/dist/swift.min.js"></script>

📦 Usage

1. Basic HTML Structure

<div class="slider arrows-slide slider-dots responsive-slides" 
     data-slides="3" 
     data-slides-infinite="true" 
     data-slides-time="3000" 
     data-slides-hover="pause" 
     data-slides-progress="true">
  
  <div class="slider-card">
    <div class="slider-card-content">Slide 1</div>
  </div>
  
  <div class="slider-card">
    <div class="slider-card-content">Slide 2</div>
  </div>
  
  <div class="slider-card">
    <div class="slider-card-content">Slide 3</div>
  </div>

  <!-- Arrows -->
  <button class="slider-arrow slider-arrow-prev">&#10094;</button>
  <button class="slider-arrow slider-arrow-next">&#10095;</button>
</div>

2. Enable Vertical Mode

<div class="slider vertical-slides responsive-slides" data-slides="2">
  <div class="slider-card"><div class="slider-card-content">A</div></div>
  <div class="slider-card"><div class="slider-card-content">B</div></div>
  <div class="slider-card"><div class="slider-card-content">C</div></div>
</div>

3. JavaScript Initialization

No extra setup is required!
The slider auto-initializes on DOMContentLoaded.

⚙️ Options (via data- attributes or classes)

| Attribute / Class | Description | Example | |------------------|-------------|---------| | data-slides="3" | Number of slides to show | 3 | | data-slides-infinite="true" | Infinite loop | true / false | | data-slides-time="3000" | Autoplay interval (ms) | 3000 | | data-slides-hover="pause" | Pause autoplay on hover | pause | | data-slides-mode="center" | Enable center mode | center | | data-slides-progress="true" | Show progress bar | true / false | | data-slides-start="2" | Start from slide index (1-based) | 2 | | data-slides-scroll="2" | Number of slides to scroll | 2 | | data-slides-direction="reverse" | Reverse scroll direction | reverse | | .vertical-slides | Vertical slider | class | | .draggable | Enable drag/swipe | class | | .slider-dots | Show dots navigation | class | | .arrows-slide | Show navigation arrows | class | | .responsive-slides | Enable responsive breakpoints | class |

🎨 Customization

All colors, arrows, dots, and dimensions can be customized with CSS variables:

:root {
  --slider-card-bg: #f0f0f0;
  --slider-arrow-bg: rgba(0,0,0,0.5);
  --slider-dot-color: #ccc;
  --slider-dot-color-active: #7a91ff;
  --slider-progress-color: #7a91ff;
}

📊 Features

✅ Horizontal & Vertical Modes
✅ Infinite Loop / Autoplay / Pause on Hover
✅ Responsive Breakpoints (xs, sm, md, lg, xl, xxl)
✅ Center Mode
✅ Progress Bar
✅ Dots + Arrows Navigation
✅ Drag/Swipe Support
✅ Lightweight – No Dependencies

📜 License

MIT – free to use in personal and commercial projects.