Vechtsport Online Components for Magento 2

Slider: With Dots 

<div class="slider " data-rewind="true" data-enable-mouse-events="true" data-slides-to-scroll="1">
    <div class="slider__handler">
        <div class="slider__slides">
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/8weapons.jpg" data-src="" alt="8weapons">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/adidas.jpg" data-src="" alt="adidas">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/booster.jpg" data-src="" alt="booster">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/ernestohoost.jpg" data-src="" alt="ernestehoost">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/essimo.jpg" data-src="" alt="essimo">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/hayabusa.jpg" data-src="" alt="hayabusa">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/joya.jpg" data-src="" alt="joya">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/kingpro.jpg" data-src="" alt="kingpro">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/matsuru.jpg" data-src="" alt="matsuru">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/nike.jpg" data-src="" alt="nike">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/queen.jpg" data-src="" alt="queen">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/ringhorns.jpg" data-src="" alt="ringhorns">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/safejawz.jpg" data-src="" alt="safejawz">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/shockdoctor.jpg" data-src="" alt="shockdoctor">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/superpro.jpg" data-src="" alt="superpro">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/tapout.jpg" data-src="" alt="tapout">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/tufwear.jpg" data-src="" alt="tufwear">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/tunturi.jpg" data-src="" alt="tunturi">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/twinsspecial.jpg" data-src="" alt="twinsspecial">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/ufc.jpg" data-src="" alt="ufc">
                </div>

            </div>
            <div class="slider__item ">
                <div class="lazyload-wrapper ">
                    <img class="image lazyload " src="/images/brands/venum.jpg" data-src="" alt="venum">
                </div>

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

    <div class="slider__navigation ">
        <button class="button button--icon slider__navigation-icon slider__prev" type="button" aria-label="Previous slide">

            <svg class="icon button__icon slider__icon" role="img">
                <title>Arrow left</title>
                <use xlink:href="/images/icons-sprite.svg#angle-left"></use>
            </svg>

        </button>

        <button class="button button--icon slider__navigation-icon slider__next" type="button" aria-label="Next slide">

            <svg class="icon button__icon slider__icon" role="img">
                <title>Arrow right</title>
                <use xlink:href="/images/icons-sprite.svg#angle-right"></use>
            </svg>

        </button>

    </div>

    <div class="slider__dot-navigation "></div>
</div>

<script src="/components/raw/slider/slider.js"></script>
 
