Tooloop/Snappy-Carousel
2
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Change html structure to get get rid of id's

Browse Source
This commit is contained in:
vollstock committed 2026-10-02 17:08:57 +02:00
1 parent 6bd456764e
commit fa97f2c369
4 files changed
+215 -162
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/snappy.css
+42 -32
View File
@@ -1,57 +1,67 @@
.snappy-carousel {
display: flex;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
user-select: none;
cursor: grab;
scroll-behavior: smooth;
&[data-direction="y"] {
.scroll-container {
display: flex;
flex-direction: row;
overflow-x: auto;
overflow-y: hidden;
user-select: none;
cursor: grab;
scroll-behavior: smooth;
scroll-snap-type: x mandatory;
&.is-dragging {
scroll-snap-type: none;
scroll-behavior: unset;
}
}
.slide {
flex-shrink: 0;
scroll-snap-align: center;
scroll-snap-stop: normal;
}
.pagination .dot {
display: inline-block;
width: 1rem;
height: 1rem;
background-color: silver;
}
/* Options */
&[data-direction="y"] .scroll-container {
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
}
&.is-dragging {
scroll-snap-type: none;
scroll-behavior: unset;
}
scroll-snap-type: x mandatory;
&[data-direction="y"] {
&[data-direction="y"] .scroll-container {
flex-direction: column;
overflow-x: hidden;
overflow-y: auto;
scroll-snap-type: y mandatory;
}
gap: var(--carousel-gap, 0);
gap: attr(data-gap type(*), 0);
&[data-gap] {
--carousel-gap: attr(data-gap type(*), 0);
.snappy-slide {
flex-shrink: 0;
scroll-snap-align: center;
scroll-snap-stop: normal;
.scroll-container {
gap: var(--carousel-gap, 0);
}
}
&[data-snap-align="start"] .snappy-slide {
&[data-snap-align="start"] .slide {
scroll-snap-align: start;
}
&[data-snap-align="end"] .snappy-slide {
&[data-snap-align="end"] .slide {
scroll-snap-align: end;
}
&[data-snap-stop="always"] .snappy-slide {
&[data-snap-stop="always"] .slide {
scroll-snap-stop: always;
}
}
.snappy-pagination-dot {
display: inline-block;
width: 1rem;
height: 1rem;
background-color: silver;
}
src/snappy.js
+27 -29
View File
@@ -16,7 +16,7 @@ class Snappy {
class Carousel {
// DOM references
element = null;
scrollContainer = null;
prevButton = null;
nextButton = null;
pagination = null;
@@ -37,24 +37,23 @@ class Carousel {
activeSlideIndex = 0;
constructor(element) {
this.element = element;
this.direction = this.element.dataset.direction === 'y' ? 'y' : 'x';
this.scrollContainer = element.querySelector('.scroll-container');
this.direction = element.dataset.direction === 'y' ? 'y' : 'x';
const gap = element.dataset.gap;
if (gap) this.scrollContainer.style.setProperty('--carousel-gap', gap);
this.slides = this.scrollContainer.querySelectorAll('.slide');
const gap = this.element.dataset.gap;
if (gap) this.element.style.setProperty('--carousel-gap', gap);
this.prevButton = document.querySelector(`.prev`);
this.nextButton = document.querySelector(`.next`);
this.pagination = document.querySelector(`.pagination`);
this.slides = this.element.querySelectorAll('.snappy-slide');
this.prevButton = document.querySelector(`.snappy-prev[data-carousel="${this.element.id}"]`);
this.nextButton = document.querySelector(`.snappy-next[data-carousel="${this.element.id}"]`);
this.pagination = document.querySelector(`.snappy-pagination[data-carousel="${this.element.id}"]`);
this.element.addEventListener('mousedown', this.startDrag.bind(this));
this.element.addEventListener('mousemove', this.drag.bind(this));
this.element.addEventListener('mouseup', this.endDrag.bind(this));
this.element.addEventListener('mouseleave', this.endDrag.bind(this));
this.element.addEventListener('touchstart', this.reset.bind(this));
this.element.addEventListener('wheel', this.reset.bind(this));
this.element.addEventListener('scroll', this.updateActiveSlide.bind(this));
this.scrollContainer.addEventListener('mousedown', this.startDrag.bind(this));
this.scrollContainer.addEventListener('mousemove', this.drag.bind(this));
this.scrollContainer.addEventListener('mouseup', this.endDrag.bind(this));
this.scrollContainer.addEventListener('mouseleave', this.endDrag.bind(this));
this.scrollContainer.addEventListener('touchstart', this.reset.bind(this));
this.scrollContainer.addEventListener('wheel', this.reset.bind(this));
this.scrollContainer.addEventListener('scroll', this.updateActiveSlide.bind(this));
if (this.prevButton) {
this.prevButton.addEventListener('click', () => this.prev());
@@ -73,7 +72,7 @@ class Carousel {
startDrag(e) {
this.isDragging = true;
this.element.classList.add('is-dragging'); // Disable scroll snapping
this.scrollContainer.classList.add('is-dragging'); // Disable scroll snapping
this.velocity = 0;
this.lastPosition = undefined;
this.lastTime = undefined;
@@ -113,7 +112,6 @@ class Carousel {
}
const target = this.calculateDragTarget();
const element = this.element;
const distance = target - this.getScrollPosition();
this.velocity = -distance * (1 - this.inertia) / 10;
@@ -159,19 +157,19 @@ class Carousel {
}
getScrollPosition() {
return this.direction === 'y' ? this.element.scrollTop : this.element.scrollLeft;
return this.direction === 'y' ? this.scrollContainer.scrollTop : this.scrollContainer.scrollLeft;
}
setScrollPosition(position) {
if (this.direction === 'y') {
this.element.scrollTop = position;
this.scrollContainer.scrollTop = position;
} else {
this.element.scrollLeft = position;
this.scrollContainer.scrollLeft = position;
}
}
calculateDragTarget() {
const element = this.element;
const element = this.scrollContainer;
const isVertical = this.direction === 'y';
const maxScrollPosition = isVertical
? element.scrollHeight - element.clientHeight
@@ -237,7 +235,7 @@ class Carousel {
reset() {
this.isDragging = false;
this.element.classList.remove('is-dragging');
this.scrollContainer.classList.remove('is-dragging');
this.velocity = 0
}
@@ -245,7 +243,7 @@ class Carousel {
this.slides.forEach((slide, index) => {
// Populate the pagination container with dots for each slide
let div = document.createElement('div');
div.classList.add('snappy-pagination-dot');
div.classList.add('dot');
div.addEventListener('click', () => this.goToSlide(index));
this.pagination.appendChild(div);
@@ -267,11 +265,11 @@ class Carousel {
const marginStart = isVertical ? 'scrollMarginTop' : 'scrollMarginLeft';
const marginEnd = isVertical ? 'scrollMarginBottom' : 'scrollMarginRight';
const cssPixels = value => Number.parseFloat(value) || 0;
const containerRect = this.element.getBoundingClientRect();
const containerStyle = getComputedStyle(this.element);
const containerRect = this.scrollContainer.getBoundingClientRect();
const containerStyle = getComputedStyle(this.scrollContainer);
const snapportStartEdge = containerRect[startEdge] +
(isVertical ? this.element.clientTop : this.element.clientLeft);
const clientExtent = isVertical ? this.element.clientHeight : this.element.clientWidth;
(isVertical ? this.scrollContainer.clientTop : this.scrollContainer.clientLeft);
const clientExtent = isVertical ? this.scrollContainer.clientHeight : this.scrollContainer.clientWidth;
const snapportStart = snapportStartEdge + cssPixels(containerStyle[paddingStart]);
const snapportEnd = snapportStartEdge + clientExtent - cssPixels(containerStyle[paddingEnd]);
const snapportCenter = (snapportStart + snapportEnd) / 2;