Text Slider

  1. Home
  2. Knowledge Base
  3. Widget Docs
  4. Text Slider
The Text Slider is great for testimonials, quotes, or any time you want to draw some attention to text on your site. This widget packs all the power of a fully-featured slideshow, but is built specifically for text. Customization options allow for full styling control, support for multiple slides displayed at the same time, and plenty of transition modes.

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

Tutorial Video

Setup

Widget Placement

  • Place the Text Slider on your page where you would like the slider to appear.
  • If you wish to resize the slider, use the blue resizing handle in the bottom right corner of the widget container.
  • The position (left/center/right) can be easily set by right-clicking on the widget and using the alignment tool.

Widget Options (Content)

  • Unique ID: Unique IDs are required when multiple instances of the Text Slider widget will be used on the same page.
  • Text Slides / List Items: List Items are where you enter all of your text – title, description, as well as optional links for title and description.
  • Slides to Display at Once: This setting allows for you to display multiple slides at the same time. Note that only the “Slide” and “Coverflow” transition effects support display of multiple slides at once.
  • Loop Slides: This setting allows the slideshow to continue once the last slide is reached. The first slide will display after the last slide is shown.
  • Centered Slides: This setting can be used if you wish to create a carousel style slider. It should be used with even numbers of slides (2 or 4). The active slide is always shown centered, while the slides on the left/right (or furthest left/right) are partially shown.
  • Navigation Arrows: This toggle displays or hides the navigation arrows.
  • Pagination Dots: This toggle displays or hides the pagination dots.
  • Slide Transition Settings: This submenu reveals additional options…
  • Transition Direction: Allows for horizontal or vertical transitions. Note that some transition effects are not suitable for vertical transitions.
  • Transition Speed: Sets the amount of time it will take for the transition effect to complete (in milliseconds)
  • Transition Effect: This dropdown provides several different transition effects for the slide transitions. Note that each transition style has its own set of additional settings that are revealed when selected. Also note that only the Slide and Coverflow transition effects allow for multiple slides to be displayed at once.
  • Autoplay Settings: This submenu reveals additional options…
  • Autoplay Slideshow: This toggle turns on autoplay for the slideshow.
  • Autoplay Delay: This settings sets a delay time before the slideshow begins. Note that this applies only to the very beginning of the slideshow play on page load only.
  • Stop on Last Slide: This allows the slideshow to stop and stay when it has reached the last slide.
  • Reverse Direction: This reverses the direction of the slideshow, ongoing.

Widget Options (Design)

The Design tab of the widget contains extensive styling options. The majority of these options will not be explained here in detail, as they are self-explanatory and are labeled with their specific function.

The settings mentioned below are ones that may not be obvious or may require further explanation.

  • Slider Container Styling: This section allows control of the height of the slider container, as well as spacing around the content within. You may also create a border around the slideshow.
  • Description Styling: A couple settings that should be noted in this section are the Vertical and Horizontal Spacing settings. These settings allow control of the space around the description, which also controls the margin between the title and description.
  • Navigation Arrow Styling: In addition to the standard arrow styling options, this section offers positioning control of the arrows. The Center Vertically toggle is on by default, and centers the arrows within the container, vertically. If you find that the arrows do not seem aligned where you want them, you may use the Top Spacing setting to manually set the height of the arrows, vertically.

Tips:

  • Spacing: When you’re designing the layout of your slider, you may be challenged by the proper alignment of things like title, description, etc. Keep in mind that you may need to adjust multiple spacing parameters, which are found in different sections of the widget options.The primary spacing options you should need can be found in the Slider Container Styling, Description Styling, Navigation Arrow Styling and Pagination Dots Styling sections.
  • When making changes to the main layout of the slider by adjusting things like Transition Effect or Slides to Display at Once, you may notice that the slider may look distorted or broken after making a change. You may correct this by refreshing the browser.

Related Articles

Join Now