# 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.