Skip to content

Splide Carousel

Styles for a splide carousel used in product_gallery module as well as slider, slider_arrow_up, slider_arrow_right, slider_arrow_down and slider_arrow_left macros.

Structurally .splide contains following elements:

  • .splide__arrow
  • .splide__arrows
  • .splide__container
  • .splide__list
  • .splide-loading
  • .splide__pagination
  • .splide__pagination__page
  • .splide__progress__bar
  • .splide__slide
  • .splide__slide-number
  • .splide__spinner
  • .splide__sr
  • .splide__toggle
  • .splide__toggle__pause
  • .splide__toggle__play
  • .splide__track

And following class modifiers:

  • .splide---rtl
  • .splide__track--draggable
  • .splide__track--fade
  • .splide__track--ttb

It also uses four classes that are separate from .splide:

  • is-initialized
  • is-rendered
  • is-active
  • is-overflow

You can read more about splide.js here.

Example

Here is an example of a splide carousel element usage which is a fragment from the product_gallery. We use h-slider webcomponent along with it's styles here for presentation purposes.

HTML
<h-slider
    id="products-slider-id"
    class="splide slider__content_with-arrows-desktop"
    settings='
        {
            "mountOnConnectedCallback": true,
            "perPage": 4,
            "perMove": 1,
            "arrows": true,
            "gap": "1.25rem",
            "omitEnd": true,
            "hasArrowsOnMobile": false,
            "breakpoints": {
                "1440": {
                    "perPage": 3,
                    "arrows": true
                },
                "768": {
                    "perPage": 2,
                    "gap": "0.5rem",
                    "padding": "1rem"
                }
            }
        }'
>
    <div class="splide__arrows">
        <div class="slider__arrow slider__arrow_left">
            <button class="splide__arrow splide__arrow--prev slider__arrow_centered-with-pagination slider__arrow_centered-with-pagination-left">
                <svg class="icon">
                    <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-left"></use>
                </svg>
            </button>
        </div>
        <div class="slider__arrow slider__arrow_right">
            <button class="splide__arrow splide__arrow--next slider__arrow_centered-with-pagination slider__arrow_centered-with-pagination-right">
                <svg class="icon">
                    <use xlink:href="/assets/img/icons/symbol-defs.svg#icon-chevron-right"></use>
                </svg>
            </button>
        </div>
    </div>

    <div class="splide__track">
        <ul class="splide__list">
            <li class="splide__slide">
                <div class="product-tile">
                    <div class="product-tile__row product-tile__header">
                        <div class="product-tile__row product-tile_row_image">
                            <div class="product-tile__image">
                                <a href="/url-to-example-product" title="Example product">
                                    <picture>
                                        <source srcset="/path-to-image" type="image/webp">
                                        <img src="/path-to-image" title="example-image.jpg" width="300" height="300" decoding="async" lazy="1">
                                    </picture>
                                </a>
                            </div>
                        </div>

                        <a href="/link-to-example-product" title="Example product" class="link_no-underline">
                            <h4 class="product-tile__name">
                                Example product
                            </h4>
                        </a>
                    </div>

                    <div class="product-tile__row product-tile__content">
                        <div class="product-tile__row product-tile_row_prices-gross">
                            <div class="product-tile__price">
                                9,99 zł
                            </div>
                        </div>
                    </div>
                </div>
            </li>
            <li class="splide__slide">
                <div class="product-tile">
                    <div class="product-tile__row product-tile__header">
                        <div class="product-tile__row product-tile_row_image">
                            <div class="product-tile__image">
                                <a href="/url-to-example-product" title="Example product">
                                    <picture>
                                        <source srcset="/path-to-image" media="" type="image/webp">
                                        <img src="/path-to-image" title="example-image.jpg" width="300" height="300" decoding="async" lazy="1">
                                    </picture>
                                </a>
                            </div>
                        </div>

                        <a href="/link-to-example-product" title="Example product" class="link_no-underline">
                            <h4 class="product-tile__name">
                                Example product
                            </h4>
                        </a>
                    </div>

                    <div class="product-tile__row product-tile__content">
                        <div class="product-tile__row product-tile_row_prices-gross">
                            <div class="product-tile__price">
                                9,99 zł
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </div>
</h-slider>

The .splide 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 splide carousel less variable in your User Less section to change splide carousel styles.

Variables used to style a splide carousel.

@splidePaginationDotBgColor: @neutralColors200;
@splidePaginationDotActiveBgColor: @neutralColors800;
@splidePaginationDotSize: 12px;
@splidePaginationDotBorderRadius: 50%;
@splidePaginationGap: 12;
@splidePaginationMarginTop: 30;
@splidePaginationMarginTopSmall: 10;

@splideArrowBackgroundColor: @neutralColors100;
@splideArrowBgColor: @neutralColors0;
@splideArrowSize: 40;
@splideArrowSizeSmall: 32;
@splideArrowsContainerWidthMobile: 90;

@splideArrowHoverBoxShadow: 0 1px 3px rgba(17, 19, 22, 0.08), 0 1px 2px -1px rgba(17, 19, 22, 0.08), 0 0 0px 6px rgba(0, 0, 0, 0.1);

@splideSliderNumberBgColor: @neutralColors100;
@splideSliderNumberPadding: 0.2rem;
@splideSliderBorderRadius: 4px;
@splideSliderColor: @globalFontColorSecondary;
@splideSliderFontSize: @fontSizeInPxXS;
@splideSliderFontWeight: @fontWeightSemibold;

If you want to change splide carousel styles, you can just change the variables. To change default slider color just modify @splideSliderColor variable.

@splideSliderColor: red;

Here are standard splide carousel styles.

