<div class="pageheader-slider js-pageheader-slider">
    <div class="pageheader-slider__item">
        <div class="pageheader-slider__item-inner" style="background-image: url('https://images.unsplash.com/photo-1526382074123-5685fa8a6af4?ixlib&#x3D;rb-0.3.5&amp;s&#x3D;94863bc0e123d3dc707563f87864eb52&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;2032&amp;q&#x3D;80')">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                        <div class="pageheader-content">
                            <h1 class="heading-page heading-page--pageheader ">Slider 1</h1>

                            <p class="paragraph paragraph--pageheader ">Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</p>

                            <button type="button" class="button button--large">
    See more
</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="pageheader-slider__item">
        <div class="pageheader-slider__item-inner" style="background-image: url('https://images.unsplash.com/photo-1498206005704-36d87df55231?ixlib&#x3D;rb-0.3.5&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;s&#x3D;f85ad7268a727c31aae1ac78ef399677&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1986&amp;q&#x3D;80')">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                        <div class="pageheader-content">
                            <h1 class="heading-page heading-page--pageheader ">Slider 2</h1>

                            <p class="paragraph paragraph--pageheader ">Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Sed porttitor lectus nibh.</p>

                            <button type="button" class="button button--large">
    See more
</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="pageheader-slider__item">
        <div class="pageheader-slider__item-inner" style="background-image: url('https://images.unsplash.com/photo-1483125078247-1a358ff363d3?ixlib&#x3D;rb-0.3.5&amp;ixid&#x3D;eyJhcHBfaWQiOjEyMDd9&amp;s&#x3D;63dd38e6be26093f5a96e80e4ceabf24&amp;auto&#x3D;format&amp;fit&#x3D;crop&amp;w&#x3D;1950&amp;q&#x3D;80')">
            <div class="container">
                <div class="row">
                    <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                        <div class="pageheader-content">
                            <h1 class="heading-page heading-page--pageheader ">Slider 2</h1>

                            <p class="paragraph paragraph--pageheader ">Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh.</p>

                            <button type="button" class="button button--large">
    See more
</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="pageheader-slider js-pageheader-slider">
    {{#each slides}}
        <div class="pageheader-slider__item">
            <div class="pageheader-slider__item-inner" style="background-image: url('{{image}}')">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 col-sm-10 col-sm-offset-1">
                            {{ render '@pageheader-content' content }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    {{/each}}
</div>
{
  "slides": [
    {
      "image": "https://images.unsplash.com/photo-1526382074123-5685fa8a6af4?ixlib=rb-0.3.5&s=94863bc0e123d3dc707563f87864eb52&auto=format&fit=crop&w=2032&q=80",
      "content": {
        "header": {
          "text": "Slider 1"
        },
        "description": {
          "text": "Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Quisque velit nisi, pretium ut lacinia in, elementum id enim."
        },
        "button": {
          "text": "See more"
        }
      }
    },
    {
      "image": "https://images.unsplash.com/photo-1498206005704-36d87df55231?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f85ad7268a727c31aae1ac78ef399677&auto=format&fit=crop&w=1986&q=80",
      "content": {
        "header": {
          "text": "Slider 2"
        },
        "description": {
          "text": "Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec velit neque, auctor sit amet aliquam vel, ullamcorper sit amet ligula. Sed porttitor lectus nibh."
        },
        "button": {
          "text": "See more"
        }
      }
    },
    {
      "image": "https://images.unsplash.com/photo-1483125078247-1a358ff363d3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=63dd38e6be26093f5a96e80e4ceabf24&auto=format&fit=crop&w=1950&q=80",
      "content": {
        "header": {
          "text": "Slider 2"
        },
        "description": {
          "text": "Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Sed porttitor lectus nibh."
        },
        "button": {
          "text": "See more"
        }
      }
    }
  ]
}
  • Content:
    /**
     * Component: Slider
     */
    
    :root {
        --slider-text-color: var(--color-white);
        --slider-text-shadow: 1px 1px 1px #333;
        --slider-height: 600px;
    }
    
    .pageheader-slider {
        &__item {
            width: 100%;
            height: calc(var(--slider-height) / 1.5);
    
            @media (--viewport-sm-min) {
                height: var(--slider-height);
            }
        }
    
        &__item-inner {
            background-size: cover;
            background-position: center;
            height: calc(var(--slider-height) / 1.5);
            display: flex;
            align-items: center;
    
            @media (--viewport-sm-min) {
                height: var(--slider-height);
            }
        }
    
        .flickity-button {
            opacity: 0;
            transition: 0.3s var(--easeInOutCubic);
    
            @media (--viewport-sm-min) {
                opacity: 1;
            }
        }
    
        .flickity-button:disabled {
            opacity: 0;
        }
    
        .flickity-page-dots {
            opacity: 1;
    
            @media (--viewport-sm-min) {
                opacity: 0;
                display: none;
                pointer-events: none;
            }
        }
    }
    
  • URL: /components/raw/pageheader-slider/pageheader-slider.css
  • Filesystem Path: patterns/03-organisms/pageheaders/pageheader-slider/pageheader-slider.css
  • Size: 1.1 KB
  • Content:
    "use strict";
    
    /**
     * @name Novicell Slider
     * @desc Slider, for custom arrow use https://flickity.metafizzy.co/options.html#arrowshape
     * @author Emil Ankersen (EAN)
     * @requires https://flickity.metafizzy.co/
     */
    
    var novicell = novicell || {};
    
    novicell.pageheaderSlider =
        novicell.pageheaderSlider ||
        new function() {
            this.init = function() {
                const elem = document.querySelector(".js-pageheader-slider");
                if (elem && elem != null) {
                    let flkty = new Flickity(elem, {
                        // options
                        cellAlign: "left",
                        contain: true
                    });
                }
            };
        }();
    
  • URL: /components/raw/pageheader-slider/pageheader-slider.js
  • Filesystem Path: patterns/03-organisms/pageheaders/pageheader-slider/pageheader-slider.js
  • Size: 684 Bytes

There are no notes for this item.