Component Library

Pageheader - Slider 

<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: src/03-organisms/pageheaders/pageheader-slider/pageheader-slider.css
  • Size: 1.1 KB
  • Content: 
    import Flickity from 'flickity';

/**
 * @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/
 */

const elem = document.querySelector('.js-pageheader-slider');

if (elem && elem != null) {
  /* eslint-disable no-new */
  new Flickity(elem, {
    // options
    cellAlign: 'left',
    contain: true,
  });
}
  • URL: /components/raw/pageheader-slider/pageheader-slider.js
  • Filesystem Path: src/03-organisms/pageheaders/pageheader-slider/pageheader-slider.js
  • Size: 444 Bytes

There are no notes for this item.