<div class="slider {{ class }}" {{{ attributes }}}>
    <div class="slider__handler">
        <div class="slider__slides">
            {{#each slides }}
                <div class="slider__item {{ this.itemClass }}"
                     {{{ this.itemAttributes }}}

                >
                    {{ render (component content) contentContext }}
                </div>
            {{/each}}
        </div>
    </div>

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

        {{render '@button--icon' iconNext }}
    </div>

    {{#if navigation }}
        <div class="slider__dot-navigation {{ dotNavigationClass }}"></div>
    {{/if}}
</div>

{{#if script }}
    <script src="{{ static 'slider.js' }}"></script>
{{/if}}
 
{
  "script": true,
  "attributes": "data-rewind=\"true\" data-enable-mouse-events=\"true\" data-slides-to-scroll=\"1\"",
  "iconPrev": {
    "tag": "button",
    "text": "",
    "class": "button--icon slider__navigation-icon slider__prev",
    "icon": {
      "id": "angle-left",
      "title": "Arrow left",
      "class": "button__icon slider__icon"
    },
    "attributes": "type=\"button\" aria-label=\"Previous slide\""
  },
  "iconNext": {
    "tag": "button",
    "text": "",
    "class": "button--icon slider__navigation-icon slider__next",
    "icon": {
      "id": "angle-right",
      "title": "Arrow right",
      "class": "button__icon slider__icon"
    },
    "attributes": "type=\"button\" aria-label=\"Next slide\""
  },
  "slides": [
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/8weapons.jpg",
        "alt": "8weapons"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/adidas.jpg",
        "alt": "adidas"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/booster.jpg",
        "alt": "booster"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/ernestohoost.jpg",
        "alt": "ernestehoost"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/essimo.jpg",
        "alt": "essimo"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/hayabusa.jpg",
        "alt": "hayabusa"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/joya.jpg",
        "alt": "joya"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/kingpro.jpg",
        "alt": "kingpro"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/matsuru.jpg",
        "alt": "matsuru"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/nike.jpg",
        "alt": "nike"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/queen.jpg",
        "alt": "queen"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/ringhorns.jpg",
        "alt": "ringhorns"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/safejawz.jpg",
        "alt": "safejawz"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/shockdoctor.jpg",
        "alt": "shockdoctor"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/superpro.jpg",
        "alt": "superpro"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/tapout.jpg",
        "alt": "tapout"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/tufwear.jpg",
        "alt": "tufwear"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/tunturi.jpg",
        "alt": "tunturi"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/twinsspecial.jpg",
        "alt": "twinsspecial"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/ufc.jpg",
        "alt": "ufc"
      }
    },
    {
      "content": "image",
      "contentContext": {
        "src": "/images/brands/venum.jpg",
        "alt": "venum"
      }
    }
  ],
  "navigation": true
}
  • Content: 
    $slider__margin                       : $spacer--medium !default;
$slider__transition                   : $transition-base !default;
$slider__item-width                   : 50% !default;
$slider__item-width\@medium           : 25% !default;
$slider__navigation-margin            : $spacer !default;
$slider__navigation-icon-size         : 48px !default;
$slider__navigation-icon-margin       : $spacer !default;
$slider__navigation-icon-background   : $white !default;
$slider__icon-size                    : 25px !default;
$slider__icon-fill                    : $color-primary !default;
$slider__icon-fill-hover              : darken($color-primary, 10%) !default;
$slider__dot-margin                   : $spacer--medium !default;
$slider__dot-padding                  : $spacer--medium !default;
$slider__dot-inside-size              : $spacer--medium !default;
$slider__dot-inside-background        : $gray-dark !default;
$slider__dot-inside-border-radius     : $spacer !default;
$slider__dot-inside-background--active: $color-primary !default;

.slider {
    position: relative;

    &__handler {
        overflow: hidden;
    }

    &__slides {
        display: flex;
    }

    &__item {
        position: relative;
        min-width: $slider__item-width;
        border: 0;

        @include mq($screen-m) {
            min-width: $slider__item-width\@medium;
        }
    }

    &__navigation {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: $slider__navigation-margin;
    }

    &__navigation-icon {
        display: flex;
        justify-content: center;
        align-items: center;
        height: $slider__navigation-icon-size;
        width: $slider__navigation-icon-size;
        background-color: $slider__navigation-icon-background;
        border: 0;

        &:first-child {
            margin-right: $slider__navigation-icon-margin;
        }

        &:last-child {
            margin-left: $slider__navigation-icon-margin;
        }

        &:hover,
        &:focus,
        &:active {
            background-color: $slider__navigation-icon-background;

            .slider__icon {
                fill: $slider__icon-fill-hover;
            }
        }
    }

    &__icon {
        width: $slider__icon-size;
        height: $slider__icon-size;
        fill: $slider__icon-fill;
    }

    &__dot-navigation {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        margin-top: $spacer;
    }

    &__dot {
        display: block;
        padding: $slider__dot-padding;
        margin-right: $slider__dot-margin;
        cursor: pointer;

        &--active {
            .slider__dot-inside {
                background-color: $slider__dot-inside-background--active;
            }
        }

        &:last-child {
            margin-right: 0;
        }
    }


    &__dot-inside {
        display: block;
        width: $slider__dot-inside-size;
        height: $slider__dot-inside-size;
        background-color: $slider__dot-inside-background;
        border-radius: $slider__dot-inside-border-radius;
    }
}
  • URL: /components/raw/slider/_slider.scss
  • Filesystem Path: build/components/03-modules/slider/_slider.scss
  • Size: 3.1 KB
  • Content: 
    /* globals lory */

(function alpacaSlider() {
  'use strict';

  const sliders = [...document.querySelectorAll('.slider')];

  class Slider {
    constructor(slider, dataValues) {
      this.active = 'slider__dot--active';
      this.config = {
        classNameFrame         : 'slider__handler',
        classNameSlideContainer: 'slider__slides',
        classNamePrevCtrl      : 'slider__prev',
        classNameNextCtrl      : 'slider__next',
        slidesToScroll         : 1
      };
      this.dataValues = dataValues;
      this.slider = slider;
      this.dotContainer = this.slider.querySelector('.slider__dot-navigation');
      this.items = this.slider.querySelectorAll('.slider__item').length;
      this.navigationContainer = this.slider.querySelector('.slider__navigation');
      this.dotCount = 0;

      if (this.dotContainer) {
        this.dots = this.dotContainer.childNodes;

        this.slider.addEventListener('before.lory.init', () => {
          this.cloneDots()
          this.addDotListeners();
        });

        this.slider.addEventListener('after.lory.slide', (event) => {
          this.dotClassToggle(event);
        });

        this.slider.addEventListener('on.lory.resize', () => {
          this.lorySlider.slideTo(0);
          this.dotContainer.innerHTML = '';

          this.cloneDots();
          this.addDotListeners();

          this.dotContainer.childNodes[0].classList.add(this.dotActive);
        });
      }

      Object.keys(this.dataValues).map((objectKey) => {
        if (objectKey !== 'slidesToScroll') {
          if (!isNaN(parseInt(this.dataValues[objectKey]))) {
            this.config[objectKey] = parseInt(this.dataValues[objectKey]);
          }
          else {
            this.config[objectKey] = this.dataValues[objectKey];
          }
        }
      });

      this.lorySlider = lory(this.slider, this.config);
    }

    cloneDots() {
      this.dotNumber();
      const dotItem          = document.createElement('div'),
            navigationHidden = 'slider__navigation--hidden';

      if (this.dotCount > 1) {
        this.navigationContainer.classList.remove(navigationHidden);

        for (let i = 0; i < this.dotCount; i++) {
          let clone = dotItem.cloneNode();
          const nestedElement = document.createElement('span');

          clone.classList.add('slider__dot');

          clone.appendChild(nestedElement);
          nestedElement.classList.add('slider__dot-inside');

          this.dotContainer.appendChild(clone);
        }

        this.dotContainer.childNodes[0].classList.add(this.active);
      }
      else {
        this.navigationContainer.classList.add(navigationHidden);
      }
    }

    dotNumber() {
      const sliderWidth     = this.slider.querySelector('.slider__slides').offsetWidth,
            itemWidth       = this.slider.querySelector('.slider__item').offsetWidth,
            visibleElements = Math.round(sliderWidth / itemWidth),
            itemsLeft       = (this.items - visibleElements) + 1;

      this.dotCount = (itemsLeft > 1) ? (this.items - visibleElements) + 1 : 1;

      return this.dotCount;
    }

    addDotListeners() {
      const dots = this.dotContainer.childNodes;

      dots.forEach(dot => {
        dot.addEventListener('click', (event) => {
          if (event.target.parentNode === dot) {
            this.lorySlider.slideTo(Array.prototype.indexOf.call(dots, event.target.parentNode));
          }
          else {
            this.lorySlider.slideTo(Array.prototype.indexOf.call(dots, event.target));
          }
        });
      })
    }

    dotClassToggle(e) {
      this.dotContainer.childNodes.forEach(dot => {
        dot.classList.remove(this.active);
      });

      this.dotContainer.childNodes[e.detail.currentSlide].classList.add(this.active);
    }
  }

  sliders.forEach(slider => {
    const dataValues = slider.dataset;

    new Slider(slider, dataValues);
  });
}());
  • URL: /components/raw/slider/slider.js
  • Filesystem Path: build/components/03-modules/slider/slider.js
  • Size: 3.9 KB

Slider module

If we are exporting this module somewhere else and with other images we must remember about update aspect-ratio. It’s required to keep lazyloading in this slider.

Slider gap

For now if you want to add gap between images you must add it throught the img or container which contains all of stuff which you want to add in slider. In preview we can see it with img tags.

Slider settings

IMPORTANT! Avoid to using slidesToScroll attribute b/c it’s hardcoded to use only by one element - it’s more easier than foresee every case.

If we want to add or edit settings i.e. add inifinity slider instead of rewind, or change the number of slides to scroll we can do it by data attributes passed in main slider element as attributes.

All settings are available here.

Slider item width

IMPORTANT! We must give to slide__item width with the most approximation. I.e if we want 3 visible items in one screen set width to calc(100% / 3) Not just 33%. It makes a ‘bug’ in dot active classes with wrong calculating the last item and keep the active class in previous item in navigation.

If we want to create a responsive slider with 2 items on mobile and 4 on desktop don’t use inline width on elements and use additional class in item with using min-width on this screen sizes which you want (like in preview).

Slider item can accept inline styles where we can pass as slide item own width to each one.

Slider navigation

We can edit navigation in slider too by adding it a custom class and place it wherever we want