SwiperJS Add-On (Horizontal)
Enable touch/drag navigation for horizontal timelines. If SwiperJS is missing, Vanilla Timeline gracefully falls back to built-in navigation.
How to enable Swiper
- Include Swiper CSS + JS on the page (via CDN or your bundle).
- Add data-use-swiper="true" (or useSwiper in JS options). data-use-swiper="auto" will also try Swiper when present.
- Call timeline(...) as usual; Swiper powers navigation when it is present.
<!-- 1) Include Swiper and Vanilla Timeline assets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css" />
<link rel="stylesheet" href="/dist/timeline.min.css" />
...
<div class="timeline"
data-mode="horizontal"
data-use-swiper="true"
data-move-items="1"
data-min-width="700"
data-nav-color="#b4157b">
... timeline items ...
</div>
...
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<script src="/dist/timeline.min.js"></script>
<script>
// Swiper will be used automatically when present
timeline(document.querySelectorAll('.timeline'));
</script>
Configuration tips
- data-move-items controls how many nodes move per swipe or nav click.
- data-min-width prevents the horizontal layout from rendering on very small screens.
- data-horizontal-start-position (top or bottom) sets the first row of nodes.
- If Swiper assets are absent, the timeline renders with standard arrow/nav controls instead of erroring.
Live demo
This page loads Swiper from CDN and enables it via data-use-swiper="true". Try swiping or dragging on touch devices, or use arrow keys / nav buttons on desktop.
10/01/2023
Colored Tiles
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
10/05/2023
Library Books
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
10/07/2023
Country Road
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
10/12/2023
Ocean Waves
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
10/15/2023
Pretty Flower
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
10/18/2023
Volcanic Rock
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
10/23/2023
Rough Texture
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
10/25/2023
Majestic Eagle
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
10/27/2023
Yellow Daffodils
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
10/29/2023
Brick Wall
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
10/30/2023
Intricate Flower
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
11/01/2023
Pink Rose
Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.
Support note
Swiper is a third-party library. Vantl ships an adapter that plugs into Swiper when you opt in, but Swiper itself is not bundled or officially supported. For installation, configuration, and feature questions, please refer to the Swiper documentation. If Swiper is absent, Vantl will automatically fall back to the built-in carousel controls.