Sliders

Connect the extension landing_carouselin the block manifest.

'assets' => array(
   'ext' => array('landing_carousel'),
)

Set classes for nodes in the block layout:

• .js-carousel - slide root container
• .js-slide - each slide separately

By default, 1 slide view is shown, each slide occupies the complete width of container. Switch buttons and indicators are not available. Auto scrolling is disabled. All these features can be configured in the settings, which are set by data attributes. Attributes can be added to the element .js-carousel.

Attributes

Paging buttons.

This attribute adds paging buttons. Styles are set as general for both buttons, as well as separately for left and right button.

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"

Page indicators (pagination)

Attribute adds a pagination element and sets its classes.

data-pagi-classes="u-carousel-indicators-v1 g-absolute-centered--x g-bottom-60 text-center"

Numer of slides onscreen

data-slides-show="3"

Number of slides, switched per single paging

data-slides-scroll="2"

Enable/disable auto scrolling

data-autoplay="true"

Auto scrolling speed in milliseconds

data-speed="1000"

Stop auto scrolling on mouse hovering

data-pause-hover="true"

The slides "emerging" effect

Attribute allows not to switch slides, but to swap them with altered translucence.

data-fade="true"

Attention! Works correctly only with data-slides-show="1"

Vertical slider

data-vertical="true"

Please be advised that buttons and pagination for vertical sliders must be different from horizontal sliders (positioned differently). Examples can be seen in standard blocks. Its recommended to disable verticality on mobile devices via the Adaptability setting. Otherwise, finger scrolling the screen will not move a page, but will switch slides.

Number of strings

data-rows="2"

The parameters data-slides-show and data-slides-scroll in the multi string slider does not affect the number of slides, but affects the number of columns.

Slideshow loop

When enabled, first slide is shown again after the last slide is reached. When disabled, slideshow will stop. For editor compatibility, this setting works only in Preview and Publish mode. Looped slideshow is always disabled in the editor.

data-infinite="true"

Adaptability

Sliders can either flexibly change their settings depending on the screen size Adaptability can be applied to any of the above mentioned settings, but the Number of slides onscreen are changed most often.

Array of objects must be passed in the attribute. Each object must contain:

• breakpoint - screen size in pixels. The rule is applied for screens of specified size and less.
• settings - array of settings, used for this rule. Setting names are different from data attribute names. List of names for previously referenced attributes:
  • arrowsClasses
  • prevArrow
  • nextArrow
  • dotsClass
  • slidesToShow
  • slidesToScroll
  • autoplay
  • autoplaySpeed
  • pauseOnHover
  • fade
  • vertical

data-responsive='[{
   "breakpoint": 1200,
   "settings": {
      "slidesToShow": 5
   }
}, {
   "breakpoint": 992,
   "settings": {
      "slidesToShow": 3
   }
}, {
   "breakpoint": 768,
   "settings": {
      "slidesToShow": 2
   }
}, {
   "breakpoint": 576,
   "settings": {
      "slidesToShow": 1
   }
}]'

Example

See examples of this type of blocks in our repository, by using the methods landing.block.getmanifestfile and landing.block.getrepository. Their codes:

• 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 gallery
• and many more

Common example:

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

   <!-- ... and other slides ... -->

</div>