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">
                        <svg class="page__number" viewBox="0 0 45 30" version="1.1" baseProfile="full" xmlns="https://www.w3.org/2000/svg">
                            <text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle">1/4</text>
                        </svg>
                    </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">
                        <svg class="page__number" viewBox="0 0 45 30" version="1.1" baseProfile="full" xmlns="https://www.w3.org/2000/svg">
                            <text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle">2/4</text>
                        </svg>
                    </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">
                        <svg class="page__number" viewBox="0 0 45 30" version="1.1" baseProfile="full" xmlns="https://www.w3.org/2000/svg">
                            <text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle">3/4</text>
                        </svg>
                    </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">
                        <svg class="page__number" viewBox="0 0 45 30" version="1.1" baseProfile="full" xmlns="https://www.w3.org/2000/svg">
                            <text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle">4/4</text>
                        </svg>
                    </figcaption>
                </figure>
            </li>
        </ul>
    </div>
    <div class="slider__instructions">
        <p class="instructions--touch">Nach links wischen, um ggf. weitere Folien zu sehen</p>
        <div class="instructions__no-touch">
            <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>
    </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! */}
<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="{{ path '/assets/example-content/beispiel-praesentation-1.jpg'}}" alt="Folie 1" id="Folie_1"/>
                    <figcaption class="page__number__box">
                        <svg class="page__number" viewBox="0 0 45 30" version="1.1" baseProfile="full" xmlns="https://www.w3.org/2000/svg">
                            <text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle">1/4</text>
                        </svg>
                    </figcaption>
                </figure>
            </li>
            <li class="slider__slide">
                <figure class="slider__page">
                    <img src="{{ path '/assets/example-content/beispiel-praesentation-2.jpg'}}" alt="Folie 2" id="Folie_2"/>
                    <figcaption class="page__number__box">
                        <svg class="page__number" viewBox="0 0 45 30" version="1.1" baseProfile="full" xmlns="https://www.w3.org/2000/svg">
                            <text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle">2/4</text>
                        </svg>
                    </figcaption>
                </figure>
            </li>
            <li class="slider__slide">
                <figure class="slider__page">
                    <img src="{{ path '/assets/example-content/beispiel-praesentation-3.jpg'}}" alt="Folie 3" id="Folie_3"/>
                    <figcaption class="page__number__box">
                        <svg class="page__number" viewBox="0 0 45 30" version="1.1" baseProfile="full" xmlns="https://www.w3.org/2000/svg">
                            <text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle">3/4</text>
                        </svg>
                    </figcaption>
                </figure>
            </li>
            <li class="slider__slide">
                <figure class="slider__page">
                    <img src="{{ path '/assets/example-content/beispiel-praesentation-4.jpg'}}" alt="Folie 4" id="Folie_4"/>
                    <figcaption class="page__number__box">
                        <svg class="page__number" viewBox="0 0 45 30" version="1.1" baseProfile="full" xmlns="https://www.w3.org/2000/svg">
                            <text x="50%" y="55%" dominant-baseline="middle" text-anchor="middle">4/4</text>
                        </svg>
                    </figcaption>
                </figure>
            </li>
        </ul>
    </div>
    <div class="slider__instructions">
        <p class="instructions--touch">Nach links wischen, um ggf. weitere Folien zu sehen</p>
        <div class="instructions__no-touch">
            <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>
    </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: 0.5px;
      border-style: solid;
      border-color: $brand-muted;
      margin-bottom: 0;
      line-height: 0;
    }
    
    .slider:focus {
      outline: 4px solid $brand-secondary-75;
    }
    
    .page__number__box {
      position: absolute;
      top: 3%;
      width: 4%;
      margin-left: 94%;
    }
    
    .page__number {
      @extend %heading-font-regular;
    
      display: inline-block;
      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:not(:hover)+.slider__instructions .instructions--focus,
    .slider:hover:not(:focus)+.slider__instructions .instructions--hover {
      display: block;
    }
    
    .slider:hover:focus+.slider__instructions .instructions--hover-and-focus {
      display: block;
    }
    
    .instructions--touch-active .instructions__no-touch {
      /* 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.4 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.