jQuery Cycle: Adding Slideshow Controls

Topics covered in this JavaScript & jQuery tutorial:

Preventing a possible “flash of unstyled content”, Enabling the slideshow, Adding & customizing the controls

Exercise Preview

Exercise Overview

In the previous exercise, you learned how to create a simple slideshow using the jQuery Cycle plugin. In this exercise, you’ll add controls to a slideshow which will allow the end user to jump ahead or back to specific slides.

Getting Started

1. Open your code editor if it isn’t already open.

2. Close any files you may have open.

3. For this exercise we’ll be working with the Cycle-Slideshow-Controls folder located in Desktop > Class Files > yourname-JavaScript jQuery Class. You may want to open that folder in your code editor if it allows you to (like Visual Studio Code does).

4. Open index.html from the Cycle-Slideshow-Controls folder.

5. Preview the page in a browser to see what the page will look like to users.

   We want to turn the main photo into a slideshow highlighting upcoming events. The other images for this section are not yet in the page, so first we must insert them.

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

7. Switch back to your code editor.

8. Find the featuredShows div around line 66 and notice that this div currently only has one image.

9. Add the following bold code to add the rest of the slideshow images:

   <div id="featuredShows">
      <img src="img/scroll-lustre.jpg" width="530" height="375">
      <img src="img/scroll-bugs.jpg" width="530" height="375">
      <img src="img/scroll-blast.jpg" width="530" height="375">
      <img src="img/scroll-battle.jpg" width="530" height="375">
   </div>
   

10. Save the file.

11. Switch to the browser and reload index.html. Notice that you can see all four band photos (Low Lustre, Lightning Bug, etc.) stacked on top of each other.

Preventing a Possible “Flash of Unstyled Content”

Once we get the Cycle plugin working, it will hide the additional slideshow photos and start cycling through them. The cycle doesn’t start until the JS files have been downloaded. That may take a moment, and in the meantime, a user may see all four photos. When the Cycle plugin kicks in, the page will abruptly hide the extra photos and start the cycle.

We can avoid this flash of unstyled content (FOUC) with CSS. We simply hide the extra photos initially, so users won’t see them. The Cycle plugin will unhide them when it has loaded and is ready to put them into the slideshow.

1. Switch back to your code editor.

2. From the css folder, open main.css (remember we’re in the Cycle-Slideshow-Controls folder).

3. Below the #featuredShows rule that starts around line 87, add the following:

   #featuredShows img {
      display: none;
   }
   #featuredShows img:first-child {
      display: block;
   }
   

4. Save the file.

5. Switch to the browser and reload index.html. You should now only see one photo (Low Lustre). We’ll see the other photos after we get the Cycle plugin working.

Enabling the Slideshow

1. Switch back to your code editor.

2. Our page is already linked to jQuery and the Cycle plugin .js files because we added them in the previous exercise. That means we’re ready to add the JavaScript to apply the cycle to the #featuredShows div. From the js folder, open main.js.

3. Around lines 33–38 select the subContent1 cycle code.

4. Copy it.

5. Paste a copy below the last cycle, making sure it’s still above the last set of }); braces and within the document ready function.

6. The images we just added are in a div which has an ID of featuredShows. Make the following three edits to the copy just added: target the featuredShows div, set it to advance slides every 3 seconds (a 3000 millisecond timeout) with no initial delay (so the slide counter starts right away):

   $('#featuredShows').cycle({ 
      fx: 'scrollHorz',
      speed: 600,
      timeout: 3000,
      delay: 0
   });
   

7. Lastly, we want the slideshow to use a fade transition, so delete the fx line of code so you end up with the following:

   $('#featuredShows').cycle({ 
      speed: 600,
      timeout: 3000,
      delay: 0
   });
   

8. Save the file.

9. Switch to the browser and reload index.html. Wait a few seconds to see the other photos fade in one after another!

Adding & Customizing the Controls

