Slider: Loader Visible

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="slider slider--loader-visible" data-slider="default" data-mobile-first="true" data-infinite="true" data-center-mode="false" data-dots="false" data-autoplay="false" data-autoplay-speed="3000" data-pause-on-focus="true" data-pause-on-hover="true"
    data-slides-to-show="1" data-slides-to-scroll="1" data-swipe-to-slide="true" data-element-slides=".slider__slides" data-dots-class="slider__dots" data-loading-class="slider--loading" data-loader-visible-class="loader--visible" data-element-slide=".slider__item"
    data-element-loader=".loader" data-element-nav-prev=".slider__prev" data-element-nav-next=".slider__next" data-responsive-config="[]">
    <div class="loader loader--visible" aria-live="polite" aria-label="Do not refresh the page">
        <div class="loader__icon"></div>
    </div>

    <div class="slider__heading ">
        <h2 class="heading--first-level margin-0">
            Slider heading
        </h2>

    </div>

    <div class="slider__handler">
        <div class="slider__navigation ">
            <div class="slider__arrows">
                <button class="button button--icon button--icon-border slider__nav-button slider__prev" type="button" aria-label="Previous slide">
        <svg
    class="icon button__icon slider__nav-icon"
    
        role="img"
>
    <use xlink:href="/images/icons-sprite.svg#arrow-left"></use>
</svg>

</button>

                <button class="button button--icon button--icon-border slider__nav-button slider__next" type="button" aria-label="Next slide">
        <svg
    class="icon button__icon slider__nav-icon"
    
        role="img"
>
    <use xlink:href="/images/icons-sprite.svg#arrow-right"></use>
</svg>

</button>

            </div>
        </div>
        <div class="slider__container">
            <div class="slider__slides">
                <div class=" slider__item ">
                    <picture class="image ">
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-304_392.jpg" media="(max-width: 480px)" />
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-752_536.jpg" media="(max-width: 768px)" />
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-944_536.jpg" media="(max-width: 1024px)" />
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-1328_536.jpg" media="" />

                        <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/slider/slider-304_392.jpg" alt="slider1" />
                    </picture>

                </div>
                <div class=" slider__item ">
                    <picture class="image ">
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-304_392.jpg" media="(max-width: 480px)" />
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-752_536.jpg" media="(max-width: 768px)" />
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-944_536.jpg" media="(max-width: 1024px)" />
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-1328_536.jpg" media="" />

                        <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/slider/slider-304_392.jpg" alt="slider1" />
                    </picture>

                </div>
                <div class=" slider__item ">
                    <picture class="image ">
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-304_392.jpg" media="(max-width: 480px)" />
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-752_536.jpg" media="(max-width: 768px)" />
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-944_536.jpg" media="(max-width: 1024px)" />
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-1328_536.jpg" media="" />

                        <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/slider/slider-304_392.jpg" alt="slider1" />
                    </picture>

                </div>
                <div class=" slider__item ">
                    <picture class="image ">
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-304_392.jpg" media="(max-width: 480px)" />
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-752_536.jpg" media="(max-width: 768px)" />
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-944_536.jpg" media="(max-width: 1024px)" />
                        <source srcset="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-srcset="/images/slider/slider-1328_536.jpg" media="" />

                        <img class="lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII=" data-src="/images/slider/slider-304_392.jpg" alt="slider1" />
                    </picture>

                </div>
            </div>
        </div>
    </div>

</div>

