jQuery Swiper Integration

Initialize timeline via jQuery with Swiper options. Include Swiper CDN before timeline for UMD global fallback. If Swiper fails to load, Vantl falls back to the built-in carousel UI.

View the page source and read the Javascript code to see how it was done.

jQuery code:


// In <head> add Swiper CSS
// <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12.4.7/swiper-bundle.min.css" />

// Include Swiper before timeline (UMD global fallback)
// <script src="https://cdn.jsdelivr.net/npm/swiper@12.4.7/swiper-bundle.min.js"></script>

var items = [
  { id: 1, title: 'S1', content: 'One' },
  { id: 2, title: 'S2', content: 'Two' },
  { id: 3, title: 'S3', content: 'Three' }
];

var $el = jQuery('#jq-swiper-tl');
var $items = $el.find('.timeline__items');

items.forEach(function (it) {
  $items.append('
' + it.title + '
' + it.content + '
');
});

$el.timeline({ mode: 'horizontal', useSwiper: 'auto', swiperOptions: { loop: true } });