# Carousel / Slider Blocks

* [Carousel Elements](#carousel-sliderblocks-carouselelements)
* [Additional Slides](#carousel-sliderblocks-additionalslides)
* [Carousel Style](#carousel-sliderblocks-carouselstyle)
* [Carousel Images](#carousel-sliderblocks-carouselimages)
* [Thumbnail Nav Images](#carousel-sliderblocks-thumbnailnavimages)
* [Carousel Settings](#carousel-sliderblocks-carouselsettings)
* [Custom Slick Slider Settings](#carousel-sliderblocks-customslickslidersettings)

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.

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FGCAB57MeSl7fTBtyWWQz%2Fimage.png?alt=media&#x26;token=8fbe2256-a848-45e4-9978-0b0962cc0540" alt=""><figcaption></figcaption></figure>

### Carousel Elements <a href="#carousel-sliderblocks-carouselelements" id="carousel-sliderblocks-carouselelements"></a>

Each Carousel is made up of individual elements:

* The Carousel container
* The Carousel Slide container
* The image and/or text of each slide

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2Fvf51nwTtkTfWhQPQ99Vm%2Fimage.png?alt=media&#x26;token=dbf31e95-fdff-4c41-8edd-95b596ba11a0" alt=""><figcaption></figcaption></figure>

The image above shows each Carousel element highlighted by layer.

{% hint style="info" %}
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.
{% endhint %}

### Additional Slides <a href="#carousel-sliderblocks-additionalslides" id="carousel-sliderblocks-additionalslides"></a>

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.

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FBvNE45yRzv7QvwBCdQ3r%2Fimage.png?alt=media&#x26;token=2561c010-d58d-4f29-8509-a665f2f16aa8" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
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.
{% endhint %}

### Carousel Style <a href="#carousel-sliderblocks-carouselstyle" id="carousel-sliderblocks-carouselstyle"></a>

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.

{% hint style="info" %}
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.
{% endhint %}

### Carousel Images <a href="#carousel-sliderblocks-carouselimages" id="carousel-sliderblocks-carouselimages"></a>

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 <a href="#carousel-sliderblocks-thumbnailnavimages" id="carousel-sliderblocks-thumbnailnavimages"></a>

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 <a href="#carousel-sliderblocks-carouselsettings" id="carousel-sliderblocks-carouselsettings"></a>

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:

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FCgAEyVOK65hm8MOuRcnv%2Fimage.png?alt=media&#x26;token=d98a52b0-40ad-4c3e-8f0e-f4dd8928aaa6" alt=""><figcaption></figcaption></figure>

| **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  | <p>Outside Carousel<br>Inside Carousel</p>                                  |
| 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 <a href="#carousel-sliderblocks-customslickslidersettings" id="carousel-sliderblocks-customslickslidersettings"></a>

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](https://kenwheeler.github.io/slick/) options.

<figure><img src="https://3790748257-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FT43PzcNjyZtWby9yrGd3%2Fuploads%2FiHM8Nazvfu91MpJOfg5D%2Fimage.png?alt=media&#x26;token=ae9a4e01-c0cd-48ce-92e5-fef5281c51b5" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
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.
{% endhint %}