Carousel / Slider Blocks

Carousel Blocks offer 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 (box)

• 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
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.

If not done correctly, directly editing the HTML and JavaScript code of your page could negatively impact the performance of your carousel and/or your page.

To try different versions, go to the settings and change the type.