You can specify an image to appear temporarily before your slider loads. In Slider Settings, upload an image to the Loading Image field.
The Pro version of Super Hero Slider gives you several options for creating full-screen sliders.
In Design Settings, check the option to “Go Full Screen” then select one of the following Layout Modes:
Block mode pushes the page content below the slider. As the user scrolls down the page, the page content will appear and the slider disappear.
Overlay mode places the slider on a layer above the page content, obscuring the content. This option works well if you want a full-screen slider on your page, e.g. for a landing page. No other content will display.
Allow Parallax Scroll
Parallax scrolling will add a parallax scrolling effect.
To create a carousel of products, first read through the article on creating a products slider.
Once you’ve created your slider, you can make it into a slider by increasing the number of Carousel Items in the Slider Settings panel:
Selecting 4 items will look like this on the page:
Note that the options in the Products Feed Slider Layout panel do not apply to carousels.
You can create a Products Slider to showcase selected WooCommerce products in a slider or a carousel. Go to Sliders > Add New to create a new slider, give it a name, then select ‘Products (requires WooCommerce)’ in the ‘Content Type’ dropdown in the Slider Settings panel.
Some new panels will open below the Background Settings panel.
Products Feed Slider Layout
Use this panel to set the layout for your slider.
You can choose from four possible layouts:
- Image Left | Content Right: This will displayed the featured image on the left side of the slide and the content on the right
- Image Right | Content Left: This will displayed the featured image on the right side of the slide and the content on the left
- Image Full Width | Content Left: This will display the featured image at the full width of the slide and place the content on top to the left
- Image Full Width | Content Right: This will display the featured image at the full width of the slide and place the content on top to the right
Your content, e.g. product title, description and price, will appear as a caption with the featured product image. Choose from:
- Standard: The content will appear with no background color
- Panel (third): The content will appear at 33% of the slide width with the option to include a background color
- Panel (half): The content will appear at 50% of the slide width with the option to include a background color
An optional color for the caption panel.
Products Feed Slider Content
This panel allows you to select what products to display in the slider.
Number of Products
Select how many products to display in your slider
Optionally select which categories to display products from.
Check this if you only want to include featured products in your slider.
On Sale Products
Check this to only include products that are on sale.
Choose how to order your products from:
- Menu Order
Choose either ASC or DESC.
Products Feed Slide Content
In this panel, you can refine which content will appear on each slide. There are checkboxes to enable or disable product title, ratings, description, price and add to cart button.
There are some additional settings to give you greater flexibility in how your slider works:
Use Alt Product Image as Background Image
When you install Super Hero Slider Pro, the plugin automatically adds a new field to your product edit screen between the Product Image and Product Gallery panels.
You can upload an image here that won’t display in your product page but that is available for your slider. If you prefer to use the alt image in your slider, just check the ‘Use Alt Product Image as Background Image’ option.
Embed Featured Image in Product Description
In conjunction with the setting above, you can choose to include the product’s featured image as part of the slide content. By checking both these options and including an alt image, you can create slides like this:
Change the text color in your content.
Products Feed Animations
Use this panel to set animations for the three captions in your content.
The captions work like this:
- Caption 1: Product Title, Ratings and Featured Image
- Caption 2: Description
- Caption 3: Price and Add to Cart Button
Products Feed Advanced Settings
This panel includes some additional options.
- Slider Max Height: if you decide that you’d like to set a maximum height for your slider, enter the value in pixels here
- Constrain Main Image Width: this will ensure that the width of your main image is set to 100%. If you leave this deselected, the image will potentially be cropped to fit the slide’s dimensions
- Center Main Image: if the ‘Constrain Main Image Width’ setting is deselected, you can opt to center your image within the slide
- Embedded Feature Image Max Height: if you have selected to embed the featured image in the slide content, you can set a maximum height for that image here
- Mobile Breakpoint: there are some layouts which might change for smaller screens. You can change the breakpoint here
First, create your posts slider. Then you can add a menu to it by following these steps:
In Navigation Settings, select ‘Display’ under ‘Pagination’ and select a position for the ‘Thumbnail Navigation’ – either top, bottom, left or right.
Now, in the Posts Feed Slider Layout panel, check the Menu Navigation box and choose what content you’d like to display in the menu:
To add a posts carousel, firstly follow the guidance on creating a posts slider. Once you’ve added your posts slider, you simply need to define how many items are visible within the carousel.
In the Slider Settings section, update the Carousel Items field. If you’d like to add spacing between the items, update the Carousel Item Spacing field as well:
Shoreditch seitan mcsweeney’s craft beer vinyl wayfarers homo DIY gentrify. You probably haven’t heard of them next level freegan fap.
Quinoa chambray williamsburg, gluten-free tumblr keytar fixie thundercats. Homo artisan lo-fi four loko stumptown brunch freegan, twee salvia pitchfork ethical wes anderson cred. VHS gentrify cliche readymade letterpress bicycle rights. Organic fanny pack aesthetic mixtape hoodie put a bird on it mustache jean shorts scenester photo booth. Quinoa mlkshk etsy photo booth yr. Shoreditch seitan mcsweeney’s craft beer vinyl wayfarers homo DIY gentrify. You probably haven’t heard of them next level freegan fap.
Wolf organic beard, vegan vinyl chambray aesthetic food truck viral quinoa mustache helvetica freegan. Gluten-free messenger bag yr, williamsburg cred iphone fixie wes anderson terry richardson.
Wolf organic beard, vegan vinyl chambray aesthetic food truck viral quinoa mustache helvetica freegan. Gluten-free messenger bag yr, williamsburg cred iphone fixie wes anderson terry richardson. High life banksy whatever VHS aesthetic yr. Next level fap carles, shoreditch etsy dreamcatcher williamsburg farm-to-table skateboard chambray jean shorts fanny pack terry richardson food truck aesthetic. Mustache 3 wolf moon twee high life dreamcatcher carles. Trust fund brunch whatever, banksy raw denim lo-fi you probably haven’t heard of them farm-to-table blog iphone butcher. Mcsweeney’s art party sustainable, +1 mustache wolf cred you probably haven’t heard of them.
You can easily add a slider to include your most recent posts. Go to Sliders > Add New to create a new slide, name it as you wish, then select ‘Posts’ from the ‘Content Type’ dropdown under Slider Settings.
Two new panels will open in place of the standard Slides Order panel.
Posts Feed Slider Layout
Use the options in this panel to define the layout of the posts slider.
Number of Posts
Select how many posts to include in your slider.
Select one or more categories if required.
The caption will appear in the same position on each slide.
Leave this as ‘Standard’ for the standard caption layout or select either ‘Panel (third)’ or ‘Panel (half)’ to have the captions appear on a solid background.
This color picker will only appear if you choose one of the panel options from Caption Design. Select the color for your panel background.
Select this option to replace the thumbnail navigation style with a text menu showing a list of recent posts.
Menu Line 1, 2, 3
If you select the Menu Navigation option, you can set what content will appear in the menu navigation here.
Posts Feed Slider Content
In this panel you can define the content that you want to appear in your slider. The slider will automatically pull through the post’s featured image to use as the slide image. You can define caption content and animation options here for 1 to 3 lines.
Decide what content to display – either the post’s categories, publish date, excerpt, title or no content at all.
Pick a style to display the content in.
Choose a color for the text.
Caption Animation, Delay, Speed
Animation options for each line of the caption.
Lomo gluten-free salvia you probably haven’t heard of them portland. Mlkshk jean shorts carles, etsy artisan farm-to-table sartorial williamsburg marfa PBR leggings trust fund.
Cosby sweater iphone artisan, squid trust fund photo booth twee blog shoreditch single-origin coffee aesthetic jean shorts messenger bag brooklyn butcher. Iphone fap banksy next level put a bird on it, letterpress photo booth thundercats biodiesel fanny pack etsy banh mi wayfarers. Sustainable four loko dreamcatcher, vegan single-origin coffee yr cardigan biodiesel williamsburg thundercats salvia master cleanse terry richardson tumblr mcsweeney’s. Lomo gluten-free salvia you probably haven’t heard of them portland. Mlkshk jean shorts carles, etsy artisan farm-to-table sartorial williamsburg marfa PBR leggings trust fund. Mcsweeney’s banh mi lo-fi mustache, fixie cosby sweater tumblr twee fanny pack. Thundercats food truck vegan, hoodie irony artisan beard synth.