Smooth Touch-Enabled JavaScript Slider Library – kaysa

Preview:

Description:

kaysa is a lightweight, responsive, touch-enabled slider library designed for product carousels, image galleries, or just scrolling through a set of related items.

Key Features:

• Custom Scroll Speed: Control how fast the content scrolls with navigation buttons.
• Optional Custom Scrollbar: Use the browser’s default scrollbar or enable a minimal, styleable custom one.
• Responsive: Adapts to different screen sizes. Includes responsive gap settings between items.
• Touch Friendly: Works smoothly on mobile devices through native scroll behavior.
• Embed Anything: You can put pretty much any HTML element inside the slider items.
• Pure JavaScript: No external library dependencies.

How to use it:

1. Link the kaysa’s CSS and JS files in your HTML document.

<link rel="stylesheet" href="/dist/kaysa.min.css">
<script src="/dist/kaysa.min.js"></script>

2. Set up your HTML. You need a main container and an inner container for the items. Kaysa looks for the .kaysa-items class inside your target container by default. If it’s not there, the library creates it for you by wrapping the direct children of the target container.

<div class="kaysa-container">
  <div class="kaysa-items">
    <div class="kaysa-item">Slide 1</div>
    <div class="kaysa-item">Slide 2</div>
    <div class="kaysa-item">Slide 3</div>
    ...
  </div>
</div>

3. Initialize Kaysa and pass the following options:

• target: A CSS selector or DOM element. REQUIRED
• scrollSpeed: A number between 0.1 and 1 controlling the scrolling speed.
• gap: A string representing CSS spacing (e.g., “20px”).
• enhancedScrollbar: true,: A boolean to enable or disable the custom scrollbar.
• prevButtonContent & nextButtonContent: Next/Prev button content.

new Kaysa({
  target: '.kaysa-container', 
  scrollSpeed: 0.6,
  gap: '20px', 
  enhancedScrollbar: true, 
  prevButtonContent: '←',
  nextButtonContent: '→'
});

4. You can also pass options through HTML data attributes:

<div class="kaysa-container"
     data-kaysa-scroll-speed="0.5"
     data-kaysa-gap="20px"
     data-kaysa-use-enhanced-scrollbar="true"
     data-kaysa-prev-button-content="←">
     data-kaysa-next-button-content="→">
</div>

Comparison with Alternatives

• Swiper.js / Slick Carousel: These are the feature-packed behemoths. They offer tons of options: various transition effects, pagination styles, vertical sliding, lazy loading, accessibility features, extensive APIs, and plugins. They are great for complex requirements. However, they come with a larger footprint (JS/CSS size) and potentially a steeper learning curve.
• Tiny Slider: This is probably a closer competitor – lightweight, dependency-free, and handles common slider needs. Tiny Slider might have a few more built-in options (like responsive settings via JS objects, lazy loading, different navigation elements). Kaysa might be simpler if you literally just need horizontal scroll + optional custom scrollbar + nav buttons, and nothing else. Its approach with the built-in scrollbar is quite specific.

Choose Kaysa if your priority is minimal JS, pure CSS gaps, and an optional integrated custom scrollbar for a basic horizontal layout. If you need more complex animations, callbacks, or built-in accessibility features, look at Tiny Slider or Swiper.

FAQs

Q: How do I style the navigation buttons?
A: Target the .kaysa-button, .kaysa-button--left, and .kaysa-button--right classes in your CSS. You can override the default styles completely.

Q: Can I customize the custom scrollbar appearance beyond color and width?
A: Yes. The library adds .custom-scrollbar-track and .custom-scrollbar elements. You can target these with CSS for things like border-radius, background-color on the track, hover effects, etc.

Q: Is it accessible (a11y)?
A: It provides functional buttons (<button>), which is a good start. However, for robust accessibility, you should consider adding appropriate ARIA attributes yourself. For example, the main container might need role="region" and an aria-label. If the slides represent a list, the .kaysa-items could be role="list" and each .kaysa-item role="listitem". Focus management beyond the buttons isn’t explicitly handled by the library itself.

Q: How does it handle touch input?
A: Touch scrolling primarily relies on the browser’s native behavior for elements with overflow. You swipe directly on the .kaysa-items area. The custom scrollbar drag logic uses mouse events (mousedown, etc.), which most mobile browsers translate from touch events, so dragging the custom scrollbar thumb should also work on touch devices.

Q: Does Kaysa support infinite looping?
A: No, Kaysa doesn’t currently support infinite looping. It’s designed as a standard scrollable container with enhanced UX. If infinite looping is essential for your project, you might need a different library.

Changelog:

04/27/2025

• improvements and fix minor bugs