<script src="/components/raw/slider/slider.js"></script>


        <div
    class="slider {{ class }}"
    {{#each attributes }}
        {{{ attr }}}
    {{/each }}
>
    {{render '@loader' }}

    {{#if heading }}
        <div class="slider__heading {{ heading.class }}">
            {{ render (component heading.content) heading.contentContext merge=true }}
        </div>
    {{/if }}

    {{#if contentBefore }}
        <div class="slider__before {{ contentBefore.class }}">
            {{ render (component contentBefore.content) contentBefore.contentContext merge=true }}
        </div>
    {{/if }}

    <div class="slider__handler">
        <div class="slider__navigation {{ navigationClass }}">
            <div class="slider__arrows">
                {{render '@button--icon' iconPrev }}

                {{render '@button--icon' iconNext }}
            </div>
        </div>
        <div class="slider__container">
            <div class="slider__slides">
                {{#each slides }}
                    <div class=" slider__item {{ this.itemClass }}"
                        {{{ this.itemAttributes }}}
                    >
                        {{ render (component content) contentContext merge=true}}
                    </div>
                {{/each}}
            </div>
        </div>
    </div>

    {{#if contentAfter }}
        <div
            class="
                slider__after
                {{ contentAfter.class }}
            "
        >
            {{ render (component contentAfter.content) contentAfter.contentContext merge=true }}
        </div>
    {{/if }}
</div>

{{#if script }}
    <script src="{{ static 'slider.js' }}"></script>
{{/if}}


        
            
            {
  "script": true,
  "class": "slider--loader-visible",
  "attributes": [
    {
      "attr": "data-slider=\"default\""
    },
    {
      "attr": "data-mobile-first=\"true\""
    },
    {
      "attr": "data-infinite=\"true\""
    },
    {
      "attr": "data-center-mode=\"false\""
    },
    {
      "attr": "data-dots=\"false\""
    },
    {
      "attr": "data-autoplay=\"false\""
    },
    {
      "attr": "data-autoplay-speed=\"3000\""
    },
    {
      "attr": "data-pause-on-focus=\"true\""
    },
    {
      "attr": "data-pause-on-hover=\"true\""
    },
    {
      "attr": "data-slides-to-show=\"1\""
    },
    {
      "attr": "data-slides-to-scroll=\"1\""
    },
    {
      "attr": "data-swipe-to-slide=\"true\""
    },
    {
      "attr": "data-element-slides=\".slider__slides\""
    },
    {
      "attr": "data-dots-class=\"slider__dots\""
    },
    {
      "attr": "data-loading-class=\"slider--loading\""
    },
    {
      "attr": "data-loader-visible-class=\"loader--visible\""
    },
    {
      "attr": "data-element-slide=\".slider__item\""
    },
    {
      "attr": "data-element-loader=\".loader\""
    },
    {
      "attr": "data-element-nav-prev=\".slider__prev\""
    },
    {
      "attr": "data-element-nav-next=\".slider__next\""
    },
    {
      "attr": "data-responsive-config=\"[]\""
    }
  ],
  "heading": {
    "class": "",
    "content": "heading",
    "contentContext": {
      "tag": "h2",
      "class": "heading--first-level margin-0",
      "text": "Slider heading"
    }
  },
  "iconPrev": {
    "tag": "button",
    "class": "button--icon-border slider__nav-button slider__prev",
    "icon": {
      "id": "arrow-left",
      "class": "button__icon slider__nav-icon"
    },
    "attributes": "type=\"button\" aria-label=\"Previous slide\""
  },
  "iconNext": {
    "tag": "button",
    "class": "button--icon-border slider__nav-button slider__next",
    "icon": {
      "id": "arrow-right",
      "class": "button__icon slider__nav-icon"
    },
    "attributes": "type=\"button\" aria-label=\"Next slide\""
  },
  "slides": [
    {
      "content": "image--picture",
      "contentContext": {
        "defaultSrc": "/images/slider/slider-304_392.jpg",
        "sources": [
          {
            "src": "/images/slider/slider-304_392.jpg",
            "mediaQuery": "(max-width: 480px)"
          },
          {
            "src": "/images/slider/slider-752_536.jpg",
            "mediaQuery": "(max-width: 768px)"
          },
          {
            "src": "/images/slider/slider-944_536.jpg",
            "mediaQuery": "(max-width: 1024px)"
          },
          {
            "src": "/images/slider/slider-1328_536.jpg",
            "mediaQuery": ""
          }
        ],
        "alt": "slider1"
      }
    },
    {
      "content": "image--picture",
      "contentContext": {
        "defaultSrc": "/images/slider/slider-304_392.jpg",
        "sources": [
          {
            "src": "/images/slider/slider-304_392.jpg",
            "mediaQuery": "(max-width: 480px)"
          },
          {
            "src": "/images/slider/slider-752_536.jpg",
            "mediaQuery": "(max-width: 768px)"
          },
          {
            "src": "/images/slider/slider-944_536.jpg",
            "mediaQuery": "(max-width: 1024px)"
          },
          {
            "src": "/images/slider/slider-1328_536.jpg",
            "mediaQuery": ""
          }
        ],
        "alt": "slider1"
      }
    },
    {
      "content": "image--picture",
      "contentContext": {
        "defaultSrc": "/images/slider/slider-304_392.jpg",
        "sources": [
          {
            "src": "/images/slider/slider-304_392.jpg",
            "mediaQuery": "(max-width: 480px)"
          },
          {
            "src": "/images/slider/slider-752_536.jpg",
            "mediaQuery": "(max-width: 768px)"
          },
          {
            "src": "/images/slider/slider-944_536.jpg",
            "mediaQuery": "(max-width: 1024px)"
          },
          {
            "src": "/images/slider/slider-1328_536.jpg",
            "mediaQuery": ""
          }
        ],
        "alt": "slider1"
      }
    },
    {
      "content": "image--picture",
      "contentContext": {
        "defaultSrc": "/images/slider/slider-304_392.jpg",
        "sources": [
          {
            "src": "/images/slider/slider-304_392.jpg",
            "mediaQuery": "(max-width: 480px)"
          },
          {
            "src": "/images/slider/slider-752_536.jpg",
            "mediaQuery": "(max-width: 768px)"
          },
          {
            "src": "/images/slider/slider-944_536.jpg",
            "mediaQuery": "(max-width: 1024px)"
          },
          {
            "src": "/images/slider/slider-1328_536.jpg",
            "mediaQuery": ""
          }
        ],
        "alt": "slider1"
      }
    }
  ]
}

File:

Content:


                                $slider__margin                               : 0 !default;
$slider__width                                : 100% !default;
$slider__min-height                           : 56px !default; //loader size

$slider__heading-justify-content              : center !default;
$slider__heading-min-height                   : 48px !default;
$slider__heading-margin                       : 0 0 $spacer--semi-medium !default;

//slider products
$slider__heading-margin--products             : 0 0 $spacer--extra-large !default;
$slider__item-padding--products               : $spacer !default;
//vars used to avaiod jumping content before js is loaded
$slider__hidden-item-number--products         : 3 !default;
$slider__hidden-item-number\@medium--products : 4 !default;

//slider brands
$slider__item-width--brands                   : 96px !default;
$slider__item-to-show--brands                 : 3 !default;
$slider__item-width\@medium--brands           : 144px !default;
$slider__item-to-show\@medium--brands         : 4 !default;
$slider__item-width\@large--brands            : 144px !default;
$slider__item-to-show\@large--brands          : 6 !default;
$slider__item-width\@max-width--brands        : 208px !default;
$slider__item-to-show\@max-width--brands      : 6 !default;

$slider__handler-max-width--brands            : $slider__item-width--brands * $slider__item-to-show--brands !default;
$slider__handler-max-width\@medium--brands    : $slider__item-width\@medium--brands * $slider__item-to-show\@medium--brands !default;
$slider__handler-max-width\@large--brands     : $slider__item-width\@large--brands * $slider__item-to-show\@large--brands !default;
$slider__handler-max-width\@max-width--brands : $slider__item-width\@max-width--brands * $slider__item-to-show\@max-width--brands !default;

//navigation
$slider__navigation-display                   : none !default;
$slider__navigation-display-breakpoint        : $screen-m !default;
$slider__navigation-width                     : 100% !default;
$slider__navigation-top                       : 50% !default;
$slider__navigation-IE-width                  : calc(50% - #{$slider__navigation-top}) !default;

$slider__prev-left                            : 0 !default;
$slider__next-right                           : 0 !default;
$slider__nav-button-border-radius             : 0 !default;
$slider__nav-button-size                      : 48px !default;
$slider__nav-icon-size                        : 24px !default;

//dots
$slider__dots-bottom                          : 0 !default;
$slider__dots-margin                          : 0 10px 0 0 !default;
$slider__dots-padding                         : 0 !default;
$slider__dot-size                             : 6px !default;
$slider__dot-background-color                 : $gray !default;
$slider__dot-background-color--active         : $color-primary !default;

$slider__link-font-weight                     : $font-weight-bold !default;
$slider__link-min-height                      : 48px !default;
$slider__link-text-align                      : center !default;
$slider__link-font-size                       : $font-size-base !default;

$slider__after-padding                        : $spacer--medium 0 !default;
$slider__after-text-align                     : center !default;

//breakpoint overflow items styles
$slider__container-before-bg                  : linear-gradient(to left, transparent, $white 50%) !default;
$slider__container-after-bg                   : linear-gradient(to right, transparent, $white 50%) !default;

URL: /components/raw/slider/_slider-variables.scss
Filesystem Path: build/components/Organisms/slider/_slider-variables.scss
Size: 3.5 KB

Content:


                                @import "slider-variables";

.slider {
    display: block;
    position: relative;
    width: $slider__width;
    height: auto;
    min-height: $slider__min-height;
    margin: $slider__margin;

    &__heading {
        display: flex;
        justify-content: $slider__heading-justify-content;
        align-items: center;
        min-height: $slider__heading-min-height;
        margin: $slider__heading-margin;
    }

    &--loading {
        .slider__navigation,
        .slider__dots {
            display: none;
        }
    }

    &--products {
        .slider__heading {
            margin: $slider__heading-margin--products;
        }

        .slider__item {
            padding: $slider__item-padding--products;
            height: auto;
        }
    }

    &--brands {
        .slider__container {
            width: $slider__handler-max-width--brands;
            margin-left: auto;
            margin-right: auto;
            position: relative;

            @include mq($screen-m) {
                width: $slider__handler-max-width\@medium--brands;
            }

            @include mq($screen-l) {
                width: $slider__handler-max-width\@large--brands;
            }

            @include mq($max-content-width) {
                width: $slider__handler-max-width\@max-width--brands;
            }

            &:before,
            &:after {
                display: block;
                content: '';
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
                z-index: $z-index-low;

                @include mq($slider__navigation-display-breakpoint) {
                    display: none;
                }
            }

            &:before {
                background: $slider__container-before-bg;
                right: 100%;
            }

            &:after {
                background: $slider__container-after-bg;
                left: 100%;
            }
        }

        .slider__handler {
            overflow: hidden;

            @include mq($slider__navigation-display-breakpoint) {
                overflow: visible;
            }
        }

        .slick-list {
            overflow: visible;

            @include mq($slider__navigation-display-breakpoint) {
                overflow: hidden;
            }
        }
    }

    &__handler {
        position: relative;
    }

    &__slides {
        height: auto;

        .slick-list {
            min-height: $slider__nav-button-size;
        }
    }

    &__item {
        height: auto;
        display: none;
    }

    &__navigation {
        display: $slider__navigation-display;
        position: absolute;
        width: $slider__navigation-width;
        top: $slider__navigation-top;
        margin-top: -$slider__nav-button-size / 2;
        padding: 0;
        z-index: $z-index-low;

        @include mq($slider__navigation-display-breakpoint) {
            display: block;

            @include isIE() {
                top: $slider__navigation-IE-width;
            }
        }
    }

    &__nav-button {
        width: $slider__nav-button-size;
        height: $slider__nav-button-size;
        min-width: $slider__nav-button-size;
        border-radius: $slider__nav-button-border-radius;
        padding: 0;
        position: absolute;
    }

    &__nav-icon {
        width: $slider__nav-icon-size;
        height: $slider__nav-icon-size;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -$slider__nav-icon-size / 2;
        margin-left: -$slider__nav-icon-size / 2;
        transition: $transition-base;
    }

    &__prev {
        left: $slider__prev-left;

        &:before {
            transform-origin: 100% 0;
        }
    }

    &__next {
        left: auto;
        right: $slider__next-right;
    }

    &__dots {
        display: block;
        position: relative;
        list-style: none;
        margin: $slider__dots-margin;
        padding: $slider__dots-padding;
        text-align: center;
        width: 100%;
        left: 0;
        bottom: $slider__dots-bottom;

        li {
            display: inline-block;
            position: relative;
            margin: 0;
            padding: 0;

            &.slick-active {
                &:before {
                    display: block;
                    position: absolute;
                    z-index: 1;
                    content: '';
                    width: $slider__dot-size;
                    height: $slider__dot-size;
                    padding: 0;
                    background: $slider__dot-background-color--active;
                    border-radius: 50%;
                    top: 50%;
                    margin-top: -($slider__dot-size / 2);
                }
            }
        }

        button {
            display: block;
            position: relative;
            width: $slider__dot-size;
            height: $slider__dot-size;
            padding: 0;
            background-color: $slider__dot-background-color;
            border: 0;
            border-radius: 50%;
            text-indent: 100%;
            white-space: nowrap;
            overflow: hidden;
            margin: $slider__dots-margin;
        }
    }

    &__link {
        align-items: center;
        font-size: $slider__link-font-size;
        font-weight: $slider__link-font-weight;
        min-height: $slider__link-min-height;
        text-align: $slider__link-text-align;

        &--button,
        &--button-secondary {
            @extend .button;
        }

        &--button-secondary {
            @extend .button--secondary;
        }
    }

    &__after {
        padding: $slider__after-padding;
        text-align: $slider__after-text-align;
    }
}

URL: /components/raw/slider/_slider.scss
Filesystem Path: build/components/Organisms/slider/_slider.scss
Size: 5.8 KB

Content:


                                (function Slider() {
  'use strict';

  function init() {
    let sliders = [...document.querySelectorAll('.slider')];
    sliders.forEach(element => {
      let dataValues = element.dataset;
      $.when(createSlider(element, dataValues)).then(displaySlider(element, dataValues));
    });
  }

  function createSlider(element, dataValues) {
    let slider = $(element),
        slides = slider.find(dataValues.elementSlides),
        navPrev = slider.find(dataValues.elementNavPrev),
        navNext = slider.find(dataValues.elementNavNext);

    slides.not('.slick-initialized').slick(
      {
        slide: dataValues.elementSlide,
        dots: JSON.parse(dataValues.dots),
        infinite: JSON.parse(dataValues.infinite),
        centerMode: JSON.parse(dataValues.centerMode),
        mobileFirst: JSON.parse(dataValues.mobileFirst),
        prevArrow: navPrev,
        nextArrow: navNext,
        dotsClass: dataValues.dotsClass,
        autoplay: JSON.parse(dataValues.autoplay),
        autoplaySpeed: parseInt(dataValues.autoplaySpeed),
        pauseOnFocus: JSON.parse(dataValues.pauseOnFocus),
        pauseOnHover: JSON.parse(dataValues.pauseOnHover),
        slidesToShow: parseInt(dataValues.slidesToShow),
        slidesToScroll: parseInt(dataValues.slidesToScroll),
        swipeToSlide: JSON.parse(dataValues.swipeToSlide),
        responsive: JSON.parse(dataValues.responsiveConfig)
      }
    )
  }

  function displaySlider(element, dataValues) {
    let slider = $(element),
        loader = slider.find(dataValues.elementLoader);

    loader.removeClass(dataValues.loaderVisibleClass);
    slider.removeClass(dataValues.loadingClass);
  }

  init();
}());

URL: /components/raw/slider/slider.js
Filesystem Path: build/components/Organisms/slider/slider.js
Size: 1.7 KB

Handle: @slider--loader-visible
Variants (4): Default , Loader Visible , Products , Brands
Preview:
- With layout
- Component only
Filesystem Path: build/components/Organisms/slider/slider.hbs
References (2): @loader, @button--icon

There are no notes for this item.