The purpose of this tutorial is to create a typical image slider. You need to have finished setting up Splide before starting it.

Basic Image Slider

If you have images whose dimensions or aspect ratios are same, or you don’t need to adjust their height, simply add <img> tag in a slide element.

<div id="image-slider" class="splide">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">
				<img src="image01.jpg">
			</li>
			<li class="splide__slide">
				<img src="image02.jpg">
			</li>
			<li class="splide__slide">
				<img src="image03.jpg">
			</li>
		</ul>
	</div>
</div>

Then initialize and mount Splide after the DOM content is loaded.

document.addEventListener( 'DOMContentLoaded', function () {
	new Splide( '#image-slider' ).mount();
} );

The result will be like this:

To adapt an image width to a slider, you may need to adjust CSS:

.splide__slide img {
	width : 100%;
	height: auto;
}

Auto Crop

In most cases, source images have different dimensions. By using 'cover' option, they can be displayed in a same size without tiresome cropping work.

document.addEventListener( 'DOMContentLoaded', function () {
	new Splide( '#image-slider', {
		'cover'      : true,
		'heightRatio': 0.5,
	} ).mount();
} );

The result will be:

Do not forget to provide a height, heightRatio or fixedHeight option, or the wrapper elements will be collapsed.

Image And Texts

A slide element accepts any content inside it. Therefore you can easily build a card slider like this:

<div id="card-slider" class="splide">
	<div class="splide__track">
		<ul class="splide__list">
			<li class="splide__slide">
				<img src="image01.jpg">
				<h4>Heading 01</h4>
				<div>
					Description 01
				</div>
			</li>
			<li class="splide__slide">
				<img src="image02.jpg">
				<h4>Heading 02</h4>
				<div>
					Description 02
				</div>
			</li>
		</ul>
	</div>
</div>

By using perPage option, a slide can have multiple slides in a view port. Let’s display 2 slides pn PC, but reduce it to 1 in mobile devices to keep readability of texts.

document.addEventListener( 'DOMContentLoaded', function () {
	new Splide( '#card-slider', {
		perPage    : 2,
		breakpoints: {
			600: {
				perPage: 1,
			}
		}
	} ).mount();
} );

Then the slider will be like the following example. Adjust the appearance with CSS to match your design.

  • Sample Image 01
    Heading 01
    Lorem ipsum dolor sit amet, ad laudem maluisset molestiae ius. Movet nostro in duo, audire vulputate mel cu.
  • Sample Image 02
    Heading 02
    Nostrum mentitum ea sit. Ad est alia utroque verterem, ad pri soluta diceret expetenda
  • Sample Image 03
    Heading 03
    Quo harum altera incorrupte ea, eos viris constituto ex.
  • Sample Image 04
    Heading 04
    Commodo denique honestatis duo et, an eum noluisse vituperatoribus, ad lorem nonumy tempor ius.
  • Sample Image 05
    Heading 05
    Ea ipsum habemus apeirian est, veri justo in vel, nobis insolens eum eu.
  • Sample Image 06
    Heading 06
    Lorem ipsum dolor sit amet, ad laudem maluisset molestiae ius. Movet nostro in duo, audire vulputate mel cu.

In order to use 'cover' option for a slider which has images and texts, you have to use a container element. See this document for more details.

Full Screen Slider

As the width and height options accept CSS relative units, it’s a piece of cake to create a full screen slider. Simply apply '100vw' and '100vh'.

document.addEventListener( 'DOMContentLoaded', function () {
	new Splide( '#fullscreen-slider', {
		width : '100vw',
		height: '100vh',
	} ).mount();
} );
User's Guide
Tutorials
Extensions