Skip to content

Instantly share code, notes, and snippets.

@loganwoolf

loganwoolf/index.html

Created November 10, 2023 02:21
Show Gist options
  • Save loganwoolf/800d8be51b989adbeea7062e0f3d660a to your computer and use it in GitHub Desktop.
Save loganwoolf/800d8be51b989adbeea7062e0f3d660a to your computer and use it in GitHub Desktop.
Download ZIP
Browser Native ESModules
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta
http-equiv="X-UA-Compatible"
content="IE=edge"
>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
>
<title>ES Modules!</title>
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin>
<link rel="preconnect" href="https://fastly.picsum.photos" crossorigin>
</head>
<body>
<script type="module">
import Splide from 'https://cdn.jsdelivr.net/npm/@splidejs/splide@4/+esm';
new Splide('.splide', {
type: 'loop',
perPage: 1
}).mount();
</script>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css"
>
<style>
.splide {
& li {
display: flex;
justify-content: center;
}
& img {
object-fit: contain;
max-height: 90vh;
max-width: 100%;
}
}
</style>
<section
class="splide"
aria-label="Splide Basic HTML Example"
>
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide">
<img src="https://picsum.photos/500/500?random=1">
</li>
<li class="splide__slide">
<img src="https://picsum.photos/500/500?random=2">
</li>
<li class="splide__slide">
<img src="https://picsum.photos/500/500?random=3">
</li>
<li class="splide__slide">
<img src="https://picsum.photos/500/500?random=4">
</li>
<li class="splide__slide">
<img src="https://picsum.photos/500/500?random=5">
</li>
<li class="splide__slide">
<img src="https://picsum.photos/500/500?random=6">
</li>
</ul>
</div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment