1) Creating a Hero Slider

To create your Slide Anything PRO Hero Slider:
  1. Make sure that ALL your Browser/Device widths are set to ‘1’ – the ‘Hero Slider’ option is only be available for sliders that display a single slide at-a-time.
  2. Tick the ‘Hero Slider’ checkbox.

A Hero Slider is a slider that always is 100% of the width/height of the device it’s being viewed on (or 100% of the window width/height on a desktop). Hero Sliders automatically resize to retain this 100% width/height depending on your window or device width/height.

If you want to create a Hero Slider, the Slide Anything shortcode MUST BE inserted into a FULL-WIDTH SECTION. Most theme ‘Page Builders’ (Visual Composer, Divi, Elementor, SiteOrigin PageBuilder etc.) allow you to create full-width sections when building your pages. You will insert your Slide Anything shortcode into one of these full-width sections. If you are not using a ‘Page Builder’, you will have to manually create a PHP theme template file that contains a full-width section into which you can insert your Slide Anything shortcode. Here are some links which provide information on how to create full-width templates in WordPress:
A Slide Anything Hero Slider is created using CSS Viewport Units, specifically the ‘vh’ (viewport height) units. Just about all modern browsers today support CSS Viewport Units, and for more information on compatibility, click the link below:

At the time of writing this, CSS ‘vh’ browser compatibility was 92.6%. You can see that very old versions of current browsers do not support CSS ‘vh’. Also ‘Opera Mini’ does not support CSS Viewports, but this browser is installed mainly on old pre-touchscreen phones.

Purchase Slide Anything Pro

Get Slide Anything Pro and add IMAGE, VIDEO and HTML popups to your sliders for only $10.

Content & Settings for the Demo Slider

Listed below are all the settings I’ve used to create the Demo Hero Slider at the top of this page.

Content for for each slide

Click the thumbnail below to open screenshot:
Each slide consists of a single H2 and H4 heading.

Slide Background settings

Click the thumbnail below to open screenshot:

The Responsive CSS for this slider

#hero_slider .owl-item .sa_hover_container h2 {
   padding:5% 0px 0px; font-size:4.4vw; line-height:120%; color:#ffffff; text-shadow:2px 2px 0px rgba(0, 0, 0, 1); }
#hero_slider .owl-item .sa_hover_container h4 {
   padding:2% 0px 0px; font-size:2.6vw; line-height:120%; color:#ffffff; text-shadow:1px 1px 0px rgba(0, 0, 0, 1); }
@media only screen and (max-width:980px) {
   #hero_slider .owl-item .sa_hover_container h2 { padding-top:10%; font-size:7.2vw; }
   #hero_slider .owl-item .sa_hover_container h4 { padding-top:4%; font-size:4.4vw; }
}
@media only screen and (max-width:767px) {
   #hero_slider .owl-item .sa_hover_container h2 { padding-top:20%; font-size:9.0vw; }
   #hero_slider .owl-item .sa_hover_container h4 { padding-top:8%; font-size:6.0vw; }
}

Slider Settings

Click the thumbnail below to open screenshot:

Slider Style

Click the thumbnail below to open screenshot:

Purchase Slide Anything Pro

Get Slide Anything Pro and add IMAGE, VIDEO and HTML popups to your sliders for only $10.

2) Adding Slider Thumbnail Pagination

Within the ‘Thumbnail Pagination’ Meta Box, check the ‘Use Thumbnail Pagination‘ checkbox.

There are various locations you use for your slider’s thumbnail pagination: ‘Inside Bottom’, ‘Inside Top’, ‘Inside Left’, ‘Inside Top’ and ‘Outside Bottom’. The demo slide at the top of this page is an example of ‘Inside Bottom’ pagination. Click the 2 thumbnails below for examples of ‘Inside Left‘ and ‘Outside Bottom‘ thumbnail pagination.

The various settings for Thumbnail Pagination are:
  • Thumbs Location – choices are ‘Inside Bottom’, ‘Inside Top’, ‘Inside Left’, ‘Inside Right’, ‘Outside Bottom’.
  • Thumbnail Image Size – The WordPress image size to use for your pagination thumbnails.
  • Container Padding – The percentage padding around the thumbnail container. This is a percentage of the screen width and is the ‘gap’ between the thumbnail container and the edge of the slider.
  • Thumbs Width – The width in pixels for each thumbnail.
  • Thumbs Height – The height in pixels for each thumbnail.
  • Thumbs Opacity – The opacity of thumbnails. Note that the active thumbnail is always fully opaque.
  • Active Thumb Border Style
    • Border Width – If set to a value greater than zero, then a border will be displayed around the active thumb
    • Border Color – The color of the border around the active thumb – the border width above must be greater than zero.
  • Responsive Thumb Size
    • Tablet Thumb Size – The percentage size of the thumbnails on tablet devices (under 1000 pixels wide).
    • Mobile Thumb Size – The percentage size of the thumbnails on tablet devices (under 768 pixels wide).
CONTACT US