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

Accessability pass

Browse Source
This commit is contained in:
vollstock committed 2026-10-03 21:24:35 +02:00
1 parent bafae5ee5f
commit 1b79ceb155
4 files changed
+127 -84
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

index.html
+53 -40
View File
@@ -3,8 +3,12 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description"
content="Snappy Carousel Demo – Snappy is a lightweight carousel. Mostly CSS-only, with some Javascript for navigation and drag support." />
<title>Snappy</title>
<link rel="stylesheet" href="dist/snappy.css">
<style>
html,
body {
@@ -33,8 +37,10 @@
/* Custom snappy styling */
/* Colors from Open color (https://yeun.github.io/open-color) */
.snappy-carousel {
margin-bottom: 2rem;
.scroll-container {
max-height: 400px;
max-height: 420px;
gap: 0.5rem;
}
@@ -44,7 +50,6 @@
align-items: center;
width: 75%;
aspect-ratio: 3/2;
min-height: 200px;
max-height: 400px;
border-radius: 1rem;
border: 1px solid #ced4da;
@@ -98,15 +103,18 @@
}
}
.prev:disabled,
.next:disabled {
opacity: 0.5;
}
.pagination {
display: inline-flex;
margin-top: 1rem;
}
.pagination .dot {
width: 0.66rem !important;
height: 0.66rem !important;
border-radius: 0.33rem;
border-radius: 1lh;
background-color: #dee2e6 !important;
margin: 0 0.25rem;
@@ -127,14 +135,16 @@
}
}
</style>
<link rel="stylesheet" href="dist/snappy.css">
</head>
<body>
<header>
<h1>Snappy</h1>
</header>
<h1>Snappy</h1>
<main>
<!--
<!--
Options
-------
@@ -149,40 +159,43 @@
data-snap-align="center"
data-snap-align="start"
data-snap-align="end"
-->
<div class="snappy-carousel">
<div class="scroll-container">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
</div>
-->
<section class="snappy-carousel" aria-labelledby="horizontal-carousel-heading">
<h2 id="horizontal-carousel-heading" class="visuallyhidden">Horizontal</h2>
<ul class="scroll-container">
<li class="slide">1</li>
<li class="slide">2</li>
<li class="slide">3</li>
<li class="slide">4</li>
<li class="slide">5</li>
<li class="slide">6</li>
<li class="slide">7</li>
<li class="slide">8</li>
</ul>
<button class="prev">❮</button>
<button class="next">❯</button>
<div class="pagination"></div>
</div>
<button class="prev">❮</button>
<button class="next">❯</button>
<ul class="pagination"></ul>
</section>
<div class="snappy-carousel" data-scroll-direction="y">
<div class="scroll-container">
<div class="slide">1</div>
<div class="slide">2</div>
<div class="slide">3</div>
<div class="slide">4</div>
<div class="slide">5</div>
<div class="slide">6</div>
<div class="slide">7</div>
<div class="slide">8</div>
</div>
<section class="snappy-carousel" data-scroll-direction="y" aria-labelledby="horizontal-carousel-heading">
<h2 id="horizontal-carousel-heading" class="visuallyhidden">Vertical</h2>
<ul class="scroll-container">
<li class="slide">1</li>
<li class="slide">2</li>
<li class="slide">3</li>
<li class="slide">4</li>
<li class="slide">5</li>
<li class="slide">6</li>
<li class="slide">7</li>
<li class="slide">8</li>
</ul>
<button class="prev">❮</button>
<button class="next">❯</button>
<div class="pagination"></div>
</div>
<button class="prev">❮</button>
<button class="next">❯</button>
<ul class="pagination"></ul>
</section>
</main>
<!-- Javascript is only needed for pagination and buttons -->
<script src="dist/snappy.js" defer></script>