https://github.com/foo123/minicarousel

Optimized responsive Carousel for Desktop and Mobile
https://github.com/foo123/minicarousel

carousel carousel-slider responsive

Last synced: about 1 month ago
JSON representation

Optimized responsive Carousel for Desktop and Mobile

• Host: GitHub
• URL: https://github.com/foo123/minicarousel
• Owner: foo123
• Created: 2023-12-11T09:19:44.000Z (11 months ago)
• Default Branch: master
• Last Pushed: 2024-01-09T08:27:43.000Z (10 months ago)
• Last Synced: 2024-01-09T11:09:30.250Z (10 months ago)
• Topics: carousel, carousel-slider, responsive
• Language: JavaScript
• Homepage: https://foo123.github.io/examples/minicarousel/
• Size: 358 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# minicarousel

Optimized responsive Carousel for Desktop and Mobile

**version: 1.2.2** (7kB minified)

**demo**

```html

.minicarousel {

    width: 1200px;

    max-width: 100%;

    margin: 40px auto;

    --visible-items: 4;

    --scroll-by: 0; /* scroll by all visible items at once */

}

.minicarousel li {

    padding: 70px 0;

    text-align: center;

    font-weight: 900;

    border: 4px solid #d9d9d9;

}

@media (max-width: 800px) {

.minicarousel {

    --visible-items: 2;

    --scroll-by: 1; /* scroll one by one */

}

}

@media (max-width: 400px) {

.minicarousel {

    --visible-items: 1;

    /*--show-buttons: 0;*/ /* hide prev/next buttons */

    --auto-scroll: auto; /* scroll manually */

}

}







1

2

3

4

5

6

7

8

9







minicarousel(document.querySelectorAll('.minicarousel'));

```


**output**

![minicarousel demo](/minicarousel.gif)