@keyframes splide-loading {
    0% {
        transform: rotate(0);
    }
    to {
        transform: rotate(1turn);
    }
}
.splide__track--draggable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.splide__track--fade > .splide__list > .splide__slide {
    margin: 0 !important;
    opacity: 0;
    z-index: 0;
}
.splide__track--fade > .splide__list > .splide__slide.is-active {
    opacity: 1;
    z-index: 1;
}
.splide--rtl {
    direction: rtl;
}
.splide__track--ttb > .splide__list {
    display: block;
}
.splide__container {
    box-sizing: border-box;
    position: relative;
}
.splide__list {
    backface-visibility: hidden;
    display: -ms-flexbox;
    display: flex;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
}
.splide__arrow[disabled] {
    display: none;
}
.splide.is-initialized:not(.is-active) .splide__list {
    display: block;
}
.splide__pagination {
    -ms-flex-align: center;
    align-items: center;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    pointer-events: none;
    .pixel-to-rem(gap, @splidePaginationGap);
    .pixel-to-rem(margin-top, @splidePaginationMarginTopSmall);

    @media (min-width: @breakPointSm) {
        .pixel-to-rem(margin-top, @splidePaginationMarginTop);
    }
}
.splide__pagination li {
    display: inline-block;
    line-height: 1;
    list-style-type: none;
    margin: 0;
    pointer-events: auto;
}
.splide__progress__bar {
    width: 0;
}
.splide {
    position: relative;
    // visibility: hidden;
}
.splide.is-initialized,
.splide.is-rendered {
    visibility: visible;
}
.splide__slide {
    backface-visibility: hidden;
    box-sizing: border-box;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    list-style-type: none !important;
    margin: 0;
    position: relative;
}
.splide__slide img {
    vertical-align: bottom;
}
.splide__spinner {
    animation: splide-loading 1s linear infinite;
    border: 2px solid #999;
    border-left-color: transparent;
    border-radius: 50%;
    bottom: 0;
    contain: strict;
    display: inline-block;
    height: 20px;
    left: 0;
    margin: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 20px;
}
.splide__sr {
    clip: rect(0 0 0 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}
.splide__toggle.is-active .splide__toggle__play,
.splide__toggle__pause {
    display: none;
}
.splide__toggle.is-active .splide__toggle__pause {
    display: inline;
}
.splide__track {
    overflow: hidden;
    position: relative;
    z-index: 0;
    width: 100%;
}
.splide__pagination__page {
    background: @splidePaginationDotBgColor;
    border: 0;
    border-radius: @splidePaginationDotBorderRadius;
    display: inline-block;
    padding: 0;
    position: relative;
    transition: background-color 0.2s ease, color 0.2s ease;
    width: @splidePaginationDotSize;
    height: @splidePaginationDotSize;
}

.splide__pagination__page.is-active {
    background: @splidePaginationDotActiveBgColor;
}

.splide {
    &__arrow {
        transition: box-shadow 0.2s ease-in;
        display: flex;
        align-items: center;
        justify-content: center;
        .pixel-to-rem(width, @splideArrowSizeSmall);
        .pixel-to-rem(height, @splideArrowSizeSmall);
        background: @splideArrowBackgroundColor;
        border-radius: 50%;
        cursor: pointer;

        &:hover {
            box-shadow: @splideArrowHoverBoxShadow;
        }

        @media (min-width: @breakPointSm) {
            .pixel-to-rem(width, @splideArrowSize);
            .pixel-to-rem(height, @splideArrowSize);
        }
    }

    &__slide-number {
        position: absolute;
        right: 1rem;
        top: 1rem;
        background-color: @splideSliderNumberBgColor;
        padding: @splideSliderNumberPadding;
        border-radius: @splideSliderBorderRadius;
        color: @splideSliderColor;
        font-weight: @splideSliderFontWeight;
        .font-size(@fontSizeInPxS);
        display: none;
    }
}

.slider {
    @media (min-width: @breakPointSm) {
        width: 100%;
        display: flex;
        align-items: center;
    }

    &__content {
        width: 100%;
        position: relative;

        &_with-arrows {
            &-desktop {
                @media screen and (min-width: (@breakPointXl - 1)) {
                    padding: 0 3.5rem;
                }
            }

            &-laptop {
                @media screen and (min-width: (@breakPointMd - 1)) and (max-width: @breakPointXl) {
                    padding: 0 3.5rem;
                }
            }

            &-tablet {
                @media screen and (min-width: (@breakPointSm - 1)) and (max-width: @breakPointMd) {
                    padding: 0 3.5rem;
                }
            }
        }
    }

    .splide__arrows {
        @media (max-width: (@breakPointSm - 1)) {
            position: relative;
            .pixel-to-rem(width, @splideArrowsContainerWidthMobile);
            .pixel-to-rem(height, @splideArrowSizeSmall);
            margin-bottom: @globalSpacing;
            margin-left: auto;
        }
    }

    &_has-pagination {
        @media (min-width: @breakPointSm) {
            flex-direction: column;
            justify-content: center;
        }
    }
}

@media (max-width: (@breakPointXs - 1)) {
    .splide {
        &__slide-number {
            display: block;
        }
    }
}

@media (max-width: (@breakPointMd)) {
    .splide:not(.is-active) {
        .splide__track {
            padding-left: 1rem;
            padding-right: 1rem;
        }
    }
}

.splide:not(.is-active):not(.product-gallery__slider) {
    .loader-mask();

    .splide__slide {
        flex-shrink: 1;

        &:not(:first-child) {
            display: none;
        }
    }
}

h-slider {
    display: block;
}

External reference

Webcomponents reference

Styles reference

Modules reference

Macros Reference