Slider

<touch-detection>
    <div class="slider" role="region" aria-label="Folien" tabindex="0" aria-describedby="slider-instructions">
        <ul class="slider__all">
            <li class="slider__slide">
                <figure class="slider__page">
                    <img src="../../assets/example-content/beispiel-praesentation-1.jpg" alt="Folie 1" id="Folie_1" />
                    <figcaption class="page__number__box">
                        <div class="page__number">1/4</div>
                    </figcaption>
                </figure>
            </li>
            <li class="slider__slide">
                <figure class="slider__page">
                    <img src="../../assets/example-content/beispiel-praesentation-2.jpg" alt="Folie 2" id="Folie_2" />
                    <figcaption class="page__number__box">
                        <div class="page__number">2/4</div>
                    </figcaption>
                </figure>
            </li>
            <li class="slider__slide">
                <figure class="slider__page">
                    <img src="../../assets/example-content/beispiel-praesentation-3.jpg" alt="Folie 3" id="Folie_3" />
                    <figcaption class="page__number__box">
                        <div class="page__number">3/4</div>
                    </figcaption>
                </figure>
            </li>
            <li class="slider__slide">
                <figure class="slider__page">
                    <img src="../../assets/example-content/beispiel-praesentation-4.jpg" alt="Folie 4" id="Folie_4" />
                    <figcaption class="page__number__box">
                        <div class="page__number">4/4</div>
                    </figcaption>
                </figure>
            </li>
        </ul>
    </div>
    <div class="slider__instructions">
        <p class="instructions--touch">
            Nach links wischen, um ggf. weitere Folien zu sehen
        </p>
        <p class="instructions--hover-and-focus">
            Scrollen oder die Pfeiltasten nutzen, um ggf. weitere Folien zu sehen
        </p>
        <p class="instructions--hover">Scrollen, um ggf. weitere Folien zu sehen</p>
        <p class="instructions--focus">
            Die Pfeiltasten nutzen, um ggf. weitere Folien zu sehen
        </p>
    </div>
</touch-detection>
<touch-detection>
    <div class="slider" role="region" aria-label="Folien" tabindex="0" aria-describedby="slider-instructions">
        <ul class="slider__all">
            <li class="slider__slide">
                <figure class="slider__page">
                    <img src={context.app.uri("assets/example-content/beispiel-praesentation-1.jpg")} alt="Folie 1" id="Folie_1"/>
                    <figcaption class="page__number__box">
                        <div class="page__number">
                            1/4
                        </div>
                    </figcaption>
                </figure>
            </li>
            <li class="slider__slide">
                <figure class="slider__page">
                    <img src={context.app.uri("assets/example-content/beispiel-praesentation-2.jpg")} alt="Folie 2" id="Folie_2"/>
                    <figcaption class="page__number__box">
                        <div class="page__number">
                            2/4
                        </div>
                    </figcaption>
                </figure>
            </li>
            <li class="slider__slide">
                <figure class="slider__page">
                    <img src={context.app.uri("assets/example-content/beispiel-praesentation-3.jpg")} alt="Folie 3" id="Folie_3"/>
                    <figcaption class="page__number__box">
                        <div class="page__number">
                            3/4
                        </div>
                    </figcaption>
                </figure>
            </li>
            <li class="slider__slide">
                <figure class="slider__page">
                    <img src={context.app.uri("assets/example-content/beispiel-praesentation-4.jpg")} alt="Folie 4" id="Folie_4"/>
                    <figcaption class="page__number__box">
                        <div class="page__number">
                            4/4
                        </div>
                    </figcaption>
                </figure>
            </li>
        </ul>
    </div>
    <div class="slider__instructions">
        <p class="instructions--touch">Nach links wischen, um ggf. weitere Folien zu sehen</p>
        <p class="instructions--hover-and-focus">Scrollen oder die Pfeiltasten nutzen, um ggf. weitere Folien zu sehen</p>
        <p class="instructions--hover">Scrollen, um ggf. weitere Folien zu sehen</p>
        <p class="instructions--focus">Die Pfeiltasten nutzen, um ggf. weitere Folien zu sehen</p>
    </div>
</touch-detection>
{/* This slider relies heavily on https://inclusive-components.design/a-content-slider/, accessed last: 06/15/2021, 16:45. Thanks to Heydon Pickering! */}
/* No context defined. */
  • Content:
    .slider {
      display: block;
      overflow-x: scroll;
      scroll-snap-type: x mandatory;
    }
    
    .slider__all {
      @extend %list-unstyled;
    
      position: relative;
      display: flex;
      margin: 0;
    }
    
    .slider__slide {
      display: block;
      flex: 0 0 100%;
      scroll-snap-align: center;
    }
    
    .slider__page {
      border-width: 1px;
      border-color: $brand-muted;
      border-right-style: solid;
      margin-bottom: 0;
    }
    
    .slider:focus {
      outline: 4px solid $brand-secondary-75;
    }
    
    .page__number__box {
      position: absolute;
      top: 4%;
      width: 10%;
      margin-right: 3%;
      margin-left: 90%;
    }
    
    .page__number {
      @extend %heading-font-regular;
    
      display: inline-block;
      padding: $spacer-xxs;
      background: rgba(247, 247, 247, 0.7);
      font-size: $font-size-xxs;
    }
    
    .instructions--hover,
    .instructions--focus,
    .instructions--hover-and-focus,
    .instructions--touch {
      @extend %heading-font-regular;
    
      display: none;
      font-size: $font-size-base;
    }
    
    .slider__instructions {
      margin-top: $spacer-sm;
      text-align: center;
    }
    
    .slider:focus+.slider__instructions .instructions--focus,
    .slider:hover+.slider__instructions .instructions--hover {
      display: block;
    }
    
    .slider:hover:focus+.slider__instructions .instructions--hover-and-focus {
      display: block;
    }
    
    .slider:hover:focus+.slider__instructions .instructions--hover {
      display: none;
    }
    
    .slider:hover:focus+.slider__instructions .instructions--focus {
      display: none;
    }
    
    .instructions--touch-active .slider__instructions .instructions--hover-and-focus {
      /* stylelint-disable-next-line */
      display: none !important;
    }
    
    .instructions--touch-active .slider__instructions .instructions--touch {
      display: block;
    }
    
  • URL: /components/raw/slider/_slider.scss
  • Filesystem Path: components/04-molecules/visual-elements/slider/_slider.scss
  • Size: 1.6 KB
  • Content:
    export default class TouchDetection extends HTMLElement {
      connectedCallback () {
        window.addEventListener('touchstart', function touched () {
          document.body.classList.add('instructions--touch-active')
          window.removeEventListener('touchstart', touched, false)
        }, false)
      }
    }
    
  • URL: /components/raw/slider/touch-detection.js
  • Filesystem Path: components/04-molecules/visual-elements/slider/touch-detection.js
  • Size: 294 Bytes

No notes defined.