SuperHero Slider

https://www.muse-themes.com/products/superhero-slider

Since the release of our very popular SuperHero widget, we've received loads of requests for a slideshow variation. Closely following the feedback we've received, we've built SuperHero Slider: a unique slideshow that loads fullscreen on any device, yet allows for normal scrolling to content below.

We've integrated the core functionality of our Cinch Slideshow widget into SuperHero Slider, allowing for full responsive behavior, captions, and proven reliability.

  • Widget Compatibility: Highly Compatible (No known issues when combining with other MuseThemes widgets)
  • Current Version: 1.0
  • Supported Devices: Desktop, Tablet, Phone

Release Log

  • 1.0: Initial release
 



Setup

WIDGET PLACEMENT

  • Drag the widget from the library and drop into your project in Design mode.
  • With the widget selected, click the Resize button in the top menu and select "Stretch to Browser Width".
  • Move the widget to the very top of the page. You can verify this by ensuring that the Y axis in the Muse top menu is at 0 (zero). The Y axis can also be set to 0 manually.

WIDGET OPTION PANEL

  • Open the widget option panel.
  • The settings in the main area are general slideshow settings.
  • Transition Mode and Transition Speed set the transition style (fade or slide) and the amount of time it takes for the slide or fade to complete.
  • Caption Mode: This setting enables or disables captions.
  • Caption Position: Captions are placed in a fixed position and remain consistent when the browser is resized. There are 9 position options.
  • Enable Nav Dots and Enable Nav Arrows: These options enable navigation dots (pagination) and navigation arrows, respectively.
  • Nav Dots Position: This setting provides 3 fixed position options for the navigation dots. All three options are fixed to the bottom of the screen.
  • Enable Custom Arrows: This setting enables the use of custom arrows, and replaces the default arrows. Use the “Add File” options to select the left and right arrow images.
  • Custom Arrow Dimensions: This setting controls the width and height in one parameter. The original aspect ratio of the images are retained.

SLIDESHOW STYLING SECTION
This section contains all of the styling options for the slideshow. The function of these settings are as labeled, though some settings will be discussed in further detail below:

  • Slide Border Radius: This setting will likely not be used often. It applies a radius to the corners of the slideshow images.
  • Navigation Color: This color is applied to both the navigation dots and the default arrows.
  • Caption Font: This applies the font to the captions. Be sure that the font is used elsewhere on the page using a standard Muse text box. The browser is otherwise unable to load the font. Also make sure to use the correct CSS style name for the font.
  • The following settings in this section apply to the captions. If you do not wish to use a caption background color fill, you may set the Caption BG Color to 0 (zero) or set the Caption BG Opacity to 0 (zero).
  • Consider using a caption background color fill if the caption text will have colors similar to the images, i.e. black caption text used over dark images.

SLIDE SETUP SECTIONS
There are 4 slide setup sections with input options for 5 images each, giving support for 20 images total.

  • Enable each image with the Enable Slide# setting. Do not enable slides unless you load a slide into that position.
  • Links may be applied to slides on an individual basis, by enabling the Enable Caption Link and entering a link in the Caption Link field. The URL used in this field should be a complete external link. You may use internal pages, but you must use the actual published link address.
  • Captions can be set individually per slide, though captions are enabled or disabled globally via the Caption Mode setting in the main area of the widget options. To use a slide without a caption, leave the Caption field blank. This works best when there is no background color fill.
  • Repeat for all slideshow images.

Commonly Asked Questions

No Commonly Asked Questions


Known Issues/Conflicts

The navigation dots may be cut off from view on some mobile browsers. This is because the widget calculates the height of the slideshow based on the viewport of the device. It is not possible to compensate for the browser toolbar area since the size of the toolbar varies from browser to browser. So in cases where the bottom of the slideshow is cut off, the navigation dots will be seen when the user scrolls down.


Additional Info Links