Using a JavaScript Library: Slideshow/Carousel

Topics covered in this JavaScript tutorial:

Setting Up the HTML Content, Linking to the Provided Files, Initializing the Script, Customizing the Script Using Provided Options, Tweaking Some CSS

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to use the premade script called Splide to create a carousel or slideshow (also called sliders). These can be a good way to present a series of images and/or text for users to scroll through.

Setting Up the HTML Content

Most JavaScripts assume some specific type of HTML setup (tags with specific class names) which the JS and CSS can target. That markup will be explained in their documentation on their website. The Splide website splidejs.com explains all that and more.

On the website they provide some HTML you can copy and paste. Because we never know when a site will change, instead of sending you directly to the site, we pasted their code into a file we provided in the class files.

1. For this exercise we’ll be working with the Carousel folder located in Desktop > Class Files > JavaScript Class. Open that folder in your code editor if it allows you to (like Visual Studio Code does).

2. From the snippets folder open splide-tags.html.

   Notice the classes which all refer to splide. Those unique names ensure the Splide provided CSS won’t accidentally style objects you may have elsewhere on the page.

   To save you a lot of copying/pasting (or typing of new content), we copied this exact code into our HTML page and added more content in the splide__slide li tags.

3. Open index.html from the Carousel folder.

4. Around line 26 below <div id="more-news"> notice we have the same code. The only things we did was:

   • Change the h2 text (the heading for the slider).
   • For each slide we added a link (to an article) that contains an image and h3. (The links are merely placeholders, so don’t bother clicking any of those links in a browser because you’d get a missing page error.)

5. Preview index.html in Chrome. (We’ll be using its DevTools.)

   • Scroll down to the More News section.
   • Currently, all the items are large and you have to scroll down to see them all. This is the unstyled content for our carousel.

6. Leave the page open in the browser so we can come back to it later.

Linking to the Provided Files

1. Switch back to your code editor.

2. Splide provides a CSS to style the slider. After the link to normalize.css, add the following bold code:

      <link rel="stylesheet" href="css/normalize.css">
      <link rel="stylesheet" href="js/vendor/splide-4.0.0/css/splide.min.css">
      <link rel="stylesheet" href="css/main.css">
   </head>
   

   NOTE: We’ve included the Splide files with the class files, but to download future updates, view examples, and read documentation, you can visit splidejs.com

3. Save and reload the page in Chrome.

   In the More News section notice that the content is hidden! Don’t worry, once we get the carousel working it will come back.

4. We’ve already linked to a blank main.js for you, but you need to link to the Splide script. Near the bottom, add the bold link as show below:

   <script src="js/vendor/splide-4.0.0/js/splide.min.js"></script>
   <script src="js/main.js"></script>
   </body>
   

Initializing the Slider/Carousel

1. From the snippets folder open splide-initialize.js.
2. Copy all the code.
3. From the js folder open main.js.

4. To initialize the Splide, paste the following bold code:

   document.addEventListener( 'DOMContentLoaded', function() {
      var splide = new Splide( '.splide' );
      splide.mount();
    } );
   

   NOTE: var is another way to declare a variable. In previous exercises we used the more modern let, but var has been around longer so you’ll it being used sometimes. There’s another way using const. While there are some differences between let and var, they both declare variables and you won’t see any differences in the way var is being used here.

5. Save and reload the page in Chrome.

   It doesn’t look perfect, but we have a working carousel! Try the following:

   • Drag left/right directly on the carousel content (images or text) to move around. Not only does dragging work on mobile devices, it works on desktops too. Cool!
   • Resize the window and notice there’s always one item displayed. Soon we’ll see how to customize how many items are visible at various screen sizes.

Customizing the Script Using Provided Options

Many premade scripts you’ll use will provide a set of options for you to customize the way it works. How many options depends on what the script does and how much work the developer did to allow people to customize it.

These options will be documented on the website for the script. For Splide you can find the complete list of options at splidejs.com/guides/options

1. Switch back to main.js in your your code editor.

2. Let’s make it display 3 items instead of just one. Add a comma and curly braces (for a JS object) as shown below:

   var splide = new Splide( '.splide' , {} );
   

3. Inside the object curly braces add hit return and add the following bold setting:

   var splide = new Splide( '.splide' , {
      perPage: 3
   } );
   

4. Save and reload the page in Chrome.

   Notice it displays 3 items, and you can advance to see more sets of 3 items.

5. Let’s add some space between the carousel items using a built in setting for that. Switch to main.js in your code editor.

