https://github.com/foo123/minislider

Optimized responsive mini slider (up to 12 slides) for Desktop and Mobile
https://github.com/foo123/minislider

responsive slider

Last synced: about 1 month ago
JSON representation

Optimized responsive mini slider (up to 12 slides) for Desktop and Mobile

• Host: GitHub
• URL: https://github.com/foo123/minislider
• Owner: foo123
• Created: 2023-11-10T06:37:54.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2023-12-13T07:40:05.000Z (11 months ago)
• Last Synced: 2023-12-13T09:09:43.399Z (11 months ago)
• Topics: responsive, slider
• Language: JavaScript
• Homepage:
• Size: 24.6 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# minislider

Optimized responsive mini slider (up to 12 slides) for Desktop and Mobile

**version: 1.1.0** (6.5kB minified)

**demo**

```html

.minislider {

    width: 100%;

    margin: 0 auto;

    --slides-per-area: 1;

    --aspect-ratio: calc(16 / 9); /* 16 : 9 */

}





    

    

    





    

    

    









minislider(document.querySelectorAll('.minislider')).start();

```


![mini slider](/minislider.gif)

**Options:**

The following are flexible options via CSS custom properties.

* `--slides-per-area`: number of slides visible at the same time (default `1`)

* `--aspect-ratio`: aspect ratio of slide (default `1 : 1`)

* `--use-aspect-ratio`: flag enabling use of aspect ratio, else custom height management (default `1`)

* `--auto-play`: flag enabling slideshow autoplay (default `0`)

* `--delay`: duration in `ms` for current slide to stay visible during autoplay (default `2000ms`)

* `--swipe`: duration in `ms` for swipe transition (default `400ms`)

* `--bullet-color`: bullet color (default `#fff`);

* `--bullet-active-color`: active bullet color (default `#999`);

* `--slide-color`: slide background color (default `#f0f0f0`);