A user might want to go back to see a specific slide again. The plugin has built-in features to make controls. To use it we need a div with a cycle-pager class (which the plugin automatically looks for).

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

2. We don’t have a place to hold the controls yet, so we’ll have to make one. Before the #featuredShows closing div tag around line 71, add the following bold code:

   <div id="content">
      <div id="featuredShows">
         <img src="img/scroll-lustre.jpg" width="530" height="375">
         <img src="img/scroll-bugs.jpg" width="530" height="375">
         <img src="img/scroll-blast.jpg" width="530" height="375">
         <img src="img/scroll-battle.jpg" width="530" height="375">
         <div class="cycle-pager"></div>
      </div>
   </div>
   

   NOTE: The Cycle plugin automatically looks for a div with the cycle-pager class within the slideshow container and creates slide indicators inside it! This works great when the slideshow content is images, like we have. If your content was div tags, you’d have to move the pager outside the slideshow container and tell Cycle about it. For more info on that, refer to the sidebar at the end of this exercise.

3. Save the file.

4. Switch to the browser and reload index.html.

   On the bottom left of the main slideshow you should see four very small white dots. They are too small to use, and there is no indication of which one is the current slide, so we need to add some CSS to improve the design.

5. Switch back to your code editor.

6. The dots are bullet characters, so we can change their size with the CSS font-size property. To save some time, we’ve already written out a style for you. In the snippets folder, open cycle-pager-style.css.

7. Select and copy all the code.

8. From the css folder, open main.css.

9. Around line 94, find the #featuredShows img:first-child rule. Paste the new rule below that.

   NOTE: z-index: 200; makes sure the div is at the top of the stacking order on the page, so it will be layered visually on top of all other elements. Everything else is unique to how we want our pager to look. For your own site, you would adjust as desired.

10. Save the file.

11. Preview index.html in Chrome. (We’re going to use its DevTools.)

12. Click the bullets to jump to a specific slide.

13. While the bullets work, notice the following problems that we need to fix:

    • There is no indication of which slide you are currently viewing.
    • When you mouse over the bullets, you see a text cursor rather than a pointer hand which would indicate a clickable item.
    • If you double–click a bullet, it selects the bullet (like a text selection), which is not desirable.
    • The bullets are a bit close together.

14. Let’s see what the Cycle plugin is doing in the cycle-pager div. Ctrl–click (Mac) or Right–click (Windows) on one of the white bullets and from the menu that appears, choose Inspect.

15. As shown below, notice there are span tags inside the cycle-pager. Also, as you watch the code, the cycle-pager-active class will move from span to span. The Cycle plugin is adding this class, which we will be able use to style the bullet of the current (or active) slide.

    

16. Switch back to main.css in your code editor.

17. Below the .cycle-pager rule (which starts around line 97), add the following:

    .cycle-pager span {
       margin-right: 5px;
       cursor: pointer;
       -webkit-user-select: none; 
       -moz-user-select: none; 
       -ms-user-select: none;
       user-select: none;
    }
    

18. Save the file.

19. Switch to the browser, reload index.html, and notice that:
    • The bullets should be a bit farther apart.
    • There is now a hand cursor when you mouse over them.
    • Double–clicking a bullet will not select anything.

20. All that’s left to do is indicate which bullet is active! Switch back to main.css in your code editor.

21. Below the .cycle-pager span rule (which starts around line 112), add the following bold rule:

    .cycle-pager span.cycle-pager-active {
       color: #fbc324;
    }
    

22. Save the file.

23. Switch to the browser and reload index.html. The active slide bullet should now appear yellow. Sweet!

24. Click on the bullet controls and enjoy the completed slideshow.

    NOTE: If you want to refer to our final code example, go to Desktop > Class Files > yourname-JavaScript jQuery Class > Done-Files > Cycle-Slideshow-Controls.

$('#featuredShows').cycle({
   slides: '> div',
   pager: '.your-custom-cycle-pager-name',
   speed: 600,
   timeout: 3000,
   delay: 0
});