Beginners - Create a Slider with GlideJS in SvelteJS

In this article I want to show you how to use Glide in Svelte!

If you don't know Glide or Svelte:

Glide: is an awesome slider in ES6
Look the Documentation

Svelte: is an open source framework in Vanilla Javascript
Look the Documentation

First step: install Svelte and create the Scaffold

Open VS Code, go in your terminal and digit:

npx degit sveltejs/template project-svelte-and-glide

Now we have a new folder (project-svelte-and-glide) with Svelte.

The next step is:

cd project-svelte-and-glide

npm install
npm run dev

Great, we have created our first project in SvelteJS!

Second step: install Glide package into Svelte

Now we have created our first project in Svelte. So, after the command npm run dev, open http://localhost:5000 in Google Chrome, you can see a blank page with the title: Hello World.

Open again the terminal and digit (into the folder project-svelte-and-glide):

npm install @glidejs/glide

Perfect, now we can use the glide package, but we don't have the CSS base of Glide. Let's to add the css!

For add the css of Glide, we need to modify the rollup confing (don't worry, it's very easy).

Open your terminal and install a new dependencies into the project:

npm install -D rollup-plugin-css-only

Then, open the rollup config (in the main root) and before the node svelte in the plugins, add this line of code:

plugins: [
    css({ output: "public/build/vendors.css" }),
    svelte({ ... 

Now, open the index.html file in the public folder and add vendors.css after bundle.css:

<link rel="stylesheet" href="/build/vendors.css" />

The last step is add the glide.min.css in the App.svelte file. In the script tag, add:

import "../node_modules/@glidejs/glide/dist/css/glide.core.min.css";

Restart the project.

Now, rollup will compile all the external css that we'll import in our components into the vendors.css file.

Enjoy with Glide!

Return into VS Code and open the file App.svelte (src folder) and remove the useless content.

First, in the script tag we need to import Glide, then we need to initialize and mount a new instance of Glide.

In the script tag, import glide and onMount event of Svelte:

import { onMount } from 'svelte';
import Glide from '@glidejs/glide';

onMount(() => {
  new Glide('.glide').mount();
});

Next, we need to create the slider, GlideJS work with this structure of HTML:

<div class="glide">
 <div data-glide-el="track" class="glide__track">
   <ul class="glide__slides">
    <li class="glide__slide"></li>
    <li class="glide__slide"></li>
    <li class="glide__slide"></li>
   </ul>
 </div>
</div>

NOTE
The first class, is the class used in Javascript to identifier the slider.
If you prefer, you can use also an ID.

Now I want to add an image into my slider, into the div glide__slide add:

<img alt="" src="https://picsum.photos/id/834/900" />

Picsum is a service to have a placeholder image.

The final result

If you have an issue, contact me or comment below!

I'll happy to help you!
Have fun!

Follow me on Github
Follow me on LinkedIn