@zplane-web/craft-licensing

Slider 

<div id="slider-48851-71706" class="slider slider--3">
    <div class="slider__offset slider__offset--start">
        <div class="progressive-blur progressive-blur--inline-start">
            <div class="progressive-blur__step"></div>
            <div class="progressive-blur__step"></div>
            <div class="progressive-blur__step"></div>
            <div class="progressive-blur__step"></div>
            <div class="progressive-blur__step"></div>
            <div class="progressive-blur__step"></div>
            <div class="progressive-blur__step"></div>
            <div class="progressive-blur__step"></div>
        </div>
    </div>

    <div class="slider__items" id="slider-48851-71706-items">
        <div class="slider__item">

            <div id="slider-48851-71706-item-1" class="teaser has-underline">
                <div class="teaser__inner">
                    <div class="teaser__image">
                        <picture class="image">
                            <img class="image__img" src="https://bildermangel.de/848x512/fe7c09/130f26.webp" loading="lazy" />
                        </picture>
                    </div>

                    <div class="teaser__content">
                        <time class="teaser__date" datetime="2024-11-21">November 21, 2024</time>

                        <a class="teaser__headline u-overlay-link" href="#">
                            <span class="teaser__headline-text">
                                <h1 class="headline" data-headline-size="6"><span class="headline__text u-underline">An Interview with Jay-Z Producer and Music Teacher, Ski Beatz</span></h1>
                            </span><span class="teaser__headline-icon">&#65279;<svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                                    <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-right"></use>
                                </svg></span></a>

                        <div class="teaser__description">
                            <p>Ski Beatz shares his introduction to Hip-Hop, pivotal moments in his career, his love of the Akai MPC platform, and much more.</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slider__item">

            <div id="slider-48851-71706-item-2" class="teaser has-underline">
                <div class="teaser__inner">
                    <div class="teaser__image">
                        <picture class="image">
                            <img class="image__img" src="https://bildermangel.de/848x512/fe7c09/130f26.webp" loading="lazy" />
                        </picture>
                    </div>

                    <div class="teaser__content">
                        <time class="teaser__date" datetime="2024-11-21">November 21, 2024</time>

                        <a class="teaser__headline u-overlay-link" href="#">
                            <span class="teaser__headline-text">
                                <h1 class="headline" data-headline-size="6"><span class="headline__text u-underline">An Interview with Jay-Z Producer and Music Teacher, Ski Beatz</span></h1>
                            </span><span class="teaser__headline-icon">&#65279;<svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                                    <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-right"></use>
                                </svg></span></a>

                        <div class="teaser__description">
                            <p>Ski Beatz shares his introduction to Hip-Hop, pivotal moments in his career, his love of the Akai MPC platform, and much more.</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slider__item">

            <div id="slider-48851-71706-item-3" class="teaser has-underline">
                <div class="teaser__inner">
                    <div class="teaser__image">
                        <picture class="image">
                            <img class="image__img" src="https://bildermangel.de/848x512/fe7c09/130f26.webp" loading="lazy" />
                        </picture>
                    </div>

                    <div class="teaser__content">
                        <time class="teaser__date" datetime="2024-11-21">November 21, 2024</time>

                        <a class="teaser__headline u-overlay-link" href="#">
                            <span class="teaser__headline-text">
                                <h1 class="headline" data-headline-size="6"><span class="headline__text u-underline">An Interview with Jay-Z Producer and Music Teacher, Ski Beatz</span></h1>
                            </span><span class="teaser__headline-icon">&#65279;<svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                                    <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-right"></use>
                                </svg></span></a>

                        <div class="teaser__description">
                            <p>Ski Beatz shares his introduction to Hip-Hop, pivotal moments in his career, his love of the Akai MPC platform, and much more.</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slider__item">

            <div id="slider-48851-71706-item-4" class="teaser has-underline">
                <div class="teaser__inner">
                    <div class="teaser__image">
                        <picture class="image">
                            <img class="image__img" src="https://bildermangel.de/848x512/fe7c09/130f26.webp" loading="lazy" />
                        </picture>
                    </div>

                    <div class="teaser__content">
                        <time class="teaser__date" datetime="2024-11-21">November 21, 2024</time>

                        <a class="teaser__headline u-overlay-link" href="#">
                            <span class="teaser__headline-text">
                                <h1 class="headline" data-headline-size="6"><span class="headline__text u-underline">An Interview with Jay-Z Producer and Music Teacher, Ski Beatz</span></h1>
                            </span><span class="teaser__headline-icon">&#65279;<svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                                    <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-right"></use>
                                </svg></span></a>

                        <div class="teaser__description">
                            <p>Ski Beatz shares his introduction to Hip-Hop, pivotal moments in his career, his love of the Akai MPC platform, and much more.</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="slider__item">

            <div id="slider-48851-71706-item-5" class="teaser has-underline">
                <div class="teaser__inner">
                    <div class="teaser__image">
                        <picture class="image">
                            <img class="image__img" src="https://bildermangel.de/848x512/fe7c09/130f26.webp" loading="lazy" />
                        </picture>
                    </div>

                    <div class="teaser__content">
                        <time class="teaser__date" datetime="2024-11-21">November 21, 2024</time>

                        <a class="teaser__headline u-overlay-link" href="#">
                            <span class="teaser__headline-text">
                                <h1 class="headline" data-headline-size="6"><span class="headline__text u-underline">An Interview with Jay-Z Producer and Music Teacher, Ski Beatz</span></h1>
                            </span><span class="teaser__headline-icon">&#65279;<svg class="icon icon--arrow-right" viewBox="0 0 200 200" aria-hidden="true">
                                    <use xlink:href="/assets/icons/icons.dcaca1c147.svg#arrow-right"></use>
                                </svg></span></a>

                        <div class="teaser__description">
                            <p>Ski Beatz shares his introduction to Hip-Hop, pivotal moments in his career, his love of the Akai MPC platform, and much more.</p>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="slider__offset slider__offset--end">
        <div class="progressive-blur progressive-blur--inline-end">
            <div class="progressive-blur__step"></div>
            <div class="progressive-blur__step"></div>
            <div class="progressive-blur__step"></div>
            <div class="progressive-blur__step"></div>
            <div class="progressive-blur__step"></div>
            <div class="progressive-blur__step"></div>
            <div class="progressive-blur__step"></div>
            <div class="progressive-blur__step"></div>
        </div>
    </div>

    <div class="slider__scrollbar">
        <div id="slider-48851-71706-scrollbar" class="scrollbar" data-scrollbar-sync="slider-48851-71706-items" data-scrollbar-item-selector=".slider__item">
            <div class="scrollbar__thumb"></div>
        </div>
    </div>
