<div class="slider">

    <div class="slider__image" style="background-image: url('http://placehold.it/1440x900')">
        <div class="slider__content container container--narrow">
            <div class="slider__description"> Rerum voluptatibus itaque adipisci fuga. Inventore omnis ea repudiandae sapiente aliquam id. Qui beatae quos eos aut tenetur. Id soluta illum numquam distinctio sit. Soluta perferendis laboriosam sunt voluptates. Repellat corporis et a eum
                temporibus. Cum est sed et. Recusandae debitis quo alias eos aut nulla debitis. Repudiandae placeat nam quasi magni rem officiis dolore tempora. Amet quia voluptatem accusamus aut et.</div>
        </div>
    </div>

    <div class="slider__image" style="background-image: url('http://placehold.it/1440x900')">
        <div class="slider__content container container--narrow">
            <div class="slider__description"> Rerum voluptatibus itaque adipisci fuga. Inventore omnis ea repudiandae sapiente aliquam id. Qui beatae quos eos aut tenetur. Id soluta illum numquam distinctio sit. Soluta perferendis laboriosam sunt voluptates. Repellat corporis et a eum
                temporibus. Cum est sed et. Recusandae debitis quo alias eos aut nulla debitis. Repudiandae placeat nam quasi magni rem officiis dolore tempora. Amet quia voluptatem accusamus aut et.</div>
        </div>
    </div>

</div>
<div class="slider">
  {% for slide in images %}
    {% set image = TimberImage(slide.image)%}
    <div class="slider__image" style="background-image: url('{{ image.src('hero') }}')">
      <div class="slider__content container container--narrow">
          <div class="slider__description"> {{ slide.text }}</div>
      </div>
    </div>
  {% endfor %}
</div>
{
  "images": [
    {
      "image": "http://placehold.it/1440x900",
      "text": "Rerum voluptatibus itaque adipisci fuga. Inventore omnis ea repudiandae sapiente aliquam id. Qui beatae quos eos aut tenetur. Id soluta illum numquam distinctio sit. Soluta perferendis laboriosam sunt voluptates. Repellat corporis et a eum temporibus. Cum est sed et. Recusandae debitis quo alias eos aut nulla debitis. Repudiandae placeat nam quasi magni rem officiis dolore tempora. Amet quia voluptatem accusamus aut et."
    },
    {
      "image": "http://placehold.it/1440x900",
      "text": "Rerum voluptatibus itaque adipisci fuga. Inventore omnis ea repudiandae sapiente aliquam id. Qui beatae quos eos aut tenetur. Id soluta illum numquam distinctio sit. Soluta perferendis laboriosam sunt voluptates. Repellat corporis et a eum temporibus. Cum est sed et. Recusandae debitis quo alias eos aut nulla debitis. Repudiandae placeat nam quasi magni rem officiis dolore tempora. Amet quia voluptatem accusamus aut et."
    }
  ]
}
  • Content:
    import ready from 'domready'
    
    ready(() => {
      const slider = document.querySelector('.slider')
      if(!slider) {
        return
      }
      require(['Flickity'], (Flickity) => {
        new Flickity(slider)
      })
    })
    
  • URL: /components/raw/module-slider/script.js
  • Filesystem Path: components/module-slider/script.js
  • Size: 199 Bytes
  • Content:
    .slider {}
    
    .frame {
        width: 100%;
        position: relative;
        font-size: 0;
        line-height: 0;
        overflow: hidden;
        white-space: nowrap;
    }
    
    .slides {
        display: inline-block;
    }
    
    .slider {
      position: relative;
      width: 100%;
      height: calc(100vh - 80px);
      background: {
        size: cover;
      }
    
      &__image {
        width: 100%;
        height: calc(100vh - 75px);
        display: flex;
        align-items: center;
        background: {
          size: cover;
          color: rgba(darken($olive, 15%), 0.5);
          blend-mode: color-burn;
        }
      }
    
      &__title,
      &__description {
        color: $white;
        text-shadow: 0 0 10px $black;
      }
    
      &__title {
        font-size: ms(3);
      }
    
      &__description {
        font-size: responsive 18px 36px;
        line-height: 1.25;
      }
    }
    
    .flickity-page-dots {
      bottom: 1rem;
    }
    
  • URL: /components/raw/module-slider/style.scss
  • Filesystem Path: components/module-slider/style.scss
  • Size: 789 Bytes

There are no notes for this item.