<div id="logoSwapper" class="Slider js-slider _faded" style="" data-autoplay="true" tabindex="0">

    <div class="Slider-list">
        <div class="Slider-item " style="">

            <img id="" class="image  " alt="" style="" src="//media.sproutsocial.com/uploads/lift-sprout-social-lp-report-zoom@2x.png" />

        </div>

        <div class="Slider-item " style="">

            <img id="" class="image  " alt="" style="" src="//media.sproutsocial.com/uploads/marketplace-lplaptop-twitter-keyword-listening@2x.png" />

        </div>

        <div class="Slider-item " style="">

            <img id="" class="image  " alt="" style="" src="//media.sproutsocial.com/uploads/sceen-zoom-listening-query-builder@2x.png" />

        </div>

    </div>

</div>
<div id="{{id}}"
     class="Slider js-slider {{modifier}}"
     style="{{style}}"
     {{#if autoplay}}data-autoplay="{{autoplay}}" {{/if}}
     {{#if hasnavigation}}data-slider-nav="{{hasnavigation}}" {{/if}}
     tabindex="0"
>
    {{#if showadvancebuttons}}
        <button class="IconButton icon _arrow-left _before _small _circle js-slider-previous" data-target="#{{id}}">
            <span class="u-text-screenreader">Previous slide</span>
        </button>
    {{/if}}

    <div class="Slider-list">
        {{> @children}}
    </div>

    {{#if showadvancebuttons}}
        <button class="IconButton icon _arrow _before _small _circle js-slider-next" data-target="#{{id}}">
            <span class="u-text-screenreader">Next slide</span>
        </button>
    {{/if}}
</div>
{
  "id": "logoSwapper",
  "modifier": "_faded",
  "style": null,
  "showadvancebuttons": null,
  "hasnavigation": null,
  "autoplay": true,
  "children": [
    {
      "component": "slideritem",
      "context": {
        "children": [
          {
            "component": "image",
            "context": {
              "src": "//media.sproutsocial.com/uploads/lift-sprout-social-lp-report-zoom@2x.png"
            }
          }
        ]
      }
    },
    {
      "component": "slideritem",
      "context": {
        "children": [
          {
            "component": "image",
            "context": {
              "src": "//media.sproutsocial.com/uploads/marketplace-lplaptop-twitter-keyword-listening@2x.png"
            }
          }
        ]
      }
    },
    {
      "component": "slideritem",
      "context": {
        "children": [
          {
            "component": "image",
            "context": {
              "src": "//media.sproutsocial.com/uploads/sceen-zoom-listening-query-builder@2x.png"
            }
          }
        ]
      }
    }
  ]
}
  • Content:
    import Wallop from 'wallop';
    import {each} from '@sproutsocial/sprout-brand/modules/util';
    import '@sproutsocial/sprout-brand/modules/polyfills/request-animation-frame';
    
    /**
     * (Just a) Slider is module for hiding and showing things.
     * @example
     * const sliders = document.querySelectorAll('.js-slider');
     * each(sliders, (el)=> { new Slider({ container: el, options: {autoplay: 4000} }); });
     */
    class Slider {
        static defaultProps = {
            container: null,
            hasNavigation: false,
            triggerClass: 'js-slider-trigger',
            animationId: null,
            options: {
                autoplay: false,
                buttonPreviousClass: 'js-slider-previous',
                buttonNextClass: 'js-slider-next',
                itemClass: 'Slider-item',
                currentItemClass: 'is-current',
                showPreviousClass: 'is-showingPrevious',
                showNextClass: 'is-showingNext',
                hidePreviousClass: 'is-hidingPrevious',
                hideNextClass: 'is-hidingNext',
                carousel: true
            }
        };
    
        constructor(props = {}) {
            props.options = Object.assign({}, Slider.defaultProps.options, props.options || {});
            this.props = Object.assign({}, Slider.defaultProps, props);
            this.slider = new Wallop(this.props.container, this.props.options);
    
            if (this.props.hasNavigation) {
                // Will check the document for triggers outside of the container, then check within the container
                const triggers =
                    document.querySelectorAll(`.${this.props.triggerClass}[data-slider-id="${this.props.container.id}"]`) ||
                    this.props.container.querySelectorAll(`.${this.props.triggerClass}`);
    
                if (triggers && triggers.length > 0) {
                    each(triggers, trigger => {
                        trigger.addEventListener('click', e => {
                            e.preventDefault();
                            this.slider.goTo(parseInt(trigger.getAttribute('data-target')));
                            this.changeActiveTrigger(trigger, triggers);
                            this.props.container.focus(); // Auto focus the slider
                            if (this.animationId) {
                                cancelAnimationFrame(this.animationId);
                            }
                        });
                    });
                }
    
                this.slider.on('change', () => {
                    const currentTrigger =
                        document.querySelector(
                            `.${this.props.triggerClass}[data-slider-id="${this.props.container.id}"][data-target="${this
                                .slider.currentItemIndex}"]`
                        ) ||
                        this.props.container.querySelector(
                            `.${this.props.triggerClass}[data-target="${this.slider.currentItemIndex}"]`
                        );
    
                    this.changeActiveTrigger(currentTrigger, triggers);
                });
            }
    
            if (typeof this.props.options.autoplay === 'number') {
                this.autoplay.call(this, this.props.options.autoplay);
            }
    
            this.props.container.addEventListener('keydown', event => {
                if (event.keyCode === 37) {
                    this.slider.previous();
                } else if (event.keyCode === 39) {
                    this.slider.next();
                }
            });
        }
    
        changeActiveTrigger(trigger, allTriggers) {
            each(allTriggers, el => {
                el.classList.remove('is-active');
            });
    
            trigger.classList.add('is-active');
        }
    
        autoplay(interval) {
            let lastTime = 0;
    
            const frame = timestamp => {
                const update = timestamp - lastTime >= interval;
    
                if (update) {
                    this.slider.next();
                    lastTime = timestamp;
                }
    
                this.animationId = requestAnimationFrame(frame);
            };
    
            this.animationId = requestAnimationFrame(frame);
    
            if (this.slider.buttonPrevious) {
                this.slider.buttonPrevious.addEventListener('click', () => {
                    cancelAnimationFrame(this.animationId);
                });
            }
    
            if (this.slider.buttonNext) {
                this.slider.buttonNext.addEventListener('click', () => {
                    cancelAnimationFrame(this.animationId);
                });
            }
        }
    }
    
    export default Slider;
    
  • URL: /components/raw/slider/Slider.js
  • Filesystem Path: components/molecules/Slider/Slider.js
  • Size: 4.3 KB
  • Content:
    // Slider
    //
    // (Just a) Slider is module for hiding and showing things. Based on Wallop.js.
    //
    // Markup: Slider.html
    //
    // Style guide: Patterns.Slider
    
    /**
     * wallop.css
     *
     * @fileoverview Default styles for wallop – recommended
     *
     * @author Pedro Duarte
     * @author http://pedroduarte.me/wallop
     */
    
    /*
      This is the top-level selector
    
      It should be relative positioned
      to allow the children to be positioned absolutely
      relative to this
     */
    .Slider {
        position: relative;
        display: flex;
        justify-content: space-between;
        outline: none; // Added to remove outline from tabindex
    }
    
    /*
      This element groups all the items, but not the buttons
    
      It's a recommendation but it's very likely
      you'll want to hide any overflow from the items
      Especially when doing animations such as scale
     */
    .Slider-list {
        position: relative;
        width: 100%;
        padding: 0 Space(300);
        overflow: hidden;
    }
    
    /*
      This is the item element
    
      By default, they are all hidden and
      positioned absolute
      I recommend always having .Slider-item--current
      in your markup by default (probably on the first element)
     */
    .Slider-item {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        visibility: hidden;
    }
    
    /*
      This is the current item element
    
      All we do here, is make it visible again reset
      the position to static. Could also be relative
     */
    .Slider-item.is-current {
        position: relative;
        visibility: visible;
    }
    
  • URL: /components/raw/slider/Slider.scss
  • Filesystem Path: components/molecules/Slider/Slider.scss
  • Size: 1.5 KB

There are no notes for this item.