</div>
 
{% set id = id ??? html_id('slider') %}
{% set level = level ?? 1 %}

{% set slider = html_cva(
  base: 'slider',
  variants: {
    columns: {
      1: 'slider--1',
      2: 'slider--2',
      3: 'slider--3',
    },
  },
  default_variant: {
    columns: '1',
  },
) %}

<div {{ html_attributes({
  id: id,
  class: slider.apply({
    columns: columns ?? null,
  }),
}, attrs ?? {}) }}>
  <div class="slider__offset slider__offset--start">
    {% include '@progressive-blur' with {
      direction: 'inline-start',
    } only %}
  </div>

  <div class="slider__items" id="{{ 'items' | namespaceInputId(id) }}">
    {% for item in items %}
      <div class="slider__item">
        {% include item.component with item.configuration | merge({
          id: "item-#{loop.index}" | namespaceInputId(id),
          level: level,
        }) only %}
      </div>
    {% endfor %}
  </div>

  <div class="slider__offset slider__offset--end">
    {% include '@progressive-blur' with {
      direction: 'inline-end',
    } only %}
  </div>

  <div class="slider__scrollbar">
    {% include '@scrollbar' with {
      id: 'scrollbar' | namespaceInputId(id),
      sync: 'items' | namespaceInputId(id),
      itemSelector: '.slider__item',
    } only %}
  </div>
</div>
 
/* No context defined. */
  • Content: 
    .slider {
  container-name: slider;
  container-type: inline-size;
  position: relative;
}

.slider__items {
  column-gap: var(--grid-gap);
  display: flex;
  margin-block: -3rem;
  margin-inline: calc(var(--grid-offset) * -1);
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  padding-block: 3rem;
  padding-inline: var(--grid-offset);
  position: relative;
  scroll-behavior: smooth;
  scroll-padding-inline: var(--grid-offset);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  z-index: 1;

  &::-webkit-scrollbar {
    display: none;
  }
}

.slider__offset {
  inline-size: max(var(--grid-offset), 10rem);
  inset-block: 0;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.slider__offset--start {
  inset-inline-start: calc(max(var(--grid-offset), 10rem) * -1);
}

.slider__offset--end {
  inset-inline-start: 100%;
}

.slider__item {
  --_slider-columns: 1;

  flex-shrink: 0;
  inline-size: calc((100% - var(--grid-gap) * (var(--_slider-columns) - 1)) / var(--_slider-columns));
  scroll-snap-align: start;

  .slider--2 & {
    @container slider (inline-size >= 50rem) {
      --_slider-columns: 2;
    }
  }

  .slider--3 & {
    @container slider (inline-size >= 50rem) {
      --_slider-columns: 2;
    }

    @container slider (inline-size >= 70rem) {
      --_slider-columns: 3;
    }
  }
}

.slider__scrollbar {
  margin-block-start: 4rem;
}
  • URL: /components/raw/slider/slider.scss
  • Filesystem Path: src/components/4-organisms/slider/slider.scss
  • Size: 1.4 KB

No notes defined.