Super Hero Slider creates two new post types in your dashboard – Slides and Sliders. You create and edit slides and sliders in the same way you would a normal post or page.
To create a Slider, simply go to Sliders > Add New and give your Slider a memorable title.
You’ll see that there are no slides listed but there are other options available.
Once you’ve created your first slider, you can create a slide.
When you have added your slides, you can edit the slider to drag and drop slides into the order you want. Slides at the top of the list will appear first.
Where to place the next and previous arrow buttons.
The style for the navigation buttons.
The arrow icons used in the buttons
Choose size and shape
Where to display small dots under the slider to represent each slide
How long each slide will display for before automatically transitioning to the next slide. Set this value to 0 to disable autoplay. Values are in milliseconds – divide by 1000 to get seconds.
Pick the animation for the slide to transition in and out
After you have created a slider, you can add some slides. Go to Slides > Add New to create a slide. Add a title then complete the options below.
Once you’ve successfully created a slide and added it to a slider, you’re ready to add your slider to a page.
Upload an image
Click Add Image to open the media manager. Either select an existing image or upload a new one. Click Select.
Add some text for the captions. Keep it brief to avoid filling the slide with text.
Choose animations for the captions to appear.
Select how many milliseconds to delay the caption from appearing. Setting Delay 1 and Delay 2 to slightly different values will make your captions appear at different times during the slide.
Pick the slider(s) you’d like to allocate this slide to. Note that you can add the same slide to multiple sliders.
Choose where the captions will appear.
You can link the pages to another page on your site if you wish.
There are several ways to add a slider to your page or post.
[super_hero_slider slider=99] anywhere in your content where slider is the ID number of your slider.
More simply, if you insert
[super_hero_slider] the slider will look for an ID number saved to your post/page meta in the Slider ID field that is automatically added to every post and page.
<?php super_hero_slider(); ?> to a page template.
<?php super_hero_slider(99); ?> to a page template. Note that if you specify a parameter (e.g. 99) this will always display the slider with the ID. If you omit the parameter, Super Hero will use the slider ID specified in the page or post metabox.
This is a neat way to add your slider. Depending on what hooks your theme supports, add something like this to your
add_action ( 'your_theme_hook', 'super_hero_slider' );
Every time the
your_theme_hook fires, Super Hero will add a slider – if one is specified in the page or post Slide ID field.
You can add a hook to your theme by editing the theme files. For example, if you wanted to add a hook at the top of the page content in the Twenty Sixteen theme, you can edit the
header.php file, adding as the final line:
do_action ( 'your_theme_hook' );
This tells your theme to fire any functions associated with this hook.
Remember: if you’re editing theme files, it’s usually best practice to create a child theme first. This will avoid having to re-edit files every time your theme has an update.
By default, Super Hero Slider will use large size images. You can see what size your large images are by going to Settings > Media in your dashboard.
You can also create a specific size for your slider images by going to Settings > Super Hero Slider and adjusting the ‘Image width’ field.
You can then specify the ‘Default image size’ to use in your slides.
If you experience pixellation with your image quality, we recommend increasing the image width. Note that you may have to run a plugin that will resize your images. A good example is Regenerate Thumbnails.
Script appearing in place of slider
Version 3.2.2 of WooCommerce strips out scripts from shortcodes added to the Shop page. You can’t currently display a Super Hero Slider on the WooCommerce shop page.