University of Leeds Design System v1.0.16

Slideshow

No notes defined.

<div id="bannerSlideshow" class="bannerSlideshow">
  <div class="slideshowImages">
    {% for item in items %}
      <div class="image" style="background-image: url(/placeholders/{{item.url}}); animation-delay: {{loop.index0 * slideDuration}}s; animation-duration: {{loop.length * slideDuration}}s"></div>
    {% endfor %}
  </div> 
</div>
<div class="bannerSlideshowControls">
  <div class="slideshowControlsInner">
    <div class="slideshowControl" id="playButton">
      <span class="triangle"></span>
    </div>
    <div class="slideshowControl" id="pauseButton">
      <div></div>
      <div></div>
    </div>
  </div>
</div>
 
<div id="bannerSlideshow" class="bannerSlideshow">
    <div class="slideshowImages">

        <div class="image" style="background-image: url(/placeholders/new-homepage/banner-25-01.jpg); animation-delay: 0s; animation-duration: 24s"></div>

        <div class="image" style="background-image: url(/placeholders/new-homepage/banner-25-02.jpg); animation-delay: 8s; animation-duration: 24s"></div>

        <div class="image" style="background-image: url(/placeholders/new-homepage/banner-25-03.jpg); animation-delay: 16s; animation-duration: 24s"></div>

    </div>
</div>
<div class="bannerSlideshowControls">
    <div class="slideshowControlsInner">
        <div class="slideshowControl" id="playButton">
            <span class="triangle"></span>
        </div>
        <div class="slideshowControl" id="pauseButton">
            <div></div>
            <div></div>
        </div>
    </div>
</div>
  • Content: 
    // new colours
$newBrand1: #DBC9C9;
$newBrand1: #F7E5E5;

// Slideshow CSS
$slideZoomRatio: 1.2;
$bannerHeight: 568px;
$maxWidth: 1600px;

$controlPadding: 10px;
$controlMargin: 20px;
$controlHeight: 14px;

#bannerSlideshow {
  width: 100%;
  height: $bannerHeight;
  position: relative;    
  overflow: hidden;
  
  .slideshowImages {
    width: 100%;
    overflow: hidden;
    
    .image {
      height: $bannerHeight;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      animation-name: fade;
      animation-iteration-count: infinite;
      opacity: 0;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }
    
    @keyframes fade {
      0%   { opacity: 0; }
      11.11%   { opacity: 1; }
      33.33%  { opacity: 1; }
      44.44%  { opacity: 0; transform: scale($slideZoomRatio);}
      100% { opacity: 0; transform: scale(1);}
    }
  }
}

.bannerSlideshowControls {
  width: 100%;
  max-width: $maxWidth;
  margin: 0 auto;
  position: relative;

  .slideshowControlsInner {
    position: absolute;
    right: 0;
    bottom: 0;
    background: $newBrand1;
    display: flex;
    align-items: center;
    justify-content: center;

    .slideshowControl {
      align-items: center;
      cursor: pointer;
      border: 1px solid black;
      margin: $controlMargin $controlMargin 0;
      width: calc(#{$controlHeight} + #{$controlPadding} * 2 + 2px);
      height: calc(#{$controlHeight} + #{$controlPadding} * 2 + 2px);
    }

    #pauseButton {
      display: flex; // change between flex and none using JS
      justify-content: space-evenly;

      div {
        width: 5px;
        height: $controlHeight;
        margin: $controlMargin 0;
        background: black;
      }
    }

    #playButton { 
      display: none; // change between flex and none using JS
      justify-content: center;

      .triangle {
        width: 0px;
        height: 0px;
        border-style: solid;
        border-width: calc(#{$controlHeight} / 2) 0 calc(#{$controlHeight} / 2) calc(#{$controlHeight}* 0.86);
        border-color: transparent transparent transparent black;
        transform: rotate(0deg);
      }
    }
  }
}
  • URL: /components/raw/slideshow/_slideshow.scss
  • Filesystem Path: src/library/02-components/slideshow/_slideshow.scss
  • Size: 2.2 KB
  • Content: 
    export const slideshowJs = () => {
  const slideshow = document.getElementById("bannerSlideshow");
  const pauseButton = document.getElementById("pauseButton");
  const playButton = document.getElementById("playButton");
  const images = slideshow.getElementsByClassName("image");

  pauseButton.addEventListener('click', () => {
    playButton.style.display = "flex";
    pauseButton.style.display = "none";
    for (let image of images) {
      image.style.animationPlayState = "paused";
    }
  });

  playButton.addEventListener('click', () => {
    playButton.style.display = "none";
    pauseButton.style.display = "flex";
    for (let image of images) {
      image.style.animationPlayState = "running";
    }
  });
}
  • URL: /components/raw/slideshow/slideshow.module.js
  • Filesystem Path: src/library/02-components/slideshow/slideshow.module.js
  • Size: 724 Bytes 
{
  "name": "Slideshow",
  "handle": "uol-slideshow",
  "status": "prototype",
  "slideDuration": 8,
  "items": [
    {
      "url": "new-homepage/banner-25-01.jpg"
    },
    {
      "url": "new-homepage/banner-25-02.jpg"
    },
    {
      "url": "new-homepage/banner-25-03.jpg"
    }
  ]
}