Loading repository data…
Matb85 / repository
A dependency-free slider with no DOM manipulations!
Modular Slider aims to deliver just what you want, while using the best of EcmaScript goodies. Here are some of its features:
This package ships as an esm module only.
Modular Slider consists of base classes and plugins:
Base classes provide basic functionalities of the slider. Their names are PascalCase. currently, there are 3 mixins:
Plugins are functions that enrich your slider with non-critical features. Their names are all camelCase. Here are the currently available plugins:
First of all download the package:
$ npm i modular-slider
$ pnpm i modular-slider
$ yarn add modular-slider
$ bun install modular-slider
$ deno install npm:modular-slider
Once you've done that, take a look at an example setup:
<section class="your-slider-class MS-wrapper">
<ul id="your-slider-id" class="MS-con">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</section>
<!-- add buttons for the purpose of the example -->
<section class="slider-buttons">
<button id="prev">prev</button>
<button id="next">next</button>
</section>
@import "modular-slider/dist/modular-slider.css";
.your-slider-class {
--number-of-slides: 6; // the number of the slides, total
--slides-per-view: 2; // the number of how many slides are displayed at once
// your css...
}
import { Carousel, swipeHandler, lazyLoading } from "modular-slider";
new Carousel({
container: "your-slider-id", // id of the inner container
initialSlide: 1, // optional, default is 0
plugins: [
// enables dragging the slider with mouse/touch
swipeHandler(),
// the button plugin uses the querySelector method, hence # at the beginning
buttons({ nextBtn: "#next", prevBtn: "#prev" })
],
});
You can find more examples here
By default, modular slider provides two css options. They both require some css variables that you may put either in the :root or .MS-wrapper element.
e.g. the container has width set to 30rem or 80% whereas slides have width set to 50%
.your-slider-class.MS-wrapper {
// you DON'T have to set --number-of-slides - it's just a fallback value just in case something goes wrong
--number-of-slides: 6; // the number of the slides, total
--slides-per-view: 2; // the number of how many slides are displayed at once
--slide-margin: 25px; // the left and right margin of each element
width: 80%; // add some width
}
e.g. the container does not have a set width whereas slides have width set to 15rem
.your-slider-class.MS-fixed.MS-wrapper {
--slide-width: 15rem; // the width of each slide
--slide-margin: 25px; // the left and right margin of each element
--slides-per-view: 2; // the number of how many slides are displayed at once
// don't specify the width - it will be calculated based on the variables above
}
By default --slide-margin is set to 0px.
Modular Slider by design encourages users to enhance it. Don't like the event handlers? Want the buttons/pagination to automatically generate themselves? Write a plugin that will do that. If you have created such an improvement, fell free to share it. PRs are welcome! :fire:
Selected from shared topics, language and repository description—not editorial ratings.
davidjerleke /
A lightweight carousel library with fluid motion and great swipe precision.