Carousel / Slider Blocks
Last updated
Last updated
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.
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.
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.
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.
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.
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.
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
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.
