How to create a simple testimonial carousel with Splide.js

Appetizer

Today we will learn how to create a testimonial carousel with Splide

Now why Splide and not others such as Swiperjs and Owl-carousel is that it's totally dependency free - hence less size.
So let's get cracking.

Main Course

Step 1: Get the latest Splide CDN

Let's grab the CDN from JSDeliver and import the Splide package into our code. Paste the code right after where the </body> tag ends. Reason for placing it at the bottom like we are doing now is we don't slow down the initial render of HTML.

<script src="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.4.21/dist/js/splide.min.js"></script>

Step 2: CDN link for styling

Now Splide comes with its own default as well as two thematic styling which are sea-green and sky-blue. If you are one of those people who loves custom styling things then just the default one which comes with basic styling such as arrows, pagination can be a great choice.

<link
rel="stylesheet"  
href="https://cdn.jsdelivr.net/npm/@splidejs/splide@2.4.21/dist/css/splide.min.css"
/>

Step 3: Fundamental structure
Learning the very basic structure is important if you are building a custom site for somebody or yourself and want to apply your own styling. Here go ahead and type that in.

<div class="splide">
    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide"></li>
            <li class="splide__slide"></li>
            <li class="splide__slide"></li>
        </ul>
    </div>
</div>

Step 4: Adding the slide content - which in our case is the testimonial content inside each of the <li class="splide__slide"></li> tags.

<div class="splide__slide__container">
    <div class="slide__content">"I'm flabbergasted after using this product. No Regrets. Ever."
    </div>
</div>

Inside splide__slide__container is where we do all the adjustments such are setting the max-width for the content.

Tip: Having splide__slide__container is also pretty useful if you are having an image and you want to set a specific height for your image and go full blown cover mode but more on that later.

Now let us turn this plain text into something pretty.

Step 5: Styling your slide

• add padding
• centering the text content inside the container

General Tip 1: When in doubt, add a border-radius: 1px solid red around the element to easily identify where you are actually applying your styles.

General Tip 2: Always, I mean always just have your Dev tools open at all times while you are checking where you are applying certain styling like your padding. 90% of the problems can be solved by simply inspecting the element.

<style>
      *{
        box-sizing: border-box;
        font-family: 'Inter', sans-serif;
      }

      body{
        margin: 4rem 0;

      }
      .splide__slide{
        padding: 6rem;
        display: flex;
        justify-content: center;
        background: #ECF0F1 ;

      }

      .splide__slide__container{
        width: 600px;
        text-align: center;
      }

      .slide__content{
      margin: 1rem 0;
      font-size: 1.3rem;
      }

      .slide-img__wrapper{
        display: flex;
        align-items: center;

      }

      .slide-img{
        width: 60px;
        height: 60px;
        border-radius: 50%;
        max-width: 100%;
        max-height: 100%;
      }

      .slide-img__caption{
        margin-left: 1rem;
      }

      .slide-img__caption span{
        color: #2E86C1 ;
        font-weight: 500;
      }
    </style>

Step 6: Adding JavaScript

Activate the carousel by creating a new Splide object to the HTML on page load.

<script>
    document.addEventListener( 'DOMContentLoaded', function () {
        new Splide( '.splide' ).mount();
    } );
</script>

and with this the carousel is done. Now if you want to further modify it, here's the trick. Go to the HTML page. Inspect the whole page and you can notice that there are elements like splide__arrows and splide__pagination. What do these mean ?

Step 7: Applying custom styles to Carousel elements (arrows, pagination)

If you are building a website which has a primary color and you would like to apply these to the arrows and the pagination at the bottom of the slide, you can just apply styles by grabbing the element class names from Dev tools and applying styles to them.

As an example,let's change the default style of the pagination circles.


.splide__pagination__page.is-active {
transform: scale(1.5); //here I have changed the scale from 1.4 to 1.5
background: #0b72e7; //changed from default bg-color to blue
}

This means that when the the current page is active, the color will be activated.

Same method can be used for the splide__arrows as well !

Dessert

There are sure a few more amazing way to modify your slider and for that do go check out the Splide Docs.

Find the whole code for this article on my Codesandbox

Hope you learned something new. Till then keep sliding !