Hero Slick Slider Widget

Hero Slick Slider Widget

Last updated 03.29.24

The Hero Slick Slider is an image gallery in a slideshow format. It has the features of the Hero Image widget plus a slideshow making it a good choice to display a number of marketing messages on the site homepage. With great photography, it can also can provide an aesthetically pleasing introduction to your site. 
 
The Hero Slick Slider is created in two steps, first by building the individual slides in the Atlas Image Page Type and then by adding the slides to the Hero Slick Slider Widget. 

Related Links & Videos

Add Hero Slick Slider to the page

1. Select where on the page you would like the widget to appear. 
2. Click on the blue plus add widget icon   
3. Select the Hero Slick Slider widget from the widget pop up 
4. Once the widget is added to the page, hover over the added widget until it displays the properties and trash icons. Click on the gear-shaped properties icon. 

Hero Slick Slider Properties

5. In the Hero Slick Slider properties pop up, adjust various settings. Most importantly, select the path to the folder of slick slider slides and the aspect ratio of the images in the slides (these should all be the same).
6. Click Apply button to update the widget with selected properties. The properties pop up will automatically close.

How to delete the Hero Slick Slider Widget 

Hover over the Hero Slick Slider widget until it displays the properties and trash icons and click on the trash icon to delete. 

How to reposition the Hero Slick Slider Widget 

Hover over the Hero Slick Slider widget until it displays the grab icon on the left. Simply drag and drop in a new location. 

Hero Image Widget Properties

PROPERTYDESCRIPTION
PathSelect the file path to the folder of the Atlas Image Pages where the slides are stored
Maximum number of slides Select the maximum number of slides to be displayed (more slides = larger file size of page and longer download times)
Aspect Ratio - Small Select the aspect ratio of the small image

• Square 640x640 px
• 2:1 – 640x320 px
• 3:1 – 640x214 px
• 16:9 – 640x360 px 
Aspect Ratio - Medium Select the aspect ratio of the medium image

• Square 1024x1024 px
• 2:1 – 1024x512 px
• 3:1 – 1024x342 px
• 16:9 – 1024x576 px 
Aspect Ratio - Large Select the aspect ratio of the large image

• Square 1920x1920 px
• 2:1 – 1920x960 px
• 3:1 – 1920x640 px
• 4:1 – 1920 x480 px
• 5:1 – 1920x384 px
• 6:1 – 1920x320 px
• 16:9 – 1920x1080 px 
Image Alt TextThis attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error, or if the user uses a screen reader). Optional but recommended.
Slides to ShowSelect the aspect ratio of the large image
Slides to Scroll Enter the number of slides to scroll 
Speed Set the speed in milliseconds (default is 1000) 
Autoplay Check to set Autoplay on 
Autoplay Speed Set the speed in milliseconds (default is 1000) 
Show Dots This is checked if dot indicators should be displayed 
FadeCheck to enable fade between slides
Slide AnimationSelect the Animation type:

• Ease
• Linear  

Hero Slick Slider Widget Example

Customize Header Text

Layout E - Text Box Wide Centered Top

You can add a button

Customize Header Text

Layout D - Text Box Right Aligned

Customize Header Text

Layout C - Full Image Centered

Headline

Eiusmod tempor incididunt ut labore et dolore magna aliqua.

BUTTON

Headline

Eiusmod tempor incididunt ut labore et dolore magna aliqua.

BUTTON

Headline

Eiusmod tempor incididunt ut labore et dolore magna aliqua.

BUTTON

Example of Hero Slick Slider Widget used to create a banner slideshow.