{"id":20708556,"url":"https://github.com/matb85/modular-slider","last_synced_at":"2026-03-09T14:06:24.648Z","repository":{"id":45342966,"uuid":"350691269","full_name":"Matb85/modular-slider","owner":"Matb85","description":" A dependency-free slider with no DOM manipulations!","archived":false,"fork":false,"pushed_at":"2025-02-09T23:14:41.000Z","size":5730,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-23T02:48:53.480Z","etag":null,"topics":["carousel","carousel-component","carousel-plugin","carousel-slider","dependency-free","javascript","slider","slider-component","sliders","slideshow","svelte","sveltejs","typescript","vite","vue","vue3"],"latest_commit_sha":null,"homepage":"https://matb85.github.io/modular-slider/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Matb85.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-23T11:44:40.000Z","updated_at":"2025-02-09T23:14:45.000Z","dependencies_parsed_at":"2024-06-04T12:28:28.230Z","dependency_job_id":"37d87dd3-33dc-4279-b220-b5af992a29cb","html_url":"https://github.com/Matb85/modular-slider","commit_stats":{"total_commits":210,"total_committers":3,"mean_commits":70.0,"dds":0.3761904761904762,"last_synced_commit":"fe6f500b87ce46edd5d4f0c2724ec7f1087c5a70"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matb85%2Fmodular-slider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matb85%2Fmodular-slider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matb85%2Fmodular-slider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Matb85%2Fmodular-slider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Matb85","download_url":"https://codeload.github.com/Matb85/modular-slider/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250360249,"owners_count":21417717,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carousel","carousel-component","carousel-plugin","carousel-slider","dependency-free","javascript","slider","slider-component","sliders","slideshow","svelte","sveltejs","typescript","vite","vue","vue3"],"created_at":"2024-11-17T01:32:07.210Z","updated_at":"2026-03-09T14:06:24.473Z","avatar_url":"https://github.com/Matb85.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Modular Slider\n\n## A dependency-free slider with NO DOM manipulations, written in Typescript\n\n### [Check out the demos here](https://matb85.github.io/modular-slider/)\n\nModular Slider aims to deliver just what you want, while using the best of EcmaScript goodies. Here are some of its features:\n\n- :label: written in Typescript and ESM\n- :zap: relies on promises, async/await and event listeners\n- :art: modular architecture - optimized for tree-shaking, weighs nothing in your final build\n- :fire: absolutely no DOM manipulations - no removing, adding or cloning nodes, just class and style attribute tweaks\n- :rocket: works perfectly with any frontend framework - does not break down v-dom thanks to no DOM manipulations\n- :boom: supports SSR - tested in [Nuxt.js](https://nuxt.com/) \u0026 [SvelteKit](https://svelte.dev/)\n\n**This package ships as an esm module only.**\n\n## Architecture\n\nModular Slider consists of **_base classes_** and **_plugins_**:\n\n### Base classes\n\nBase classes provide basic functionalities of the slider. Their names are **PascalCase**. currently, there are 3 mixins:\n\n- Carousel - provides methods for a carousel slider (with a loop)\n- NoLoop - provides methods for a basic slider\n- SliderBase - an abstract class, not a ready-to-use slider, provides basic methods for creating your own slider\n\n### Plugins\n\nPlugins are functions that enrich your slider with non-critical features. Their names are all **camelCase**. Here are the currently available plugins:\n\n- swipeHandler - provides event handling - **compulsory if you want to drag the slider with mouse/touch**\n- buttons - adds next/previous slide buttons\n- pagination - adds pagination\n- autoplay - adds autoplay\n- duplicate - useful for Carousels, makes sure that there are no fewer sliders than the set number of slides per view + 2 which is required for the loop\n- lazyLoading - enables lazy loading images in the slider, loads image's srcset when the slide is in view\n\n## Usage\n\nFirst of all download the package:\n\n```bash\n$ npm i modular-slider\n$ pnpm i modular-slider\n$ yarn add modular-slider\n$ bun install modular-slider\n$ deno install npm:modular-slider\n```\n\nOnce you've done that, take a look at an example setup:\n\n1. Add markup:\n\n- outer **container** with **id** and **.MS-wrapper** class\n- inner **container** with **.MS-con** class \n- some **slides inside** - no classes required\n\n```html\n\u003csection class=\"your-slider-class MS-wrapper\"\u003e\n  \u003cul id=\"your-slider-id\" class=\"MS-con\"\u003e\n    \u003cli\u003e1\u003c/li\u003e\n    \u003cli\u003e2\u003c/li\u003e\n    \u003cli\u003e3\u003c/li\u003e\n    \u003cli\u003e4\u003c/li\u003e\n    \u003cli\u003e5\u003c/li\u003e\n    \u003cli\u003e6\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/section\u003e\n\n\u003c!-- add buttons for the purpose of the example --\u003e\n\u003csection class=\"slider-buttons\"\u003e\n  \u003cbutton id=\"prev\"\u003eprev\u003c/button\u003e\n  \u003cbutton id=\"next\"\u003enext\u003c/button\u003e\n\u003c/section\u003e\n```\n\n2. import css from \"modular-slider/dist/modular-slider.css\" and follow [**one of the available options**](#css-options). This example uses the default option\n\n```scss\n@import \"modular-slider/dist/modular-slider.css\";\n\n.your-slider-class {\n  --number-of-slides: 6; // the number of the slides, total\n  --slides-per-view: 2; // the number of how many slides are displayed at once\n  // your css...\n}\n```\n\n3. Add js\n\n```js\nimport { Carousel, swipeHandler, lazyLoading } from \"modular-slider\";\n\nnew Carousel({\n   container: \"your-slider-id\", // id of the inner container\n   initialSlide: 1, // optional, default is 0\n   plugins: [\n      // enables dragging the slider with mouse/touch\n      swipeHandler(),\n      // the button plugin uses the querySelector method, hence # at the beginning\n      buttons({ nextBtn: \"#next\", prevBtn: \"#prev\" })\n   ],\n});\n```\n\n**[You can find more examples here](https://matb85.github.io/modular-slider/)**\n\n## CSS options\n\nBy 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.\n\n1. Width in percentage (default)\n   the outer container has a specified width and the slides subordinate to it\n\n\u003e e.g. the container has width set to **30rem** or **80%** whereas slides have width set to **50%**\n\n```scss\n.your-slider-class.MS-wrapper {\n  // you DON'T have to set --number-of-slides - it's just a fallback value just in case something goes wrong\n  --number-of-slides: 6; // the number of the slides, total\n  --slides-per-view: 2; // the number of how many slides are displayed at once\n  --slide-margin: 25px; // the left and right margin of each element\n  width: 80%; // add some width\n}\n```\n\n2. Fixed width (add **.MS-fixed** class)\n   the slides have a specified width - the container subordinates to them\n\n\u003e e.g. the container **does not** have a set width whereas slides have width set to **15rem**\n\n```scss\n.your-slider-class.MS-fixed.MS-wrapper {\n  --slide-width: 15rem; // the width of each slide\n  --slide-margin: 25px; // the left and right margin of each element\n  --slides-per-view: 2; // the number of how many slides are displayed at once\n  // don't specify the width - it will be calculated based on the variables above\n}\n```\n\n**By default --slide-margin is set to 0px.**\n\n## Contributing\n\nModular 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:\n\n## [Changelog](https://github.com/Matb85/modular-slider/blob/master/CHANGELOG.md)\n\n## [License](https://github.com/Matb85/modular-slider/blob/master/LICENSE.txt)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatb85%2Fmodular-slider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatb85%2Fmodular-slider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatb85%2Fmodular-slider/lists"}