Slider Widget

The Slider widget allows you to quickly create beautiful slides with ease.

Content Tab

Slides Section

Shows the list of slides. You can drag and drop them to change their position, duplicate, delete or add a slide.   When you click on a single slide its options open up. Each slide has Background, content and style settings.

Background Tab
  • Background Color - Set the background color for the slide.
  • Background Image - Choose an image from the media library.
  • Background Options - Repeat, Attachment, Position and Size. Choose whether to display the background as cover or auto. The auto image is for situations where you have the exact sizes needed, and also where you would want the entire image to appear in the slider. The cover size is for more abstract and atmosphere images, where the showing of the entire image is less important.
  • Background Overlay - Set a background overlay that will appear on top of the image.
Content Tab
  • Title & Description - Insert the title and description for the slide.
  • Button 1 and 2 - Set the options for the buttons.
  • Image (foreground) - Choose an image to display in the foreground.
  • Image Link - Add a URL the image will link to.
  • Shortcode - Place to add a Form or Booking Shortcode.
  • Formidable Form Style - Inline style or a stacked form style.
  • Booked Tooltip - Text that shows above the Booked Calendar.
  • Calendar Size - Small or large.
Style Tab
  • Content Width - Choose the width of the slide.
  • Horizontal Position - Position the content horizontally: Left, right or center.
  • Vertical Position - Position the content to the top, middle or bottom.
  • Text Align - Align the text left, center or right.
  • Title Color - Choose the color of the title.
  • Title Typography - Title font family and style settings.
  • Content Color - Choose the color of the content.
  • Content Typography - Content font family and style settings.

Height

  • Set the exact height of all slides.

Down Arrow

  • On / off switch - Turn feature on and off.
  • URL anchor - html anchor value e.g.: #aboutus.
  • Down Arrow Color - Choose your color of the down arrow icon.

Slider Options Section

  • Auto play - Get the slides to rotate automatically, according to the speed you set. 
  • Transition Style - Controls the transition style, "fade" or "slide"
  • Easing - Determines the easing method used in jQuery transitions
  • Infinite Loop - Have the slides rotate in an infinite loop and without stopping.
  • Smooth Height - Animate the height of the slider smoothly for slides of varying height
  • Slideshow Speed - Set the speed of the slideshow cycling, in milliseconds (1 s = 1000 ms)
  • Animation Speed - Set the speed of animations, in milliseconds (1 s = 1000 ms)
  • Randomize - Randomize slide order, on load
  • Pause on Hover - Make the slide pause when the mouse hovers over it.
  • Touch - Allow touch swipe navigation of the slider on enabled devices
  • Direction Nav - Create previous/next arrow navigation
  • Paging Controll - Create navigation for paging control of each slide