Sliders

A slider scrolls the content of a block right on the page: covers, reviews, product cards, or team photos. The visitor switches slides with arrows, pagination, or a swipe, while the block takes up a single screen.

The scenario suits blocks with many elements and limited space. If the images have to be opened at full size, use Galleries.

The behavior is enabled by the landing_carousel extension, which is connected in the block manifest.

How to Configure the SliderHow to Configure the Slider

The minimal configuration is as follows:

'assets' => [
            'ext' => ['landing_carousel'],
        ],
        

<div class="js-carousel">
            <div class="js-slide">Slide 1</div>
            <div class="js-slide">Slide 2</div>
        </div>
        

What the Extension DoesWhat the landing_carousel Extension Does

The extension finds containers with the js-carousel class, assembles a slider from their direct children, and reads the settings from the data-* attributes of the container. The extension defines no separate slide selector: every direct child of the container becomes a slide.

The extension adds the arrows and the pagination itself: they are not present in the block markup. They appear only if the design classes are set — data-arrows-classes for the arrows and data-pagi-classes for the pagination. Without these attributes, the controls are not created: setting only data-arrow-left-classes and data-arrow-right-classes is not enough.

The slider is built on the Slick library, so data-responsive uses the names of its parameters rather than the names of the data-* attributes.

MarkupMarkup

The markup uses two utility classes:

• js-carousel — the root container of the slider
• js-slide — an individual slide. This class is needed for design: the styles of the standard blocks are connected through it. It does not affect how slides are found

By default, the slider displays one slide, without arrows, pagination, or autoplay. The behavior can be configured through data-* attributes on the js-carousel element.

Key AttributesKey Attributes

Boolean attributes accept the values true and false.

Responsive Rules in Responsive Rules in data-responsive

A valid JSON array is passed in data-responsive. Each rule has two keys:

• breakpoint — the screen width in pixels
• settings — the settings for that breakpoint

Inside settings, the Slick parameter names are used:

ExampleExample

<div class="js-carousel"
            data-arrows-classes="u-arrow-v1 g-absolute-centered--y g-width-45 g-height-45 g-color-white g-bg-primary"
            data-arrow-left-classes="fa fa-chevron-left g-left-0"
            data-arrow-right-classes="fa fa-chevron-right g-right-0"
            data-pagi-classes="u-carousel-indicators-v1 g-absolute-centered--x g-bottom-60 text-center"
            data-slides-show="3"
            data-slides-scroll="2"
            data-autoplay="true"
            data-speed="1000"
            data-pause-hover="true"
            data-center-mode="true"
            data-center-padding="40px"
            data-initial-slide="1"
            data-adaptive-height="true"
            data-lazy-load="ondemand"
            data-responsive='[
                {
                    "breakpoint": 768,
                    "settings": {
                        "slidesToShow": 2
                    }
                },
                {
                    "breakpoint": 576,
                    "settings": {
                        "slidesToShow": 1
                    }
                }
            ]'>
        
            <div class="js-slide g-height-50vh g-brd-gray-light-v3 g-brd-around g-bg-primary-opacity-0_1">
                <div class="g-flex-centered w-100 h-100">
                    <h3>Slide 1</h3>
                </div>
            </div>
        
            <div class="js-slide g-height-50vh g-brd-gray-light-v3 g-brd-around g-bg-primary-opacity-0_1">
                <div class="g-flex-centered w-100 h-100">
                    <h3>Slide 2</h3>
                </div>
            </div>
        </div>
        

Combining with a GalleryCombining with a Gallery

A slider works together with a gallery: the images are scrolled inside the block and opened in the viewer. The order in which the extensions are connected matters, and it is described in the Galleries article.

Examples of Standard BlocksExamples of Standard Blocks

Codes for some standard blocks:

• 01.big_with_text
• 01.big_with_text_blocks
• 28.5.team_4_cols_slider
• 39.1.five_blocks_carousel
• 45.2.gallery_app_with_slider — with a gallery

How to Change the Slider Settings via RESTHow to Change the Slider Settings via REST

The behavior of a slider is defined by the data-* attributes of the container, so their values are modified by the landing.block.updateattrs method. Only the attributes described in the attrs key of the block manifest are available.

The slides are the cards of the block, so their composition is changed by the landing.block.addcard, landing.block.clonecard, landing.block.removecard, and landing.block.updateCards methods, while the content of a slide is changed by landing.block.updatenodes.

Permissions and LimitationsPermissions and Limitations

Scope: landing

Who can execute the method: depending on the method

Limitations:

• a custom container class cannot be set: the extension looks for js-carousel
• in the editor, looping is forcibly disabled, so data-infinite is checked in the preview or on the published page
• when data-vertical is enabled, vertical swiping works at the same time, so for mobile devices vertical mode is usually disabled with a rule in data-responsive

Continue LearningContinue Learning

• Interactive Blocks: Scenario Overview
• Galleries
• Countdown Timers
• Manifest File
• Node Types