6.31 Featured Slider View in a new window

A component for displaying images as a carousel with lightbox.

Twig: components/featured-slider/featured-slider.twig

Example

Be inspired

Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper.

Find out more

UTS ranked #1 young uni

Come on campus to meet academics and have your questions answered. Morbi leo risus, porta ac consectetur ac.

Find out more
Markup 
<div class="featured-slider">
  <div class="featured-slider__slides js-featured-slider">
    <div class="featured-slider__slide">
      <div class="featured-slider__slide-video">
        <img src="/themes/uts_theme/src/components/featured-slider/featured-slider-example.jpg">
        <button id="featured-slider-video-0">Play video</button>
        {% embed '@uts_theme/components/dialog/dialog.twig' with {toggle: 'featured-slider-video-0', label: 'Dialog', classes: 'js-dialog dialog--video'} %}
          {% block content %}
            <div class="video">
              <iframe width="560" height="315" src="https://www.youtube.com/embed/en2xEswn45o" frameborder="0" allowfullscreen></iframe>
            </div>
          {% endblock %}
        {% endembed %}
      </div>
    </div>
    <div class="featured-slider__slide">
      <div class="featured-slider__slide-image">
        <img src="/themes/uts_theme/src/components/featured-slider/featured-slider-example-2.jpg">
      </div>
      <div class="featured-slider__overlay">
        <div class="featured-slider__slide-caption-wrapper">
          <div class="featured-slider__slide-caption">
            <h3>Be inspired</h3>
            <p>Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Vestibulum id ligula porta felis euismod semper.</p>
            <a href="#" class="button">Find out more</a>
          </div>
        </div>
      </div>
    </div>
    <div class="featured-slider__slide">
      <div class="featured-slider__slide-image">
        <img src="/themes/uts_theme/src/components/featured-slider/featured-slider-example-3.jpg">
      </div>
      <div class="featured-slider__overlay">
        <div class="featured-slider__slide-caption-wrapper">
          <div class="featured-slider__slide-caption">
            <h3>UTS ranked #1 young uni</h3>
            <p>Come on campus to meet academics and have your questions answered. Morbi leo risus, porta ac consectetur ac.</p>
            <a href="#" class="button">Find out more</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>