6. Add a comma at the end of the first setting, and on a new line add a new setting as shown below in bold:

   var splide = new Splide( '.splide' , {
      perPage: 3,
      gap: 20
   } );
   

7. Save and reload the page in Chrome. Notice the following:

   • There’s now some space between each carousel item which looks much better.
   • Click the next arrow button on the right until you reach the end and see the carousel stops. We’d like it to rewind back to the beginning.
8. Switch back to main.js in your code editor.

9. Add a comma at the end of the last setting, and on a new line add a new setting as shown below in bold:

   var splide = new Splide( '.splide' , {
      perPage: 3,
      gap: 20,
      rewind: true
   } );
   

10. Save and reload the page in Chrome.

    Click the next arrow button on the right until you reach the end and see that now it rewinds back to the beginning. Much nicer.

Moving the Prev & Next Arrows Outside the Content

Let’s add some padding inside the carousel so the arrow and pager dots at the bottom don’t cover over the content. There’s no JavaScript option for this, but we can add some padding in our CSS. The section for this carousel has a class of splide so we’ll target that. You can figure out classes/elements you need to style, either by looking at the HTML you had to add to your page, or using the DevTools inspection features to poke around the code produced by the script you’re using.

1. Switch back to your code editor.
2. From the css folder open main.css.

3. Right above the media query, add the following new rule:

   .splide {
      padding: 0 55px 35px;
   }
   @media (min-width: 1100px) {
   

   NOTE: This shorthand sets the padding to 0 on top, 55px on the left/right, and 35px on the bottom.

4. Save and reload the page in Chrome. Notice:

   • It looks much better now that the controls aren’t covering the content.
   • Resize the window to see it always displays 3 items, which doesn’t look good at smaller screen widths. Let’s make it display fewer items on narrower screens.

Controlling How Many Items Are Visible at Various Screen Sizes

We can customize how many items are displayed at specific screens sizes using a breakpoints option. We can use this to change the options at any window size.

1. Switch back to main.js in your code editor.

2. Add the breakpoints option as shown below in bold. Don’t miss the comma at the end of the previous line!

   var splide = new Splide( '.splide' , {
      perPage: 3,
      gap: 20,
      rewind: true,
      breakpoints: {
         850: {
            perPage: 2
         },
         600: {
            perPage: 1
         }
      }
   } );
   

3. Save and reload the page in Chrome.

   Resize the browser window to see the carousel changes the number of items displayed from 1 on small screens, to 2, and then 3 as you make the window wider.

   NOTE: When working on responsive sites that change the number of items displayed, be careful of your image sizes. Be sure they are made for the widest possible width, so they will only scale down and not up (which can pixelate them).

Optional Bonus: Lazy Loading Content

Images are typically the largest files in a webpage. They slow down page loading, especially on mobile devices. Splide has an option called lazy loading, which will only load the slider images after the page loads, so the page initially downloads quickly. Let’s see how to add lazy loading.

1. Switch to main.js in your code editor.

2. Add the following bold code to enable lazy loading:

   var splide = new Splide( '.splide', {
      lazyLoad: 'nearby',
      perPage: 3,
   

3. Save the file.

   There’s one more thing we must do. As long as the img tags in our HTML have a src attribute, those images will still be downloaded. We need to change that into something HTML won’t load, and then Splide will use JavaScript to load the images after the page has downloaded.

4. Switch to index.html in your code editor.

5. For every image in the splide__slide li tags, you must change the current src attribute into data-splide-lazy.

   Below is an example of what the final code should look like, with the changes shown in bold. Make this same change to all eight images:

   <img data-splide-lazy="img/duck.jpg" alt="Ducks. One has a raised leg.">
   

   TIP: In many code editors (like Visual Studio Code) you can select the first img src= and then hit Cmd–D (Mac) or Ctrl–D (Windows) to select the following ones (stop after it selects the last one). Then use your Arrow keys to position the text cursor as needed and make the desired change to images all at once!

6. Save and reload the page in Chrome.

7. Hit Cmd–Opt–J (Mac) or Ctrl–Shift–J (Windows) to bring up the Console.
8. In the DevTools, click on the Network tab. If you don’t see it, to the right of the Console tab click the >> and choose Network from the menu.
9. Hit Cmd–R (Mac) or Ctrl–R (Windows) to reload the page.

10. In the list of files, notice the Initiator for the .jpg images is setAttribute (which is JS, so we know those images loaded after the Splide JS did its work).

    Notice the fronion-logo Initiator is index.html which tells you it loaded normally from HTML.