Building interactive sliders for modern websites sounds simple — until you need smooth animations, responsive layouts, touch interactions, accessibility, and advanced visual effects without adding unnecessary dependencies.
I wanted to explore a different approach.
So, I built Mozert Slider — a lightweight, dependency-free JavaScript slider and carousel library designed for modern web experiences.
It comes with a collection of effects, flexible layouts, and advanced features while keeping the core library lightweight.
Today, I want to introduce it to the developer community and share what it offers.
🚀 Meet Mozert Slider
Mozert Slider is a dependency-free, touch-friendly, accessible JavaScript carousel library with 3D effects, flexible layouts, and advanced interaction features.
🔗 Live Demo: https://mozert-slider.netlify.app/
📦 NPM: https://www.npmjs.com/package/@mozert-studio/mozert-slider
💻 GitHub: https://github.com/mozert-studio/mozert-slider
The goal was to build one flexible slider library that can handle everything from a simple image carousel to more creative, animation-driven experiences.
✨ What's Included?
Rather than focusing on just basic sliding functionality, I wanted Mozert Slider to support different creative and practical use cases.
1. Multiple Animation Effects
Mozert Slider includes several transition styles:
- Slide
- Fade
- Coverflow
- Cube
- Flip
- Cards
- Creative
These effects make it possible to create different visual experiences without building custom slider animations from scratch.
2. Flexible Layout Options
Different projects need different slider layouts.
Mozert Slider supports:
- Infinite loop
- Responsive breakpoints
- Fractional slides per view
- Variable slide widths
- Center mode
- Custom spacing
- Vertical sliders
- RTL support
- Rows and grid-style layouts
3. Advanced Features
There are also additional features for more interactive experiences:
- Free mode
- Mousewheel navigation
- Scrollbar
- Parallax
- Zoom
- Virtual slides
- Hash navigation
- Marquee
- Video autoplay
4. Accessibility
Accessibility should not be an afterthought.
Mozert Slider is designed with accessibility in mind and respects the prefers-reduced-motion setting, allowing users who prefer reduced motion to have a more comfortable experience.
📦 Lightweight and Dependency-Free
One of the main goals was to avoid unnecessary dependencies.
Mozert Slider is built without requiring jQuery or another carousel library.
According to the current project build information:
- Core + all modules: approximately 18 KB gzipped.
- Core only: approximately 12 KB gzipped.
- No required external dependencies.
- jQuery integration is optional.
The actual bundle size depends on which build and modules you use.
🛠️ Getting Started
Installing Mozert Slider is straightforward.
Install using npm
npm install @mozert-studio/mozert-slider
Import the library
import Mozert from '@mozert-studio/mozert-slider';
import '@mozert-studio/mozert-slider/css';
import '@mozert-studio/mozert-slider/theme.css';
Initialize your slider
new Mozert('.slider', {
slidesToShow: 3,
spaceBetween: 16,
pagination: {
type: 'dynamic'
}
});
That's the basic setup.
You can explore the available configuration options and examples in the project documentation.
🎨 Explore the Interactive Demos
I believe developers should be able to see how a library behaves before adding it to a project.
That's why I created a dedicated demo website for Mozert Slider.
You can explore different effects, layouts, and slider configurations there.
👉 Explore the live demo:
https://mozert-slider.netlify.app/
Try different configurations and see how the slider behaves across different layouts.
🧩 Built for Different Projects
Mozert Slider can be useful for a variety of interfaces:
- Product image galleries
- E-commerce product carousels
- Portfolio showcases
- Creative agency websites
- Landing page sections
- Testimonial sliders
- Editorial and content carousels
- Interactive storytelling experiences
Whether you need a simple responsive carousel or a more creative 3D presentation, the library provides different options to build it.
🔍 What's Next?
Mozert Slider is an evolving open-source project.
There is still plenty of room to improve, optimize, and expand the library.
My focus moving forward is on:
- Improving performance and reliability.
- Expanding examples and documentation.
- Making the developer experience better.
- Improving browser and device compatibility.
- Listening to feedback from real-world projects.
- Building a stronger open-source community.
I would love to hear how developers use it and what features they would like to see next.
❤️ Try It and Share Your Feedback
If you are working on a JavaScript project that needs a flexible slider or carousel, give Mozert Slider a try.
Your feedback, suggestions, bug reports, and contributions are welcome.
⭐ Star the GitHub repository:
https://github.com/mozert-studio/mozert-slider
📦 Install from npm:
https://www.npmjs.com/package/@mozert-studio/mozert-slider
🌐 Explore the demos:
https://mozert-slider.netlify.app/
This is my journey of building Mozert Slider, and I'm excited to see where the project goes next.
Built with curiosity. Improved with feedback. Open to everyone.
Top comments (0)