Enable touch/drag navigation for horizontal timelines. If SwiperJS is missing, Vanilla Timeline gracefully falls back to built-in navigation.
<!-- 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>
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.
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.