Carousel / Slider Blocks

Carousel Blocks offer several drag-on options for adding Image Carousels/Sliders to your pages. Built using the robust Slick Slider framework, each Carousel has a different layout but they come with the same available settings. To get started, navigate to the Carousel section of the Building Blocks menu and drag one of the Carousels onto your page. Please note, Carousels will need to be placed inside a column element to function correctly.

Carousel Elements

Each Carousel is made up of individual elements:

  • The Carousel container

  • The Carousel Slide container

  • The image and/or text of each slide

The image above shows each Carousel element highlighted by layer.

Please note: You cannot select every layer simultaneously as depicted in this image. However, selecting the layer above will also select the elements contained in that layer. For example, selecting and duplicating a Carousel Slide element will also duplicate the image and text contained within that slide.

Additional Slides

Each Carousel element begins as a main slide. You can add as many slides needed by clicking the duplicate button on any existing Carousel Slide element. Each duplicate slide will appear in sequential order after the copied slide. Once duplicated, you may edit each of the slide elements individually.

Take care to duplicate only the “Carousel Slide” element (the box surrounding the slide image and/or text). You do not want to duplicate the entire “Carousel” element. You also do not create additional slides by duplicating only the image. You must duplicate the “Carousel Slide” element.

Carousel Style

After you drag a Carousel element onto the page, you can edit the slide elements (images and text) using standard styling (font settings, dimensions, etc.). Making these styling choices on the first slide will make it easier to replicate styles on subsequent slides as you would typically duplicate the first slide to make additional slides.

It should be noted that carousel styling is best done by adding classes to the style elements rather than styling every component individually. For image dimensions, it is best to leave the image dimensions on “auto”. Then, allow the carousel dimensions to be dictated by its surrounding column.

Carousel Images

Once you have duplicated the initial slide to create new slides, you will need to add your own slide images. To change the images in your slides, navigate to each individual slide by clicking on the arrows, dots, or dragging the image left-to-right. Once on the correct slide, double-click each image and select or upload your new image.

Thumbnail Nav Images

While the thumbnail slides and the main carousel slides are linked for navigation, in reality they are two distinct carousels. You need to select individual images for each carousel. However, the thumbnail slides will drive the navigation for the main carousel. For example, the first thumbnail slide will navigate to the first main slide. The second thumbnail slide will navigate to the second main slide, etc. You need only select images for each of the carousel slides in both the main carousel and the thumbnail carousel.

Carousel Settings

Each carousel includes a variety of settings to control how the slides function. Open the Settings tab to style Carousel operation. The function of each setting is described below:

 

Setting

 

Setting

 

Touch Swipe

Allow navigating by swiping the slide, in addition to an arrows and/or dots

Show Arrows

Show the navigation arrows

Arrow Position

Outside Carousel
Inside Carousel

Infinite

Continues back to the first slide when the last slide is reached

Dots

Show navigation dots under the slides

Vertical Slide

Slide the carousel up and down

Vertical Swipe

Swipe up and down to move to the next slide

Autoplay

Carousel slides automatically slide on page load

Pause On Select

Stops autoplay when slide is clicked

Pause On Hover

Pauses autoplay on mouse hover

Fade

Adds a “fade” transition so one slide “fades” into the next

Show Slides

Enter how many slides will show at once

Scroll Slides

Enter how many slides will scroll at once

Autoplay Speed

Number of seconds to wait between swipes

Navigation For

Sets this carousel as thumbnail navigation for the specified carousel

Custom Slick Slider Settings

For those familiar with manually installing Slick Slider carousel code, you do have the option to add custom Slick Slider settings directly in the carousel javascript. The main carousel script should NOT be edited. However, there is a “-var” script included with each carousel. The “-var” script is used to add custom javascript settings available from the Slick Slider settings options.