Custom Sliders Using Popups

Below is an example of a custom slider created using popups. This slider is semi-automatic: it automatically cycles through the popups at predefined intervals and then stops at the 'Home' slide. From there, users can manually navigate through the slides by clicking on the links within each slide. This method has advantages over a traditional image gallery slider, as there is no need to create image content beforehand. Instead, you can use Sparkle's toolset to design the content for each slide directly. This technique can be used to create a captivating header for a page, and it’s really simple to do.

How to Do It.

To create a slider, follow these steps:

1. Create a Background Box: Start by creating a wide box on the page to serve as the background for the slider. You can make it any size you wish.

2. Create the First Popup: This will be your template for all the popups in your slider. In the example, the popup is the same height as the background box and 1200 pixels wide. Position the popup directly over the background box, ensuring they match in height.

3. Add Elements to the Popup: 

  • Image Placeholder: On the right side of the popup, add an image placeholder.
  • Black Box: Place a box filled with 40% black on the left side of the popup, slightly overlapping the image placeholder. This creates a holding area for the currently displayed link box.
  • Logo and Text Box: Add a logo and a text box with a button underneath. Align these elements centrally over the black box on the left.

4. Create Link Boxes:

  • These are normal boxes extending from the top to the bottom of the popup.
  • Fill them with 40% black and overlay them with white text rotated 90 degrees.
  • Align the text over the boxes and group them to form a single object. 
  • Duplicate this grouped object to create additional links. Create one link for each slider you want to display and align them neatly on the right of the screen (over the image placeholder), reserving one (the Home Slide Link) to appear in the centre holding area.

5. Finalize the Popup Template:

  • Add an image to the image placeholder.
  • Replace the text with your desired content.
  • Your first slide is now ready.

Before moving on to the next popup, make a few changes in the style panel as shown in the illustration below:






These settings tell the popup that it is a Normal popup, it should Always be On Top, and it should Open Automatically after a delay of 0s. You also need to check the ‘Once’ option to ensure that it doesn’t keep repeating. You should then switch to the arrange tab, and give the popup a name - the default will be ‘popup1’, but you should make it a more meaningful name. In the example above, it was given the name ‘Home’

Creating the second Popup

Select the entire popup and press Cmd+C to copy it. Next, press Cmd+V to paste it. You might not see any visible changes on the page. This is because pasting the copy replaces the original popup with an identical one in the same position. You can confirm this in the Arrange inspector, where the name of your popup now has the same name as the first one, but with copy' appended to it. Rename it to something more meaningful, then switch back to the Style inspector to make additional changes to this popup as shown in the illustration below.

On this popup a delay of 5 seconds has been added, which means this popup will open 5 seconds after the ‘Home’ popup has been on screen.

This popup also has an animation effect applied to it with a duration of 1 second.

Once these changes are made, you will need to modify the popup content itself. Start by replacing the image and the text content. You can also change the color of the logo and button if you wish. In the example above, we changed the colors of these items by selecting a color from the image to give the popup a more harmonious look. 

Next, move the link box for the current popup to the centre holding area, and drag the ‘home’ slide link back over to the right of the popup. Now you’ve completed your second popup.

Just like with the first popup, select the entire popup and press Cmd+C and Cmd+V to create another popup. This new popup will only require you to adjust the delay time in the Style inspector, as all other settings were copied when you duplicated the slide. Increase the previous delay time by 5 seconds—in our example, we set it to 10 seconds. 

To summarize: the home popup will display immediately when the page loads. The next popup will appear after 5 seconds, and the following popup after 10 seconds, and so on.

Continue duplicating the popup until you have the required number of popups for your slider. Remember to give each popup a meaningful name in the Arrange tab, and don’t forget to move the current popup link box to the center landing area for each slide you create, and ensure that all the other link boxes go back over to the right of the slides.

One Final Step

You may want your slider presentation to end with the 'Home' popup displayed. However, since we've set a delay time of 0 seconds for the 'Home' popup, it appears first when the page loads. To have it appear at the end of the presentation instead, you need to adjust its delay time. But if you change the delay time, it will no longer appear first.

To resolve this, simply duplicate the 'Home' popup and set the timing for the duplicate to be the last popup in the sequence. This way, the original 'Home' popup will still display first, and the duplicate will display last. Here is a summary of the timings used in the example above.

Remember to add the animation effect to the duplicate ‘Home’ popup to maintain transition consistency. It doesn’t need to be added to the original ‘Home’ popup because we want that to be instantly seen on the page when it first loads.

Creating the Links

Select each link box on every popup and apply an on-click action set to ‘Open Popup’ Then choose the relevant popup to open for each link. The option looks like this:




Other Uses for this Technique 

You can vary the layout of popups to suit other types of application. For example, you could create a Q&A section of your website with a list of questions on the left side of the section, and have the answers appear as popups on the right of the section. An illustration of this type of arrangement is shown below: