Slider

Ready

HTML
View
Context
Assets
Info
Notes


        
        <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. */

File:

Content:


                                touch-detection {
  display: block;
}

.slider {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: block;
}

.slider__all {
  @extend %list-unstyled;

  position: relative;
  display: flex;
  margin: 0;
}

.slider__slide {
  scroll-snap-align: center;
  display: block;
  flex: 0 0 100%;
}

.slider__page {
  margin-bottom: 0;

  line-height: 0;

  border-color: $brand-muted;
  border-style: solid;
  border-width: 0.5px;
}

.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;
  font-size: $font-size-xxs;
  background: rgba(247, 247, 247, 0.7);
}

.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/slider/_slider.scss
Size: 1.5 KB

Content:


                                export default class TouchDetection extends HTMLElement {
  connectedCallback() {
    function touched() {
      document.body.classList.add('instructions--touch-active')
      window.removeEventListener('touchstart', touched, false)
    }

    window.addEventListener('touchstart', touched, false)
  }
}

URL: /components/raw/slider/touch-detection.js
Filesystem Path: components/04-molecules/slider/touch-detection.js
Size: 305 Bytes

Handle: @slider
Preview:
- With layout
- Component only
Filesystem Path: components/04-molecules/slider/slider.html

No notes defined.