✨ 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)
- 🌓 Dark/Light Mode Support (via CSS class)
- 📱 Mobile-friendly touch support
- ⚡ Minimal footprint, 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-enhanced-scrollbar="true">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>Add .dark-mode class to <body> to activate dark theme:
<body class="dark-mode">
<div class="slider">...</div>
</body>new Kaysa({
target: '.slider', // Required - selector or element
scrollSpeed: 0.7,
gap: '20px',
enhancedScrollbar: true,
prevButtonContent: '←',
nextButtonContent: '→'
});<div class="slider"
data-kaysa-scroll-speed="0.7"
data-kaysa-gap="20px"
data-kaysa-enhanced-scrollbar="true"
data-kaysa-prev-button-content="←"
data-kaysa-next-button-content="→">
<!-- slider items here -->
</div>| Option | Type | Default | Description | HTML Attribute |
|---|---|---|---|---|
scrollSpeed |
number |
0.8 |
Determines the scrolling speed (value between 0.1–1). | data-kaysa-scroll-speed |
gap |
string |
'15px' |
Sets the gap between items (CSS value). | data-kaysa-gap |
enhancedScrollbar |
boolean |
false |
Enables/disables the custom scrollbar. | data-kaysa-enhanced-scrollbar |
prevButtonContent |
string |
'<' |
Content of the previous button. | data-kaysa-prev-button-content |
nextButtonContent |
string |
'>' |
Content of the next button. | data-kaysa-next-button-content |
Run the following command in the browser console to view interactive documentation:
Kaysa.manual(); // Shows both syntax optionsMIT © 2024 edukah