HTML Slider


The HTML Slider Element is a tool that allows you to create a slider, or gallery, that can contain images, videos, or text.  You can include links or Call To Action buttons, create multiple slides, and set the slider to transition automatically. A clickable HTML web link can be assigned to each image within the HTML Slider. Each assigned link can redirect visitors to a chosen page within your website. No HTML knowledge is necessary; Aurora does the markup for you. Your slider can be an up-and-running gallery in a few minutes.


Before you drag the HTML Slider Content Element and drop it into a Content Area, you must have your images uploaded to the File Manager. To create an HTML Slider, navigate to the page within your website where you want the slider to appear.

Drag the HTML Slider Content Element into the Content Area of your choice. The HTML Slider window will open.

The addition of an HTML slider can greatly improve the look and feel of a website.

 

HTML Slider Tab


Images are placed into the slider individually using the Rich Text Editor.



Browse for your image by clicking on the Browse icon:

The Browse Image icon will take you to the File Manager. Click on the image to make your selection, select a size and click insert.

To add an additional image to your slider, click Add New Slide and repeat the directions above. 

 

HTML Slider Advanced Tab

The Advanced Tab contains features that can help you fine-tune the appearance of your HTML Slider.


Container Settings

  • Display: This pulldown menu determines wether the Element will be displayed on mobile browsers.
    • All Devices: Display this content on all versions of the website.
    • Full Version: Do NOT display this content on mobile versions of the website.
    • Mobile Version: ONLY display this content on mobile versions of the website.

  • Align: Align this content left, center, or right inside it's containing Content Area.

  • Class: Assign a CSS class to this Content Element, allowing you advanced control over how it is displayed.

  • Title: The title, more commonly known as a tool tip, is text that appears when you hover over this Element. You can place instructions or other helpful content in this field.

  • Cache For: Caching allows for the same content to show for a certain period of time.  If elements can be cached it allows for the website to process faster.

Slider Settings

  • Slider: Please use Box Slider.
  • Width: Set width for the slider.
  • Height:Set height for the slider.
    • Setting the height will force the slider to stay in one spot no matter the size of the images. The slider will be consistent and not bounce around when the slider has images with different sizes in it. It is very important to put images of the same size or they will get distorted when a height is set.
  • Transition: Set animation-like effects that occur in between images in the slider.
    • Horizontal: Set image movement from left to Right.
    • Vertical: Set image movement from top to bottom.
    • Fade: Set image movement from fade out to fade in.
  • Delay: The length of time the slider stays at the slide before moving to the next slide.
  • Animation Time: The time it takes to shift from one slide to another.
  • Auto Play: Whether or not the slider will play automatically, or if it has to be triggered using the Start/Stop button.
  • Random Start Slide: Set slider to start on a random image.
  • Resize Contents: This is where the most of the control for the slider occurs.
  • Resize Content: No Width: pixels
    1. does not resize the slider or the images (need to include a height)
    Resize Contents: No Width: Percent
    1. slider shrinks but not images (images will become distorted as they become bigger than the original image) (need to include a height)
    Resize Contents: Yes Width: pixels
    1. gives a fixed width on the slider (get the original image)
    Resize Contents: Yes Width: Percent
    1. slider scales to width of element and image scales to the percentage set(image may get distorted if it scales bigger than the one provided)
  • Pause On Hover: Set slider to pause when mouse hovers over a slider image.
  • Display Arrows: Whether or not to display left and right arrows around the image.
  • Display Tabs: Displays tabs at the edges of the slider.
  • Display Start/Stop: Whether or not to display the start/stop button, gives visitor animation control.
  • Stop At End: Set slider to stop at the last image.
  • Play RTL: Set image movement from right to left.

Click Save to apply your changes.