Skip to content

Slider

Styles for a slider used in slider arrow macros which are slider_arrow_up, slider_arrow_right, slider_arrow_down and slider_arrow_left.

Structurally .slider contains one element:

  • .slider__arrow

And eight class modifiers:

  • .slider__arrow_centered-with-content-left
  • .slider__arrow_centered-with-content-right
  • .slider__arrow_centered-with-pagination-left
  • .slider__arrow_centered-with-pagination-right
  • .slider__arrow_centered-with-pagination-up
  • .slider__arrow_centered-with-pagination-down
  • .slider__arrow_secondary
  • .slider__arrow_inactive

Example

Here is an example of a slider element usage. We also use splide carousel styles here for presentation purposes.

HTML
<div class="slider__arrow slider__arrow_down">
    <button class="splide__arrow splide__arrow--next slider__arrow_centered-with-pagination slider__arrow_centered-with-pagination-down">      
        <svg class="icon">
            <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-down"></use>
        </svg>
    </button>
</div>

Slider tags

The .slider classes were designed to be used with block elements like <div>. However, you can use them with any other element and customize it to your own needs.

LESS

You can modify any slider less variable in your User Less section to change slider styles.

Slider styles

Here are standard slider styles.

@sliderSize: 24px;

.slider {
    &__arrow {
        &_centered-with-content {
            position: absolute;
            z-index: 1;

            &-left{
                top: 50%;
                left: 0;
                transform: translate3d(0, -50%, 0);

                @media screen and (max-width: (@breakPointSm - 1)) {
                    top: 50%;
                    left: 0.5rem;
                    transform: translate3d(0px, -50%, 0);
                }
            }

            &-right{
                top: 50%;
                right: 0;
                transform: translate3d(0, -50%, 0);

                @media screen and (max-width: (@breakPointSm - 1)) {
                    top: 50%;
                    right: 0.5rem;
                    transform: translate3d(0px, -50%, 0);
                }
            }
        }

        &_centered-with-pagination{
            position: absolute;
            z-index: 1;

            &-left {
                top: 50%;
                left: 0.5rem;
                transform: translate3d(0px, -50%, 0);
            }

            &-right {
                top: 50%;
                right: 0.5rem;
                transform: translate3d(0px, -50%, 0);
            }

            &-up {
                top: 0;
                transform: translate3d(-50%, 0, 0);
                left: 50%;
            }

            &-down {
                bottom: 0;
                transform: translate3d(-50%, 0, 0);
                left: 50%;
            }
        }

        &_secondary {
            background-color: @neutralColors50;
            width: @sliderSize;
            height: @sliderSize;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            cursor: pointer;
            flex: 0 0 @sliderSize;

            &:hover {
                background-color: @neutralColors100;
            }
        }

        &_inactive {
            opacity: 0.2;
            cursor: default;
        }
    }
}

Styles reference

Macros Reference