snurky components for Magento 2

Category Slider: Default 

<div class="section__content categories-sliderhtml  slick-initialized slick-slider">
    <button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: inline-block;">Previous
    </button>
    <div class="slick-list draggable">
        <div class="slick-track" style="opacity: 1; width: 5772px; transform: translate3d(-1554px, 0px, 0px);">
            <div class="category-grid-item slick-slide slick-cloned" tabindex="-1" data-slick-index="-6" aria-hidden="true" style="width: 222px;">
                <a href="#" title="Title
" class="category-grid-item__link" tabindex="-1" aria-label="">

                    <div class="category-grid-item__content">

                        <h3 class="category-grid-item__text">
                            Eettafels
                        </h3>
                        <span class="category-grid-item__icon">
                            <script src="/components/raw/common-js/../collapsible/collapsible.js"></script>
                            <script src="/components/raw/common-js/../dropdown-list/dropdown-list.js"></script>
                            <script src="/components/raw/common-js/../tooltip/tooltip.js" defer></script>
                            <script src="/components/raw/common-js/../more-info/more-info.js" defer></script>
                            <script src="/components/raw/common-js/../modal/modal.js"></script>

                        </span>
                    </div>
                </a>
            </div>
            <div class="category-grid-item slick-slide slick-cloned" tabindex="-1" data-slick-index="-5" aria-hidden="true" style="width: 222px;">
                <a href="#" title="Title" class="category-grid-item__link" tabindex="-1" aria-label="">

                    <div class="category-grid-item__content">

                        <h3 class="category-grid-item__text">
                            Kledingkasten
                        </h3>
                        <span class="category-grid-item__icon">
                            <script src="/components/raw/common-js/../collapsible/collapsible.js"></script>
                            <script src="/components/raw/common-js/../dropdown-list/dropdown-list.js"></script>
                            <script src="/components/raw/common-js/../tooltip/tooltip.js" defer></script>
                            <script src="/components/raw/common-js/../more-info/more-info.js" defer></script>
                            <script src="/components/raw/common-js/../modal/modal.js"></script>

                        </span>
                    </div>
                </a>
            </div>
            <div class="category-grid-item slick-slide slick-cloned" tabindex="-1" data-slick-index="-4" aria-hidden="true" style="width: 222px;">
                <a href="#" title="Title " class="category-grid-item__link" tabindex="-1" aria-label="">

                    <div class="category-grid-item__content">

                        <h3 class="category-grid-item__text">
                            Bureaus
                        </h3>
                        <span class="category-grid-item__icon">
                            <script src="/components/raw/common-js/../collapsible/collapsible.js"></script>
                            <script src="/components/raw/common-js/../dropdown-list/dropdown-list.js"></script>
                            <script src="/components/raw/common-js/../tooltip/tooltip.js" defer></script>
                            <script src="/components/raw/common-js/../more-info/more-info.js" defer></script>
                            <script src="/components/raw/common-js/../modal/modal.js"></script>

                        </span>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: inline-block;">Next</button>
</div>
 
<div class="section__content categories-sliderhtml  slick-initialized slick-slider">
    <button class="slick-prev slick-arrow" aria-label="Previous" type="button" style="display: inline-block;">Previous
    </button>
    <div class="slick-list draggable">
        <div class="slick-track" style="opacity: 1; width: 5772px; transform: translate3d(-1554px, 0px, 0px);">
            <div class="category-grid-item slick-slide slick-cloned" tabindex="-1" data-slick-index="-6"
                 aria-hidden="true" style="width: 222px;">
                <a href="#" title="Title
" class="category-grid-item__link" tabindex="-1" aria-label="">

                    <div class="category-grid-item__content">

                        <h3 class="category-grid-item__text">
                            Eettafels
                        </h3>
                        <span class="category-grid-item__icon">
                            {{ render @icon }}
                        </span>
                    </div>
                </a>
            </div>
            <div class="category-grid-item slick-slide slick-cloned" tabindex="-1" data-slick-index="-5"
                 aria-hidden="true" style="width: 222px;">
                <a href="#" title="Title" class="category-grid-item__link" tabindex="-1" aria-label="">

                    <div class="category-grid-item__content">

                        <h3 class="category-grid-item__text">
                            Kledingkasten
                        </h3>
                        <span class="category-grid-item__icon">
                            {{ render @icon }}
                        </span>
                    </div>
                </a>
            </div>
            <div class="category-grid-item slick-slide slick-cloned" tabindex="-1" data-slick-index="-4"
                 aria-hidden="true" style="width: 222px;">
                <a href="#" title="Title " class="category-grid-item__link" tabindex="-1" aria-label="">

                    <div class="category-grid-item__content">

                        <h3 class="category-grid-item__text">
                            Bureaus
                        </h3>
                        <span class="category-grid-item__icon">
                           {{ render @icon }}
                        </span>
                    </div>
                </a>
            </div>
        </div>
    </div>
    <button class="slick-next slick-arrow" aria-label="Next" type="button" style="display: inline-block;">Next</button>
</div>
 
{
  "script": true,
  "class": "slider--loading",
  "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"
      }
    }
  ]
}
  • Content: 
    .categories-sliderhtml {
    .category-grid-item {
        padding: 0 $spacer--small;
        box-shadow: none;
        border-radius: 0;
        border: 0;
        &__link {
            display: flex;
            flex-direction: column;
            border: 1px solid $blue-light;
            border-radius: 0;

            &:hover {
                .image {
                    border-color: #b4afc4;
                }
            }
        }
        &__image {
            padding: 0 0 10px;
            background: $white;
            border-radius: 0;
            border: 0;
            img {
                border-radius: 0;
            }
        }
        &__content {
            margin-top: $spacer--small;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        &__text {
            text-transform: none;
            font-size: $spacer--medium;
            font-weight: 300;
            margin: 0;
        }
    }
}
.slick-arrow {
    position: absolute;
    z-index: 1;
    top: 30%;
    height: 33.3333%;
    padding: $spacer--medium;
    text-indent: -9999999px;
    background: rgba(255, 255, 255, 0.4);
    border: none;
    &:hover {
        cursor: pointer;
        background: rgba(255, 255, 255, 0.8);
    }
    &:before {
        content: "";
        position: absolute;
        z-index: 2;
        color: #000;
        text-indent: 0;
        border-right: 3px solid #000;
        border-bottom: 3px solid #000;
        width: $spacer--medium;
        height: $spacer--medium;
    }
    &.slick-prev {
        left: 0;
        &:before {
            transform: rotate(135deg);
            left: $spacer--small;
        }
    }
    &.slick-next {
        right: 0;
        &:before {
            transform: rotate(-45deg);
            right: $spacer--small;
        }
    }
}
  • URL: /components/raw/category-slider/_category-slider.scss
  • Filesystem Path: build/components/Organisms/category-slider/_category-slider.scss
  • Size: 1.9 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/category-slider/category-slider.js
  • Filesystem Path: build/components/Organisms/category-slider/category-slider.js
  • Size: 1.7 KB

There are no notes for this item.