Slider Widget

How Do You Use ATLAS - Slick Slider?

The ATLAS - Slick Slider widget is good to use on your site's homepage to display pages your co op would like to draw attention or provide easy access to. The Slick Slider also enables simpler user navigation and provides an aesthetically pleasing introduction to your site.

Download the PDF Version

Want to save this information in your files? Not a problem! Download the PDF by clicking the button below.

Creating A Folder Page

1: Before you can create a Slick Slider, the subpages you'd like to display must be saved as images stored in a folder. The folder should be created beneath your site's Home page. Begin by clicking the plus sign below the "Edit" button to create a new page.

2: Select the "Folder" page type, and give it a name. Then drag the folder under the Home page. You may also right click the Home page and select "New" if you want to avoid dragging the folder page.

The folder page should automatically inherit the content and layout of the homepage.


Creating Image Pages

1: After you've created a folder page, you need to create image pages for the pages you'd like to display in your slider. Right click on the folder and choose "New."

2: Choose the "ATLAS - Image" page type.

3: You'll then be brought to a list of fields allowing you to customize each Slick Slider image. Enter a Title--it's best to use the title of the page you want to display. Choose an Image by clicking the gray "Select" button and uploading it from media libraries.

4: Be sure to upload the same image into the "Image (Medium)" and "Image (Large)" fields. You may change the image ratio so that it varies depending on the screen. For different images to be displayed on tablets and desktops, upload a different picture into the Medium and Large fields.

5: In the "Description" field, you may enter a description of each image.

5: You may also add Call to Action text with a URL to be displayed on the image's Call to Action button. The URL should redirect users to the corresponding page on your site.

6: Repeat this process for each page you'd like to display on your slick slider.


Configuring The Widget

1: After you've created a folder of image pages, navigate to the hamburger menu of a foundation layout, and select "Add new widget." Find "ATLAS - Slick Slider."

2: In widget properties, the "Path" field allows you to select a node in the content tree so that the desired pages appear on the slick slider. Choose "/Home/[Folder name]/%" by navigating to "Home" and clicking on the folder page you created in the content tree.

3: The following fields help you configure the slick slider:

  • Select Top N pages: If there's a maximum number of pages you'd like to display, enter the number here. To   display all designated pages, leave the field blank.

  • Aspect Ratio: Choose the image ratio to display on small (mobile), medium (tablet), and large (monitor) screens.

  • Slides to Show: Enter "1" to display just one slider

  • Speed: Set the slider speed in milliseconds per page

  • Auto paly: Check the box if you'd like the slider to begin automatically upon users landing on the page

  • Show Dots: Check the box to show dot indicators at the bottom of the slider, enabling more user control

  • Fade: Check the box to create a fade effect between slides. If you'd like a slide transition, leave this box unchecked

  • CSS ease: Choose "linear" for a more rigid slide or "ease" for a smoother transition

  • Infinite: Check the box if you'd like the slider to resume scrolling after landing on the final image. For a single scroll through only, leave this box unchecked.

4: Under  Widget container- Make sure it says "ATLAS - Slick Slider"

5: Once you're done configuring, click "Save & Close."