Beginners - Create a Slider with GlideJS in SvelteJS
Tags: svelte, glidejs, frontendtutorial, beginners
Published: 2020-08-06 07:05:42

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

If you don't know Glide or Svelte:

<b>Glide</b>: is an awesome slider in ES6
Look the Documentation

<b>Svelte</b>: is an open source framework in Vanilla Javascript
Look the Documentation

<h3>First step: install Svelte and create the Scaffold</h3>

Open VS Code, go in your terminal and digit: 

<div class="highlight"><pre class="highlight html"><code>npx degit sveltejs/template project-svelte-and-glide</code></pre></div>

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

The next step is: 

<div class="highlight"><pre class="highlight html"><code>cd project-svelte-and-glide

npm install
npm run dev</code></pre></div>

Great, we have created our first project in SvelteJS!

<h3>Second step: install Glide package into Svelte</h3>

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

<div class="highlight"><pre class="highlight html"><code>npm install @glidejs/glide</code></pre></div>

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:

<div class="highlight"><pre class="highlight html"><code>npm install -D rollup-plugin-css-only</code></pre></div>

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

<div class="highlight"><pre class="highlight html"><code>plugins: [
    css({ output: "public/build/vendors.css" }),
    svelte({ ... </code></pre></div>

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

<div class="highlight"><pre class="highlight html"><code>&lt;link rel="stylesheet" href="/build/vendors.css" /&gt;</code></pre></div>

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

<div class="highlight"><pre class="highlight html"><code>import "../node_modules/@glidejs/glide/dist/css/glide.core.min.css";</code></pre></div>

Restart the project.

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

<h3>Enjoy with Glide!</h3>

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:

<div class="highlight"><pre class="highlight html"><code>import&nbsp;{&nbsp;onMount&nbsp;}&nbsp;from&nbsp;'svelte';
import&nbsp;Glide&nbsp;from&nbsp;'@glidejs/glide';

onMount(()&nbsp;=&gt;&nbsp;{
  new&nbsp;Glide('.glide').mount();
});</code></pre></div>

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

<div class="highlight"><pre class="highlight html"><code>&lt;div class="glide"&gt;<br /> &lt;div data-glide-el="track" class="glide__track"&gt;<br />   &lt;ul class="glide__slides"&gt;<br />    &lt;li class="glide__slide"&gt;&lt;/li&gt;<br />    &lt;li class="glide__slide"&gt;&lt;/li&gt;<br />    &lt;li class="glide__slide"&gt;&lt;/li&gt;<br />   &lt;/ul&gt;<br /> &lt;/div&gt;<br />&lt;/div&gt;</code></pre></div>

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

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

<div class="highlight"><pre class="highlight html"><code>&lt;img alt="" src="https://picsum.photos/id/834/900" /&gt;</code></pre></div>

<em>Picsum is a service to have a placeholder image.</em>

<h3>The final result</h3>

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2rglw03zd1jl1p0z5u1u.gif)

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

I'll happy to help you!
Have fun!

<a href="https://github.com/crtdaniele">Follow me on Github</a>
<a href="https://www.linkedin.com/in/daniele-carta-lugano/">Follow me on LinkedIn</a>