SplideJS Revolutionize Your Website Design with Seamless Slider Integration

Introduction

A popular computer language mostly used for web development is JavaScript (JS). It was developed in 1995 by Brendan Eich and is frequently referred to as the "language of the web" since it is crucial for creating dynamic and interactive web pages and web applications.

JS is a high-level, interpreted, and dynamically typed language, it is simple to use, doesn't need to be compiled, and allows variables to hold values of many data types at runtime.

JavaScript was initially created to manage client-side interactions in online browsers, but it has developed over time to allow server-side development (Node.js) and a variety of applications outside the web.

It is supported by all major web browsers, making it a versatile choice for front-end development.
Also, It makes use of a prototype-based inheritance paradigm, which makes it possible to program objects without using conventional classes.

Having stated all of this, let me introduce you to JavaScript's concept of libraries.

JavaScript libraries are collections of pre-written JavaScript code that offer particular functionality or features, enabling the development of apps simpler and quicker for developers. These libraries can be used in applications, saving developers the time and effort of writing new code.

I use to be the kind of developer that believed that "No you need to know how things are done and do them without making use of anything other than the concept" that is to say in other words "No shortcuts" till I started using libraries then I knew, I was so wrong in my decision.

Already made tools such as css-generators for example, improves your productivity and reduces work load. The same as libraries be it CSS, JS, Python and so on, they all reduce work load and make the process faster.

With all these said, I made use of a JS library to build my first e-commerce website. Continue reading to see the application of a library in action.

JavaScript libraries that are widely used include jQuery, Lodash, Moment.js, D3.js, Splide.JS, and many others.

But Splide.JS will be the main topic of our attention.

Prerequisites

To follow this tutorial, you’ll need to meet these requirements.

• Working knowledge of HTML structure.
• Working knowledge of CSS.
• Working knowledge of JavaScript.
• A text editor or IDE of your choice.
• And lastly, check the Splide.js browser support.

What Is Splide.JS, then?

Splide is a TypeScript-based slider that is adaptable, lightweight, and user-friendly. By simply altering parameters, such as multiple slides, thumbnails, nested sliders, vertical direction, and more, it enables you to design different types of sliders. Additionally, you can improve the slider's functionality by creating extensions.lls or using APIs.

You might also wish to inquire as to what a carousel is, A carousel, sometimes referred to as a slider, is a common user interface component that is used to rotate or slide a collection of photos, information, or other media objects.

Multiple objects can frequently be displayed in a small area on websites and applications, usually in a visually pleasing and engaging fashion.

This guide will show you how to use the Splide.JS library to create an image carousel.

Getting Started with Splide.JS Library

Installation Guide

Option 1
Let's proceed on how to use Splide in our projects. It is important to note that the most preferred installation method is NPM.
Come on let's install Splide's latest version with the following commands.

$ npm install @splidejs/splide

Option 2
Another way of installing Splide is by downloading it's package from GitHub.
After you've downloaded the zip file, extract it, go to the dist/js directory, and import thesplide.min.js file by the

<script src="path-to-the-file/splide.min.js"></script>

Option 3
You also have access to this library from the Content Delivery Network(CDN):

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

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

React, Vue, and Svelte developers aren't left out, integration packages are available for you guys too:

• React
• Vue
• Svelte

Importing CSS

If you want to have full access to the Splide library, you should go for option 2, which downloading the zip folder from GitHub. You will see several CSS files in the dist/css and dist/css/themes directories to fully customize the carousel appearance.

Select the splide-core.min.css file that does not include arrows, pagination and progress bar styles. Otherwise, select splide.min.css or splide-[theme].min.css.

Next, link the stylesheets

<!-- Link to the file hosted on your server, -->
<link rel="stylesheet" href="path-to-the-file/splide.min.css">

<!-- or link to the CDN -->
<link rel="stylesheet" href="url-to-cdn/splide.min.css">

The Building Process

We will use simple HTML to build the Splide containers, use the following markups:

<section class="splide" aria-label="Splide Basic HTML Example">
  <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">Slide 01</li>
            <li class="splide__slide">Slide 02</li>
            <li class="splide__slide">Slide 03</li>
        </ul>
  </div>
</section>

Or you can choose to replace the section tag with a div tag depending on whether the carousel is directly related to your main contents or not.

<div class="splide" role="group" aria-label="Splide Basic HTML Example">
  <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">Slide 01</li>
            <li class="splide__slide">Slide 02</li>
            <li class="splide__slide">Slide 03</li>
        </ul>
  </div>
</div>

The next step, is to create an instance of the Splide class, import it, and use the mount() function.

import Splide from '@splidejs/splide';

new Splide( '.splide' ).mount();

Take note that the mount() method must be called if not nothing will be displayed on your choice of web browser.

If you chose option 2, use this :

<script>
  new Splide( '.splide' ).mount();
</script>

Initializing your script tag in the head tag, use this:

<script>

  document.addEventListener( 'DOMContentLoaded', function() {

    var splide = new Splide( '.splide' );

    splide.mount();

  } );

</script>

Conclusion

There're plenty of examples to use once you head on to Splide site. This is just a recap or let's say a quick guide of how you could start using this amazing JavaScript library.

Not withstanding the fact that practice makes perfection, I'm using this library to build my first e-commerce website.

You can visit here for more details.

I hope this helps you use this library to your advantage. Thanks for reading and feel free to ask about any problem you encountered in the comment section.