Carousel / Slider Blocks
- Tom Knuth
- Jeremy Simpson
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 |
|
|---|---|
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 |
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.