diff --git a/README.md b/README.md index b9947cb..da5190f 100644 --- a/README.md +++ b/README.md @@ -8,16 +8,16 @@ It does not implement every feature found in other carousel libraries. Instead, Mouse-drag behavior closely follows native touch scrolling in the browser, including inertia and snapping to a slide. Thus dragging with the mouse feels pretty identical to native scrolling on a touch device or using a trackpad. -| File | Size | -| ---------- | ------: | -| snappy.js | 6,17 kB | -| snappy.css | 1,11 kB | +| File | Size | gzip | +| ---------- | ------: | -----: | +| snappy.js | 7.5k kB | 2.2 KB | +| snappy.css | 0.9 B | 0.4 KB | ## Usage -### CSS only for a basic scroll container +### Only CSS for a basic scroll container You can use Snappy without JavaScript. This gives you a simple CSS-only scroll container with snapping slides. @@ -26,13 +26,14 @@ You can use Snappy without JavaScript. This gives you a simple CSS-only scroll c -
-
-
1
-
2
+
+

Carousel Heading

+
    +
  • 1
    • +
  • 2
    • ... -
-
+ + ``` Snappy is mostly unstyled, leaving the appearance up to you. @@ -51,10 +52,6 @@ Options data-direction="x" (default) data-direction="y" -data-gap="var(--size-1)" -data-gap="10px" -data-gap="1rem" - data-snap-stop="always" data-snap-stop="normal" (default) @@ -62,17 +59,18 @@ data-snap-align="center" (default) data-snap-align="start" data-snap-align="end" --> -
+

Carousel Heading

-
-
1
-
2
+
-
- + + +``` ### Add JavaScript for a carousel @@ -83,17 +81,20 @@ Including the JavaScript adds the following features: - Mouse dragging ```html -
-
-
1
-
2
- ... -
+
+

Carousel Heading

+ - - - -
+ + + + ``` diff --git a/index.html b/index.html index df08c9b..22782da 100644 --- a/index.html +++ b/index.html @@ -3,8 +3,12 @@ - + + Snappy + + - +
+

Snappy

+
-

Snappy

+
- -
-
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
+ --> +
+ +
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
  • 6
    • +
  • 7
    • +
  • 8
    • +
- - - -
+ + + + -
-
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
+
+ +
    +
  • 1
    • +
  • 2
    • +
  • 3
    • +
  • 4
    • +
  • 5
    • +
  • 6
    • +
  • 7
    • +
  • 8
    • +
- - - -
+ + + + +
diff --git a/src/snappy.css b/src/snappy.css index 5ad13dd..3d2dc09 100644 --- a/src/snappy.css +++ b/src/snappy.css @@ -9,6 +9,8 @@ cursor: grab; scroll-behavior: smooth; scroll-snap-type: x mandatory; + margin: 0; + padding: 0; &.is-dragging { scroll-snap-type: none !important; @@ -23,14 +25,20 @@ scroll-snap-stop: normal; } - .pagination .dot { - display: inline-block; - width: 1rem; - height: 1rem; - background-color: silver; + .pagination { + margin: 0; + padding: 0; + list-style: none; } - .prev, .next { + .pagination .dot { + width: 1rem; + height: 1rem; + border: none; + } + + .prev, + .next { touch-action: manipulation; } @@ -54,4 +62,15 @@ &[data-snap-stop="always"] .slide { scroll-snap-stop: always; } +} + +.visually-hidden { + border: 0; + clip-path: inset(50%); + height: 1px; + margin: 0; + overflow: hidden; + position: absolute; + white-space: nowrap; + width: 1px; } \ No newline at end of file diff --git a/src/snappy.js b/src/snappy.js index a6dffdf..7a4008a 100644 --- a/src/snappy.js +++ b/src/snappy.js @@ -360,14 +360,21 @@ class Carousel { createPagination() { this.slides.forEach((slide, index) => { // Populate the pagination container with dots for each slide - let div = document.createElement('div'); - div.classList.add('dot'); - div.addEventListener('click', () => this.goToSlide(index)); - this.pagination.appendChild(div); + let li = document.createElement('li'); + let button = document.createElement('button'); + button.classList.add('dot'); + button.addEventListener('click', () => this.goToSlide(index)); + let name = document.createElement('span'); + name.textContent = "Slide " + (index + 1); + name.classList.add("visually-hidden"); + + button.appendChild(name); + li.appendChild(button); + this.pagination.appendChild(li); // Store a reference to the pagination dots in the carousel object for later use if (!this.paginationDots) this.paginationDots = []; - this.paginationDots.push(div); + this.paginationDots.push(button); }); } @@ -449,6 +456,9 @@ class Carousel { if (this.activeSlideIndex === this.renderedActiveSlideIndex) return; this.renderedActiveSlideIndex = this.activeSlideIndex; + this.prevButton.disabled = this.activeSlideIndex <= 0; + this.nextButton.disabled = this.activeSlideIndex >= this.slides.length - 1; + this.slides.forEach((slide, index) => { slide.classList.toggle('is-active', index === this.activeSlideIndex); });