jQuery Cycle: A Simple Slideshow

Topics covered in this JavaScript & jQuery tutorial:

Initial setup, Defining what content gets cycled, Adding more cycles & exploring options, Reversing the animation

Exercise Preview

Exercise Overview

In this exercise, you’ll learn how to use the jQuery Cycle plugin to create a simple slideshow. It can cycle through content with a variety of transitions like fades, pushes, etc. This allows you to display many items in a small space (but one at a time) without the user having to do anything. The next slide is automatically displayed after a time delay of your choosing.

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-Simple-Slideshow 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-Simple-Slideshow folder.

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

6. Towards the bottom of the page, Ctrl–click (Mac) or Right–click (Windows) on the Jive T-Shirts image, and choose Inspect.

7. The DevTools will open at the bottom of the window. As shown below, select the subContent1 div on the left side of the DevTools.

   

8. We want each of the three subContent sections at the bottom of the page to cycle through related content. Each column is a div that contains hidden content. We’ll use the Cycle plugin to display the hidden content, but first let’s see that hidden content. On the right side of the DevTools, find the .subColumn style.

9. As shown below, mouse over height and uncheck the property.

   

10. Close the DevTools.

11. Scroll down the page and notice that you can see a bunch of previously hidden content such as Happy Hour, Private Jive, Our Philosophy, etc.

    NOTE: If you have multiple elements in a slideshow, it’s possible the extra elements will be visible for a short time when the page first loads. Once the Cycle JS loads, it will hide the extra elements, but in the meantime you may see a brief flash of unstyled content (FOUC). To avoid this, you can use CSS to hide everything except the first one (which is what we’ve already done by setting a height on the container and setting overflow: hidden). In the next exercise, we’ll look closer at another technique for doing this.

12. Switch back to your code editor.

Initial Setup

We’ve already downloaded the Cycle plugin and included it in our class files. At jquery.malsup.com/cycle2 you can download the files, find useful documentation, examples, and other support. It’s another free plugin, but we encourage you to donate to its creator if you like it!

1. Now that we know the page is ready with the content we want to be cycled, we can make it actually happen. Switch back to index.html in your code editor.

2. We need to add links to some script files. The preferred order of linking is jQuery, plugins, then your JS files. Around line 93, before the link to main.js add the following two bold links:

   </div>
   <script src="js/vendor/jquery-2.1.0.min.js"></script>
   <script src="js/vendor/cycle/jquery.cycle2.min.js"></script>
   <script src="js/main.js"></script>
   </body>
   

3. Save the file.

Defining What Content Gets Cycled

1. From the js folder open main.js.

2. On line 30 notice we already have jQuery’s document ready code. We only need one instance of this, so we can add our jQuery code inside it.

3. From the snippets folder open cycle-example.js.

4. Select all the code.

5. Copy it and close the file.

6. On line 33, below the // Cycles comment within the document ready braces, paste the code so it appears as below:

      // Cycles
      $('element').cycle({
         fx: 'effectName',
         speed: 300,
         timeout: 1000,
         delay: 0
      });
   
   });
   

7. Let’s customize this to cycle through our first subContent div, which we gave an ID of subContent1. Make the following changes in bold:

   // Cycles
   $('#subContent1').cycle({
      fx: 'scrollHorz',
      speed: 300,
      timeout: 1000,
      delay: 0
   });
   

8. Save the file.

9. Preview index.html in a browser. Watch for the sliding animated content!

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

11. Let’s slow down the cycling. Switch back to main.js in your code editor.

12. Change the timeout amount to 4000.

    NOTE: Timeout is the amount of time between each cycle. It’s measured in milliseconds, so each 1000 is equal to 1 second. 4000 is 4 seconds.

13. Save the file.

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

15. That’s much better, but the animation itself is quick and a bit jarring. Let’s slow that down. Switch back to main.js in your code editor.

16. Change the speed to 600.

    NOTE: Speed is the amount of time the transition takes. It’s also measured in milliseconds, so a speed of 600 is 0.6 seconds.

17. Save the file.

18. Switch to the browser and reload index.html. Excellent.

Adding More Cycles & Exploring Options

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

2. Select the entire cycle() code shown below:

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

3. Copy it.

