Combo Slider

The Combo Slider widget features a caption block that displays independently of the slideshow image. While most slideshows place captions on top of images, Combo Slider allows for larger text captions, while providing an unobstructed view of the image itself. Caption blocks may be placed on left, right, top or bottom of slideshow images.

Demo: https://demo.wocode.com/combo-slider

Setup

  • Place the Combo Slider on your page, where you would like it to appear.
  • Widget width is set using the blue grab handle on the bottom right corner of the widget.

WIDGET OPTIONS (CONTENT)

Note: When changing settings in the options panel, the page may need to be refreshed in order to see changes rendered in the editor.

  • Open the widget options.
  • Unique ID: Enter a unique name here if you intend to use multiple Combo Sliders on the same page.
  • Images and Captions: Use this dialog box to choose images and enter captions for your slides. You may also apply links. Note that inks are applied to the content blocks, and not the images.
  • Image Height: This sets the height of the image portion of the slider. Keep in mind that the caption text block is independent of the image height, and will add overall height if the captions are placed on top or bottom.
  • Slides to Show: This setting allows you to set the number of images that will show at once. Keep in mind that a caption will also be shown for each slide.
  • Slides to Scroll: This setting allows you to scroll a certain number of slides per scroll. Note that this setting should only be used when Slides to Show is set to a value of 2 or more. Additionally, it is best matched to either the total number of slides, or a number that’s divided evenly when using an even number of slides. For example, scrolling 3 slides is a nice fit for sliders that show 3 or 6 slides at a time, and scrolling 2 or 4 slides is best for sliders showing 4 slides at a time.
  • Infinite Scroll: This setting allows the slider to return to the beginning slide and continue scrolling, after the last slide is reached.
  • Center Mode: This mode displays partial images on the right and left sides of the slider, creating a “carousel” look. This mode is best used when an odd number of images are used.
  • Center Mode Padding: This setting is only seen when Center Mode is turned on. This padding is applied to the partial slides seen on the right and left. Essentially, it controls how much of the upcoming and previous partial images are visible.
  • Arrow Navigation: This enables the previous and next arrows.
  • Dot Navigation: This enables navigation dots in the slider, as well as the ability to navigate the slider by clicking on the dots.
  • Autoplay: Enabling Autoplay opens an additional option box with the following settings:
  • Autoplay On/Off: Turns autoplay on or off.
  • Autoplay Speed: Sets the speed of autoplay, in milliseconds.
  • Pause on Hover: Pauses autoplay when hovering over the slideshow.

WIDGET OPTIONS (DESIGN)

  • Content Position: This sets the position of the caption content text block. It may be set to left, right, top or bottom.
  • Content Side Margin: Sets a margin next to the content block, when the content position is set to the left or right.
  • Content Padding: Sets padding inside the content block, between the block edge and the text (when content position is set to right or left).
  • Content Alignment: This sets the alignment of the text within the content block. Note that this is only applicable when content position is set to right or left. Content may be aligned top, center or bottom.
  • Text Style: Styles the caption text.
  • Content Background Color: Sets the color of the content block background, behind the caption text.
  • Rounded Corners (Content Block): Applies rounded corners to the Content Block.
  • Navigation Style: This opens an additional option box that allows for styling of the navigation arrows and pagination dots.