Splide Carousel Test (w/ Thumbnails)

Test of Splide carousel library. With thumbnails.

by the_voder

HTML

<script src="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/themes/splide-sea-green.min.css">
<!--
Slideshow example using Splide slideshow library
https://splidejs.com/guides/getting-started/

STYLES
Link to this stylesheet in head of your page, along with your own styles
https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/css/themes/splide-sea-green.min.css

There are alternative theme stylesheets here (replace stylesheet above)
https://www.jsdelivr.com/package/npm/@splidejs/splide?path=dist%2Fcss%2Fthemes

SCRIPT
Link to the library script inside a <script> tag in the head of your page
https://cdn.jsdelivr.net/npm/@splidejs/[email protected]/dist/js/splide.min.js
-->

<!-- Gallery Thumbnails -->
<div id="gallery" class="splide">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">
				<!-- Use your own image here. Images should all be SAME SIZE -->
				<img src="https://picsum.photos/seed/piusow/1000/500">
				<!--
				This is the HTML5 tag for a picture caption.
				Both img and figcaption tags should be inside figure tag, but Splide doesn't find images within figure tags, it seems.
				You can use another tag for the text instead (div, p etc.).
				Add styling to this tag in your own stylesheet
				-->
				<figcaption>Slide 01</figcaption>
			</li>
			<li class="splide__slide">
				<img src="https://picsum.photos/seed/pvsuqp/1000/500">
				<figcaption>Slide 02</figcaption>
			</li>
			<li class="splide__slide">
				<img src="https://picsum.photos/seed/uaunsr/1000/500">
				<figcaption>Slide 03</figcaption>
			</li>
			<li class="splide__slide">
				<img src="https://picsum.photos/seed/uaunsy/1000/500">
				<figcaption>Slide 04</figcaption>
			</li>
			<li class="splide__slide">
				<img src="https://picsum.photos/seed/uainsr/1000/500">
				<figcaption>Slide 05</figcaption>
			</li>
			<li...

CSS

/* Styles for image caption */
.splide figcaption {
	position: absolute;
	display: block;
	width: 100%;
	bottom: 0;
	padding: 5px;
	background-color: rgba(255, 255, 255, 0.5);
}

JavaScript

/*
================================
Splide carousel library example
https://splidejs.com/
================================
*/

// Add this script inside <script> tags at the bottom of the body section of your page

document.addEventListener('DOMContentLoaded', function() {
  // Splide options. Add additional options to list if required.
  // Options list, with code examples
  // https://splidejs.com/options/
  var secondarySlider = new Splide('#gallery-thumbs', {
    rewind: true,
    fixedWidth: 100,
    fixedHeight: 64,
    isNavigation: true,
    gap: 10,
    focus: 'center',
    pagination: false,
    cover: true,
    breakpoints: {
      '600': {
        fixedWidth: 66,
        fixedHeight: 40,
      }
    }
  }).mount();

  // Create the main slider.
  var primarySlider = new Splide('#gallery', {
    type: 'fade',
    heightRatio: 0.5,
    pagination: false,
    arrows: false,
    cover: true,
  });

  // Set the thumbnails slider as a sync target and then call mount.
  primarySlider.sync(secondarySlider).mount();
});