├── .npmignore
├── LICENSE
├── README.md
├── assets
    └── test.png
├── carouscroll.js
├── demo.html
└── package.json


/.npmignore:
--------------------------------------------------------------------------------
1 | assets/


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | Copyright (C) 2024 Zach Leatherman
2 | 
3 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
4 | 
5 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
6 | 
7 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # carouscroll
  2 | 
  3 | A web component to add next/previous buttons to a horizontal scrollable container.
  4 | 
  5 | * [Demos](https://zachleat.github.io/carouscroll/demo.html)
  6 | 
  7 | ## Features
  8 | 
  9 | * Interaction compatible with scroll or touch.
 10 | * No layout shift. Make sure you include the CSS snippet!
 11 | * (Optional) Smooth scrolling with `scroll-behavior: smooth`.
 12 | * (Optional) `loop` attribute to enable looping around from start/end.
 13 | * (Optional) Next/Previous buttons can be placed anywhere in the document.
 14 | * (Optional) `<output>` element can accessibly announce the current slide number (out of total number of slides).
 15 | 
 16 | ## Installation
 17 | 
 18 | You can install via `npm` ([`@zachleat/carouscroll`](https://www.npmjs.com/package/@zachleat/carouscroll)) or download the `carouscroll.js` JavaScript file manually.
 19 | 
 20 | ```shell
 21 | npm install @zachleat/carouscroll --save
 22 | ```
 23 | 
 24 | Add `carouscroll.js` to your site’s JavaScript assets.
 25 | 
 26 | ## Usage
 27 | 
 28 | First you need to add some critical CSS to your page. These styles are **crucial** to reduce Layout Shift (CLS), set the aspect ratio of the slides, and to avoid loading `loading="lazy"` images on off-screen slides.
 29 | 
 30 | ```css
 31 | carou-scroll {
 32 | 	display: flex;
 33 | 	overflow-x: scroll;
 34 | 	overflow-y: hidden;
 35 | }
 36 | carou-scroll > * {
 37 | 	min-width: 100%;
 38 | 	aspect-ratio: 16/9;
 39 | }
 40 | ```
 41 | 
 42 | Next, add the HTML:
 43 | 
 44 | ```html
 45 | <carou-scroll id="my-scroller">
 46 | 	<div class="demo-slide">1</div>
 47 | 	<div class="demo-slide">2</div>
 48 | 	<!-- … -->
 49 | </carou-scroll>
 50 | ```
 51 | 
 52 | That’s it!
 53 | 
 54 | ### Add buttons (optional)
 55 | 
 56 | For maximum flexibility, these buttons can be placed anywhere in the document and are tied by an `id` back to the parent scroller.
 57 | 
 58 | Make sure you think about the before/after JavaScript experience here. This component will remove `disabled` for you but you can add additional styling via your own CSS: `carou-scroll:defined {}`.
 59 | 
 60 | ```html
 61 | <button type="button" disabled data-carousel-previous="my-scroller">Previous</button>
 62 | <button type="button" disabled data-carousel-next="my-scroller">Next</button>
 63 | ```
 64 | 
 65 | ### Add output (optional)
 66 | 
 67 | This will update (and accessibly announce) a current status element with e.g. `Slide 1 of 10` text.
 68 | 
 69 | For maximum flexibility, this element can be placed anywhere in the document and is tied by an `id` back to the parent scroller.
 70 | 
 71 | ```html
 72 | <output data-carousel-output="my-scroller"></output>
 73 | ```
 74 | 
 75 | ### Make it loop around (optional)
 76 | 
 77 | Add the `loop` attribute.
 78 | 
 79 | ```html
 80 | <carou-scroll id="my-scroller" loop>
 81 | ```
 82 | 
 83 | ### Smooth scrolling CSS (optional)
 84 | 
 85 | ```css
 86 | carou-scroll {
 87 | 	scroll-behavior: smooth;
 88 | }
 89 | ```
 90 | 
 91 | ### Add your own scroll snap CSS (optional)
 92 | 
 93 | ```css
 94 | carou-scroll {
 95 | 	scroll-snap-type: x mandatory;
 96 | }
 97 | carou-scroll > * {
 98 | 	scroll-snap-align: center;
 99 | }
100 | ```


--------------------------------------------------------------------------------
/assets/test.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/zachleat/carouscroll/caf24d26f812fe81a856b9927606307d2e35c051/assets/test.png


--------------------------------------------------------------------------------
/carouscroll.js:
--------------------------------------------------------------------------------
  1 | class Carouscroll extends HTMLElement {
  2 | 	static tagName = "carou-scroll";
  3 | 
  4 | 	static register(tagName, registry) {
  5 | 		if(!registry && ("customElements" in globalThis)) {
  6 | 			registry = globalThis.customElements;
  7 | 		}
  8 | 
  9 | 		registry?.define(tagName || this.tagName, this);
 10 | 	}
 11 | 
 12 | 	static attr = {
 13 | 		orientation: "orientation",
 14 | 		disabled: "disabled",
 15 | 		prev: "data-carousel-previous",
 16 | 		next: "data-carousel-next",
 17 | 		output: "data-carousel-output",
 18 | 		outputCurrent: "data-carousel-output-current",
 19 | 		outputTotal: "data-carousel-output-total",
 20 | 	};
 21 | 
 22 | 	static classes = {
 23 | 	};
 24 | 
 25 | 	static css = `
 26 | :host {
 27 | 	display: flex;
 28 | 	overflow-x: scroll;
 29 | 	overflow-y: hidden;
 30 |  	overscroll-behavior-x: contain;
 31 | 	scroll-snap-type: x mandatory;
 32 | }
 33 | ::slotted(*) {
 34 | 	display: block;
 35 | 	min-width: 100%;
 36 | 	scroll-snap-align: center;
 37 | }
 38 | `;
 39 | 
 40 | 	connectedCallback() {
 41 | 		// https://caniuse.com/mdn-api_cssstylesheet_replacesync
 42 | 		if(this.shadowRoot || !("replaceSync" in CSSStyleSheet.prototype) || this.hasAttribute(Carouscroll.attr.disabled)) {
 43 | 			return;
 44 | 		}
 45 | 
 46 | 		let shadowroot = this.attachShadow({ mode: "open" });
 47 | 		let sheet = new CSSStyleSheet();
 48 | 		sheet.replaceSync(Carouscroll.css);
 49 | 		shadowroot.adoptedStyleSheets = [sheet];
 50 | 
 51 | 		let slot = document.createElement("slot");
 52 | 		shadowroot.appendChild(slot);
 53 | 
 54 | 		this.content = this;
 55 | 		this.content.setAttribute("tabindex", "0");
 56 | 		this.slides = this.content.children;
 57 | 
 58 | 		this.initializeButtons();
 59 | 		this.initializeOutput();
 60 | 
 61 | 		let activePage = this.findActivePage();
 62 | 		this.renderMetadata(activePage);
 63 | 
 64 | 		/* Manual scrolling */
 65 | 		/* Note: `scrollend` missing on Safari */
 66 | 		this.content.addEventListener("scrollend", () => {
 67 | 			this.renderMetadata(this.findActivePage());
 68 | 		});
 69 | 		// Manual touch scroll
 70 | 		this.content.addEventListener("touchend", () => {
 71 | 			this.renderMetadata(this.findActivePage());
 72 | 		})
 73 | 	}
 74 | 
 75 | 	get id() {
 76 | 		return this.getAttribute("id");
 77 | 	}
 78 | 
 79 | 	initializeButtons() {
 80 | 		this.nextButton = document.querySelector(`[${Carouscroll.attr.next}="${this.id}"]`);
 81 | 		this.prevButton = document.querySelector(`[${Carouscroll.attr.prev}="${this.id}"]`);
 82 | 
 83 | 		this.prevButton?.addEventListener("click", e => {
 84 | 			this._buttonClick("previous");
 85 | 			e.preventDefault();
 86 | 		}, false);
 87 | 
 88 | 		this.nextButton?.addEventListener("click", e => {
 89 | 			this._buttonClick("next");
 90 | 			e.preventDefault();
 91 | 		}, false);
 92 | 	}
 93 | 
 94 | 	initializeOutput() {
 95 | 		let output = document.querySelector(`[${Carouscroll.attr.output}="${this.id}"]`);
 96 | 		if(!output) {
 97 | 			return;
 98 | 		}
 99 | 
100 | 		this.output = output;
101 | 
102 | 		if(output.childElementCount === 0) {
103 | 			output.innerHTML = `<span ${Carouscroll.attr.outputCurrent}></span> of <span ${Carouscroll.attr.outputTotal}></span>`;
104 | 		}
105 | 
106 | 		this.outputCurrent = output.querySelector(`[${Carouscroll.attr.outputCurrent}]`);
107 | 		this.outputTotal = output.querySelector(`[${Carouscroll.attr.outputTotal}]`);
108 | 
109 | 		// https://www.w3.org/WAI/tutorials/carousels/functionality/
110 | 		output.setAttribute("aria-live", "polite");
111 | 		output.setAttribute("aria-atomic", "true");
112 | 	}
113 | 
114 | 	renderOutput(activePage) {
115 | 		if(!this.outputCurrent || !this.outputTotal) {
116 | 			return;
117 | 		}
118 | 
119 | 		this.outputCurrent.innerText = this.findIndexForPage(activePage);
120 | 		this.outputTotal.innerText = this.content.children.length;
121 | 	}
122 | 
123 | 	findIndexForPage(page) {
124 | 		let j = 0;
125 | 		for(let child of this.content.children) {
126 | 			j++;
127 | 
128 | 			if(page === child) {
129 | 				return j;
130 | 			}
131 | 		}
132 | 		return -1;
133 | 	}
134 | 
135 | 	findActivePage() {
136 | 		let activePage;
137 | 		let scrollPosition = this.content.scrollLeft;
138 | 
139 | 		for(let child of this.content.children) {
140 | 			activePage = child;
141 | 
142 | 			// start of active page must be before center of window
143 | 			// end of active page must be after center of window
144 | 			let start = child.offsetLeft;
145 | 			let end = start + child.offsetWidth;
146 | 
147 | 			let scrollMidpoint = scrollPosition + this.content.offsetLeft + this.content.offsetWidth / 2;
148 | 
149 | 			if(start <= scrollMidpoint && end >= scrollMidpoint) {
150 | 				break;
151 | 			}
152 | 		}
153 | 
154 | 		return activePage;
155 | 	}
156 | 
157 | 	isLooping() {
158 | 		return this.hasAttribute("loop");
159 | 	}
160 | 
161 | 	renderMetadata(page) {
162 | 		this.renderOutput(page);
163 | 		this.disablePrevNextButtons(page);
164 | 	}
165 | 
166 | 	disablePrevNextButtons(moveToPage) {
167 | 		if(!this.nextButton || !this.prevButton) return;
168 | 
169 | 		if(this.isLooping()) {
170 | 			this.prevButton.removeAttribute("disabled");
171 | 			this.nextButton.removeAttribute("disabled");
172 | 			return;
173 | 		}
174 | 
175 | 		if(!moveToPage.nextElementSibling) {
176 | 			this.nextButton.setAttribute("disabled", "");
177 | 		} else {
178 | 			this.nextButton.removeAttribute("disabled");
179 | 		}
180 | 
181 | 		if(!moveToPage.previousElementSibling) {
182 | 			this.prevButton.setAttribute("disabled", "");
183 | 		} else {
184 | 			this.prevButton.removeAttribute("disabled");
185 | 		}
186 | 	}
187 | 
188 | 	_goToSlide(index) {
189 | 		const slideOffsetLeft = this.slides[index].offsetLeft;
190 | 
191 | 		// In case the carousel is used in a grid system and isn’t full width,
192 | 		// we need the carousel position to not over scroll the slide.
193 | 		const carouselOffsetLeft = this.content.offsetLeft;
194 | 
195 | 		this.content.scrollLeft = slideOffsetLeft - carouselOffsetLeft;
196 | 		this.renderMetadata(this.slides[index]);
197 | 	}
198 | 
199 | 	_buttonClick(direction) {
200 | 		let activePage = this.findActivePage();
201 | 
202 | 		// TODO implement minScrollThreshold (of half the viewport width?)
203 | 		if(activePage) {
204 | 			let isLoop = this.isLooping();
205 | 			let moveToPage = activePage[ `${direction}ElementSibling` ];
206 | 
207 | 			// Loop the carousel around
208 | 			if(!moveToPage && isLoop) {
209 | 				if(isLoop) {
210 | 					if(direction === "next") {
211 | 						// loop to the beginning
212 | 						this.content.scrollLeft = 0;
213 | 					} else {
214 | 						this.content.scrollLeft = this.content.lastElementChild.offsetLeft;
215 | 					}
216 | 				}
217 | 			} else if(moveToPage) {
218 | 				// Stop at the end
219 | 				let newScrollPosition = moveToPage.offsetLeft + moveToPage.offsetWidth / 2 - document.body.clientWidth / 2;
220 | 				this.content.scrollLeft = newScrollPosition;
221 | 
222 | 				this.renderMetadata(moveToPage);
223 | 			}
224 | 		}
225 | 	}
226 | }
227 | 
228 | Carouscroll.register();
229 | 
230 | export { Carouscroll }
231 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <html lang="en">
  3 | 	<head>
  4 | 		<meta charset="utf-8">
  5 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0">
  6 | 		<meta name="description" content="">
  7 | 		<title>&lt;carou-scroll&gt; Web Component</title>
  8 | 		<style>
  9 | 		/* Demo styles */
 10 | 		body {
 11 | 			font-family: system-ui, sans-serif;
 12 | 		}
 13 | 		/* See https://www.zachleat.com/web/fluid-images/#content-layout-shift-addendum */
 14 | 		img {
 15 | 			display: block;
 16 | 			max-width: 100%;
 17 | 			height: auto;
 18 | 		}
 19 | 
 20 | 		.demo-carousel {
 21 | 			max-width: 700px;
 22 | 			margin: 0 auto;
 23 | 		}
 24 | 		.demo-carousel-meta {
 25 | 			display: flex;
 26 | 			justify-content: space-between;
 27 | 			padding: .5em 0;
 28 | 		}
 29 | 		.demo-slide {
 30 | 			display: flex;
 31 | 			align-items: center;
 32 | 			justify-content: center;
 33 | 			height: 100%;
 34 | 			font-size: 2em;
 35 | 			background: #ddd;
 36 | 			border: 1px solid;
 37 | 			box-sizing: border-box;
 38 | 		}
 39 | 		</style>
 40 | 
 41 | 		<style>
 42 | 		carou-scroll {
 43 | 			display: flex;
 44 | 			overflow-x: scroll;
 45 | 			overflow-y: hidden;
 46 | 		}
 47 | 		carou-scroll > * {
 48 | 			min-width: 100%;
 49 | 			aspect-ratio: 16/9;
 50 | 		}
 51 | 		</style>
 52 | 		<script type="module" src="carouscroll.js"></script>
 53 | 	</head>
 54 | 	<body>
 55 | 		<header>
 56 | 			<h1>&lt;carou-scroll&gt;  Web Component</h1>
 57 | 		</header>
 58 | 		<main>
 59 | 			<p><a href="https://github.com/zachleat/carouscroll">Back to the Source Code</a></p>
 60 | 			<h2>Stock</h2>
 61 | 			<p>This one includes a variety of child element types including <code>&lt;img&gt;</code> and <code>&lt;picture&gt;</code>. Note that the images are not loaded until you begin to scroll horizontally (when the browser supports <code>loading="lazy"</code>).</p>
 62 | 			<div class="demo-carousel">
 63 | 				<carou-scroll id="demo-1">
 64 | 					<div class="demo-slide">1</div>
 65 | 					<span class="demo-slide">2</span>
 66 | 					<b class="demo-slide">3</b>
 67 | 					<em class="demo-slide">4</em>
 68 | 					<img class="demo-slide" src="assets/test.png" width="800" height="450" alt="800×450 sample image" loading="lazy">
 69 | 					<span class="demo-slide"><p>6</p></span>
 70 | 					<span class="demo-slide">7</span>
 71 | 					<span class="demo-slide">8</span>
 72 | 					<span class="demo-slide">9</span>
 73 | 					<picture class="demo-slide"><img src="assets/test.png" width="800" height="450" alt="800×450 sample image" loading="lazy"></picture>
 74 | 					<span class="demo-slide">10</span>
 75 | 				</carou-scroll>
 76 | 			</div>
 77 | 			<h2>Next/Previous Buttons</h2>
 78 | 			<div class="demo-carousel">
 79 | 				<carou-scroll id="demo-btn">
 80 | 					<div class="demo-slide">1</div>
 81 | 					<div class="demo-slide">2</div>
 82 | 					<div class="demo-slide">3</div>
 83 | 					<div class="demo-slide">4</div>
 84 | 					<div class="demo-slide">5</div>
 85 | 					<div class="demo-slide">6</div>
 86 | 					<div class="demo-slide">7</div>
 87 | 					<div class="demo-slide">8</div>
 88 | 					<div class="demo-slide">9</div>
 89 | 					<div class="demo-slide">10</div>
 90 | 				</carou-scroll>
 91 | 				<div class="demo-carousel-meta">
 92 | 					<button type="button" disabled data-carousel-previous="demo-btn">&lt; Previous</button>
 93 | 					<button type="button" disabled data-carousel-next="demo-btn">Next &gt;</button>
 94 | 				</div>
 95 | 			</div>
 96 | 			<h3>Looping</h3>
 97 | 			<div class="demo-carousel">
 98 | 				<carou-scroll id="demo-btn-loop" loop>
 99 | 					<div class="demo-slide">1</div>
100 | 					<div class="demo-slide">2</div>
101 | 					<div class="demo-slide">3</div>
102 | 					<div class="demo-slide">4</div>
103 | 					<div class="demo-slide">5</div>
104 | 					<div class="demo-slide">6</div>
105 | 					<div class="demo-slide">7</div>
106 | 					<div class="demo-slide">8</div>
107 | 					<div class="demo-slide">9</div>
108 | 					<div class="demo-slide">10</div>
109 | 				</carou-scroll>
110 | 				<div class="demo-carousel-meta">
111 | 					<!-- JS only buttons -->
112 | 					<button type="button" disabled data-carousel-previous="demo-btn-loop">&lt; Previous</button>
113 | 					<button type="button" disabled data-carousel-next="demo-btn-loop">Next &gt;</button>
114 | 				</div>
115 | 			</div>
116 | 			<h3>Show Current Slide Output</h3>
117 | 			<style>
118 | 			#demo-announce + .demo-carousel-meta button {
119 | 				min-width: 6em;
120 | 			}
121 | 			</style>
122 | 			<div class="demo-carousel">
123 | 				<carou-scroll id="demo-announce">
124 | 					<div class="demo-slide">1</div>
125 | 					<div class="demo-slide">2</div>
126 | 					<div class="demo-slide">3</div>
127 | 					<div class="demo-slide">4</div>
128 | 					<div class="demo-slide">5</div>
129 | 					<div class="demo-slide">6</div>
130 | 					<div class="demo-slide">7</div>
131 | 					<div class="demo-slide">8</div>
132 | 					<div class="demo-slide">9</div>
133 | 					<div class="demo-slide">10</div>
134 | 				</carou-scroll>
135 | 				<div class="demo-carousel-meta">
136 | 					<button type="button" disabled data-carousel-previous="demo-announce">&lt; Previous</button>
137 | 					<output data-carousel-output="demo-announce"></output>
138 | 					<button type="button" disabled data-carousel-next="demo-announce">Next &gt;</button>
139 | 				</div>
140 | 			</div>
141 | 			<h3>Show Current Slide Output with Custom Markup (e.g. <abbr title="internationalization">i18n</abbr>)</h3>
142 | 			<style>
143 | 				#demo-announcecustom + .demo-carousel-meta button {
144 | 					min-width: 6em;
145 | 				}
146 | 				</style>
147 | 				<div class="demo-carousel">
148 | 					<carou-scroll id="demo-announcecustom">
149 | 						<div class="demo-slide">1</div>
150 | 						<div class="demo-slide">2</div>
151 | 						<div class="demo-slide">3</div>
152 | 						<div class="demo-slide">4</div>
153 | 						<div class="demo-slide">5</div>
154 | 						<div class="demo-slide">6</div>
155 | 						<div class="demo-slide">7</div>
156 | 						<div class="demo-slide">8</div>
157 | 						<div class="demo-slide">9</div>
158 | 						<div class="demo-slide">10</div>
159 | 					</carou-scroll>
160 | 					<div class="demo-carousel-meta">
161 | 						<button type="button" disabled data-carousel-previous="demo-announcecustom">너무 이른</button>
162 | 						<output data-carousel-output="demo-announcecustom" lang="ko">슬라이드 <span data-carousel-output-current></span>/<span data-carousel-output-total></span></output>
163 | 						<button type="button" disabled data-carousel-next="demo-announcecustom">다음의</button>
164 | 					</div>
165 | 				</div>
166 | 			<h3>Full control of button styles and placement</h3>
167 | 			<style>
168 | 			.demo-carousel-inline {
169 | 				display: flex;
170 | 			}
171 | 			.demo-carousel-inline carou-scroll {
172 | 				flex-grow: 1;
173 | 			}
174 | 			.demo-carousel-inline button {
175 | 				background-color: transparent;
176 | 				border: none;
177 | 				font-size: 2em;
178 | 				font-weight: bold;
179 | 			}
180 | 			</style>
181 | 			<div class="demo-carousel demo-carousel-inline">
182 | 				<button type="button" disabled data-carousel-previous="demo-btn-inline">&lt;</button>
183 | 				<carou-scroll id="demo-btn-inline">
184 | 					<div class="demo-slide">1</div>
185 | 					<div class="demo-slide">2</div>
186 | 					<div class="demo-slide">3</div>
187 | 					<div class="demo-slide">4</div>
188 | 					<div class="demo-slide">5</div>
189 | 					<div class="demo-slide">6</div>
190 | 					<div class="demo-slide">7</div>
191 | 					<div class="demo-slide">8</div>
192 | 					<div class="demo-slide">9</div>
193 | 					<div class="demo-slide">10</div>
194 | 				</carou-scroll>
195 | 				<button type="button" disabled data-carousel-next="demo-btn-inline">&gt;</button>
196 | 			</div>
197 | 			<h3>Smooth scroll on Button Navigation</h3>
198 | 			<div class="demo-carousel">
199 | 				<carou-scroll id="demo-smooth" loop style="scroll-behavior: smooth;">
200 | 					<div class="demo-slide">1</div>
201 | 					<div class="demo-slide">2</div>
202 | 					<div class="demo-slide">3</div>
203 | 					<div class="demo-slide">4</div>
204 | 					<div class="demo-slide">5</div>
205 | 					<div class="demo-slide">6</div>
206 | 					<div class="demo-slide">7</div>
207 | 					<div class="demo-slide">8</div>
208 | 					<div class="demo-slide">9</div>
209 | 					<div class="demo-slide">10</div>
210 | 				</carou-scroll>
211 | 				<div class="demo-carousel-meta">
212 | 					<!-- JS only buttons -->
213 | 					<button type="button" disabled data-carousel-previous="demo-smooth">&lt; Previous</button>
214 | 					<button type="button" disabled data-carousel-next="demo-smooth">Next &gt;</button>
215 | 				</div>
216 | 			</div>
217 | 			<h3>Links instead of Buttons</h3>
218 | 			<style>
219 | 			a[href][disabled] {
220 | 				pointer-events: none;
221 | 				color: #ddd;
222 | 			}
223 | 			</style>
224 | 			<div class="demo-carousel">
225 | 				<carou-scroll id="demo-link">
226 | 					<div class="demo-slide">1</div>
227 | 					<div class="demo-slide">2</div>
228 | 					<div class="demo-slide">3</div>
229 | 					<div class="demo-slide">4</div>
230 | 					<div class="demo-slide">5</div>
231 | 					<div class="demo-slide">6</div>
232 | 					<div class="demo-slide">7</div>
233 | 					<div class="demo-slide">8</div>
234 | 					<div class="demo-slide">9</div>
235 | 					<div class="demo-slide">10</div>
236 | 				</carou-scroll>
237 | 				<div class="demo-carousel-meta">
238 | 					<!-- JS only buttons -->
239 | 					<a href="#demo-link" disabled data-carousel-previous="demo-link">&lt; Previous</a>
240 | 					<a href="#demo-link" disabled data-carousel-next="demo-link">Next &gt;</a>
241 | 				</div>
242 | 			</div>
243 | 			<h3>Manual Scroll Snap CSS</h3>
244 | 			<p>Useful if you want scroll snapping to be available before or without JavaScript.</p>
245 | 			<style>
246 | 			#demo-snap {
247 | 				scroll-snap-type: x mandatory;
248 | 			}
249 | 			#demo-snap > * {
250 | 				scroll-snap-align: center;
251 | 			}
252 | 			</style>
253 | 			<div class="demo-carousel">
254 | 				<carou-scroll id="demo-snap">
255 | 					<div class="demo-slide">1</div>
256 | 					<div class="demo-slide">2</div>
257 | 					<div class="demo-slide">3</div>
258 | 					<div class="demo-slide">4</div>
259 | 					<div class="demo-slide">5</div>
260 | 					<div class="demo-slide">6</div>
261 | 					<div class="demo-slide">7</div>
262 | 					<div class="demo-slide">8</div>
263 | 					<div class="demo-slide">9</div>
264 | 					<div class="demo-slide">10</div>
265 | 				</carou-scroll>
266 | 				<div class="demo-carousel-meta">
267 | 					<!-- JS only buttons -->
268 | 					<button disabled data-carousel-previous="demo-snap">&lt; Previous</button>
269 | 					<button disabled data-carousel-next="demo-snap">Next &gt;</button>
270 | 				</div>
271 | 			</div>
272 | 		</main>
273 | 	</body>
274 | </html>
275 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@zachleat/carouscroll",
 3 |   "version": "1.0.6",
 4 |   "description": "Add next/previous buttons to a horizontal scrollable container.",
 5 |   "main": "carouscroll.js",
 6 |   "publishConfig": {
 7 |     "access": "public"
 8 |   },
 9 |   "scripts": {
10 |     "start": "npx http-server ."
11 |   },
12 |   "repository": {
13 |     "type": "git",
14 |     "url": "git+https://github.com/zachleat/carouscroll.git"
15 |   },
16 |   "author": {
17 |     "name": "Zach Leatherman",
18 |     "email": "zachleatherman@gmail.com",
19 |     "url": "https://zachleat.com/"
20 |   },
21 |   "license": "MIT",
22 |   "bugs": {
23 |     "url": "https://github.com/zachleat/carouscroll/issues"
24 |   },
25 |   "homepage": "https://github.com/zachleat/carouscroll#readme"
26 | }
27 | 


--------------------------------------------------------------------------------