✨ Kaysa: Modular horizontal slider with touch controls, custom scrollbars, and responsive gap settings. Built with pure JavaScript for seamless integration.
- 🎨 Dual Configuration (JS + HTML attributes)
- 📱 Mobile-friendly touch support
- ⚡ 8KB Gzipped (Zero dependencies)
- 🔍 Interactive Help (
Kaysa.manual())
Note: The
targetparameter is required and must be a valid DOM element or selector. All other options are optional.
Make sure to include the stylesheet and the script:
<head>
<link rel="stylesheet" href="dist/kaysa.min.css" />
<script type="text/javascript" src="dist/kaysa.min.js"></script>
</head>Minyatur also allows configuring behavior using data-* attributes directly in HTML. This is ideal for simple use-cases without writing JavaScript.
Example:
<div class="slider"
data-kaysa-scroll-speed="0.7"
data-kaysa-gap="20px"
data-kaysa-use-custom-scrollbar="true">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>new Kaysa({
target: '.slider', // Required - selector or element
scrollSpeed: 0.7, // 0.1 (slow) - 1 (fast)
gap: '20px', // CSS valid spacing
useCustomScrollbar: true
});<div class="slider"
data-kaysa-scroll-speed="0.7"
data-kaysa-gap="20px"
data-kaysa-use-custom-scrollbar="true">
<!-- slider items here -->
</div>| Option | Type | Default | HTML Attribute |
|---|---|---|---|
scrollSpeed |
number |
0.8 |
data-kaysa-scroll-speed |
gap |
string |
'15px' |
data-kaysa-gap |
useCustomScrollbar |
boolean |
false |
data-kaysa-use-custom-scrollbar |
Run in console:
Kaysa.manual(); // Shows both syntax optionsMIT © 2024 edukah