Skip to content

Instantly share code, notes, and snippets.

@davidallenlewis
Last active August 26, 2025 17:35
Show Gist options
  • Save davidallenlewis/eb4dc5902561aa3620b7972dec5456c6 to your computer and use it in GitHub Desktop.
Save davidallenlewis/eb4dc5902561aa3620b7972dec5456c6 to your computer and use it in GitHub Desktop.
SplideJS vertical direction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SplideJS Vertical Demo</title>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/splide.min.css"
>
<style>
:root {
--slider-height: 50vh;
}
body {
display: flex;
justify-content: center;
}
.splide {
height: var(--slider-height);
border-radius: 12px;
border: 3px solid #999;
overflow: hidden;
}
.splide__slide {
display: flex;
justify-content: center;
background-color: #ebebeb;
}
.splide__slide img {
max-height: var(--slider-height);
}
</style>
</head>
<body>
<div id="splide" class="splide">
<div class="splide__track">
<ul class="splide__list">
<li class="splide__slide"><img src="https://ph.loremipsums.org/800/CCCCCC/333333/svg"></li>
<li class="splide__slide"><img src="https://ph.loremipsums.org/1200x800/CCCCCC/333333/svg"></li>
<li class="splide__slide"><img src="https://ph.loremipsums.org/800x1600/CCCCCC/333333/svg"></li>
<li class="splide__slide"><img src="https://ph.loremipsums.org/1200x900/CCCCCC/333333/svg"></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
<script>
new Splide('#splide', {
direction: 'ttb',
type: 'loop',
height: 'var(--slider-height)',
wheel: true,
}).mount();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment