Carousel Slider

  1. Home
  2. Knowledge Base
  3. Widget Docs
  4. Carousel Slider

Carousel Slider

This widget offers a slideshow layout that has become extremely popular on the web. The “carousel” layout differs from standard slideshows, showing multiple images at once. Additional visible images keep site visitors engaged in your photos, products, etc. This highly versatile slider is loaded with features and display modes such as linked captions, cover flow, vertical transitions, and full height mode.

Note: This widget has a known incompatibility with Internet Explorer

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

Tutorial Video

Setup

Widget Placement

  • Drop the Carousel Slider widget on your page. We suggest placing the widget in a new row.
  • Determine the width you would like the slider to have. This slider may be used in fixed or full width. Unless you’ve placed the widget into a row that has previously been set to full width, the slider will be fixed width by default.
  • For a full width slider display, click on the row the widget is placed in, and select “edit design”. Then enable “Full Bleed Row”.

Widget Options (Content)

  • Open the widget option panel by clicking on the widget.
  • Unique ID: As with many widgets, a unique ID is necessary when using multiple widgets on the same page.
  • Carousel Slides / List Items: The “List Items” represent individual slides in your slider.
  • Clicking on a List item will open a new box to the righthand side. In this new box, you may:
    • Select or upload a new image
    • Set a title per slide
    • Set a link per slide.
  • Carousel Height: Sets the height of the slider.
  • Slides Per View: This setting determines the number of slides seen. The allowed range is 1-10.
  • Transition Direction: Our carousel slider allows for horizontal or vertical transition direction.
  • Transition Style: This setting allows standard transitions (Slide setting) or a 3D style cover flow transition.
  • Reverse Transition Direction: Toggle the direction of the slideshow transitions.
  • Transition Time: This sets the time is takes for the transition between slides.
  • Space Between Slides: This sets the padding (in pixels) between slide images.
  • Enable Full Height Mode: This toggle allows the slider to automatically fit the height of the viewport. This will allow the slider to load full screen on any display. This is similar to our SuperHero Slider widget. Enabling this mode will reveal another field:
  • Header Height: This field will only be seen when Enable Full Height Mode is enabled. The value entered here deducts the height of the header from the slider. The reason this is important is because the slider begins at the bottom of the header. This means that the slider will extend beyond the bottom of the page, at a length equal to the header height. For more details, see the “Managing Headers” section below.
  • Enable Centered Slide: This setting is useful is you have an even number of slides, yet would like to have a slide centered. Sliders with an odd number of slides visible will always have a centered slide. Even number of slides without Enable Centered Slide enabled:

    Even number of slides with Enable Centered Slide enabled:
  • Hide Captions on Inactive Slides: This setting is only visible when the Enable Centered Slide setting is turned on. This turns off captions for the slides to the right and left of the center slide. When this setting is not enabled, captions will appear on slides that are only partially visible, causing captions to be cut off and potentially distracting.
  • Enable Autoplay: This setting allows the slideshow to play, without clicking on the previous/next arrows.
  • Autoplay Delay: Sets a delay before the first slideshow transition.
  • Enable Loop Mode: Allows slideshow to loop at the end.
  • Enable Grab Cursor: This enables the cursor to advance slides by clicking and dragging, similar to touch UI seen on a mobile or tablet device.
  • Hide Arrows: This hides the previous/next arrows.
  • Enable Pagination: This setting enables pagination dots visibility.
  • Enable Pagination Navigation: This allows users to navigate the slideshow by clicking on pagination dots.

Managing Image Aspect Ratio / Dimensions

The shape of the images within your slider are impacted by a number of factors: slider width, slider height, viewing browser (viewport) width, and number of images. Follow this process in order to have the most control over image aspect ratio / shape:

  1. Determine the shape you would like your images to display as: square, landscape, portrait, etc.
  2. Determine the number of visible images in your slider. While you can have as many total images as you like, the number of images visible at one time is important. This is controlled with the Slides Per View parameter in the widget option panel. Less slides per view makes wider images, while more slides per view makes taller images.
  3. Set the slider width. Adjustments can be made using the blue grab handle in the lower right corner of the widget container, if needed. Keep in mind that full width sliders require the row they’re placed in to be set to “Full bleed row”.
  4. Set the slider height. The Slider Height setting can be found in the widget option panel (this is not done using the widget container grab handle). Once steps 1-3 above are complete, adjusting the slider height will give you full control of the shape / aspect ratio of the images. You will see the image shape change as this is adjusted.
  5. The final thing to consider is the viewer’s browser (viewport) size. Very wide viewport widths may cause images to stretch horizontally, but only if the slider is set to full width. Fixed width sliders will remain fixed at extreme widths. Very narrow viewport widths will cause images to become narrow and tall at extreme widths. Since you have no control over the viewport size of your site visitors, set the slider up to look best at the most common sizes. We like to preview our widgets on a width and height approximate to a typical laptop screen.

Widget Options (Design)

In the Design section, you will find sections that control the styling for the Title Text, Spacing, Pagination Color and Arrow Color. The spacing settings are standard spacing settings you find in all widgets. The Title Text styling section parameters will not be explained in detail here, as the labels are self explanatory.

Managing Headers (Full Height Mode)

When the Enable Full Height Mode setting is toggled, the slider will take up the space of the entire screen. However, the slider will automatically align below the header. This causes the slider to be pushed below the screen at a height equal to the height of the header. This is because the top of the slider begins at the bottom of the header (relative to page height). This section describes how to deduct the height of the header from the slider height, so that it is perfectly full screen.

  • First off, you will need to know the height of your header. You may estimate the height, and then fine tune, or you may use a simple tool to learn the height of the header.
  • If you have a screenshot tool that allows you to select a portion of the screen, you may use this to identify the height of your header, if your screenshot tool shows the pixel dimensions of the selected area. On a Mac, select Cmd + Shift + 4 to enable the screenshot tool. Align the area over the header vertically, and note the height pixels before taking the screenshot.
  • Enter this value in the Header Height field. This parameter will deduct the entered value from the overall height of the slider. This deduction will align the bottom of the slider with the bottom of the page.
  • You may also estimate the height, without the use of a screenshot tool. Simply start with a value, and then fine tune after viewing the published page.
  • Some fine tuning will be needed in most cases.

Related Articles

Join Now