4. Paste a copy directly below it. Make sure it’s still above the end }); braces and within the document ready function.

5. This time, we’ll do a fade transition. Fade is the default effect if none is specified, so we can remove the fx setting. Delete the fx line so you have the following code:

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

6. Now we have to target the proper element. In the pasted code, change subContent1 to subContent2:

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

7. Save the file.

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

9. Wait a moment and watch for What’s The Jive? to change. You’ll see that Jive T-Shirts animates, but What’s The Jive? doesn’t. Why?

   The Cycle plugin looks for images inside the parent div. In subContent1 (on the left) we have nested img tags. But in subContent2 (in the middle) we have nested div tags. Cycle can work with nested div tags, but we must tell it to look for them instead of img tags.

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

11. Add the following line of code shown in bold:

    $('#subContent2').cycle({
       slides: '> div',
       speed: 600,
       timeout: 4000,
       delay: 0
    });
    

    NOTE: We give the slides option a jQuery selector. Parent > child in CSS means to find the immediate children of the parent, without finding further nested elements. So '> div' finds div tags that are children of the element we’re currently giving to the cycle (which in this case is #subContent2) without finding div tags inside of those div tags.

12. Save the file.

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

14. Wait a moment to see it fade from What’s The Jive? to Our Philosophy.

15. Switch back to your code editor.

16. Select the entire subContent1 cycle code. That’s the first one, not the second!

17. Copy it.

18. Paste a copy below the subContent2 version. Make sure it’s still above the end }); braces and within the document ready function.

19. Let’s do a different scroll effect for this one. In the code you just pasted (the third and last cycle), change both the name of the element and effect name as shown below in bold:

    $('#subContent3').cycle({ 
       fx: 'scrollVert',
       speed: 600,
       timeout: 4000,
       delay: 0
    });
    

20. Save the file.

21. This transition is not included in the core Cycle JS file. It’s available as a separate file which we’ve already downloaded for you and added into this site. Switch to index.html so we can link to it.

22. At the bottom, around line 94, find the Cycle plugin’s script tag. Add the following bold code underneath it as shown:

    <script src="js/vendor/jquery-2.1.0.min.js"></script>
    <script src="js/vendor/cycle/jquery.cycle2.min.js"></script>
    <script src="js/vendor/cycle/transitions/jquery.cycle2.scrollVert.min.js">
    </script>
    <script src="js/main.js"></script>
    </body>
    

23. Save the file.

24. Switch to the browser and reload index.html. Wait a moment to see Premium Jive change to Battle of the Bands.

    It’s a little silly having all the cycles change at the same time. The delay option can take care of that by pausing before the first animation, making it start later. Setting a different delay for each one will stagger the animations. Return to your code editor.

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

26. In the subContent1 cycle code, set the delay to 1000.

27. Save the file.

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

    Notice that the animations don’t all happen at the same time now.

29. Switch back to your code editor.

30. In the subContent2 cycle code, set the delay to 4000.

31. In the subContent3 cycle code, set the delay to 2500.

32. Save the file, switch to the browser, and reload index.html. Awesome!

Reversing the Animation

Currently, the horizontal animation moves from right to left and the vertical moves from top to bottom. But what if we wanted them to go in the opposite direction? That’s easy, so let’s see how.

1. Switch back to your code editor.

2. On the third cycle, add the following line of bold code:

   $('#subContent3').cycle({ 
      fx: 'scrollVert',
      reverse: 'true',
      speed: 600,
      timeout: 4000,
      delay: 2500
   });
   

   NOTE: This same option will work on scrollHorz as well.

3. Save the file and switch to the browser to reload index.html. Notice that the right column should now animate from bottom to top.

Optional Bonus Challenge: Exploring Other Transitions

In addition to scrollVert, there are some other optional transitions that you can load and use. As a challenge, see if you can use a different transition without specific instructions. Here’s the general idea:

1. Link index.html to the appropriate .js transition script. You will find the files in Cycle-Simple-Slideshow > js > vendor > cycle > transitions.

2. In main.js change the fx option to one of the following:
   • flipVert
   • flipHorz
   • tileSlide
   • tileBlind

   If you need any help, refer to the demos at jquery.malsup.com/cycle2/demo

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