Code Fix Studio

Introduction

The goal of this tutorial is to create a typical image slider with/without texts. This page also introduces how to crop images by the cover option. Let’s start!

Basic Image Slider

First, put your images to slide elements:

HTML


<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>

To adapt the image width to each slide, add the following CSS.

CSS


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

And then, initialize Splide after the DOM content is loaded. You have to listen to the DOMContentLoaded event if you initialize it in the tag:

JS


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