@zplane-web/craft-licensing

Quote Slider 

<div id="quote-slider-23798-74124" class="quote-slider">
    <button class="quote-slider__button" type="button" title="Move to left" data-quote-slider="left" disabled>
        <svg class="icon icon--angle-left" viewBox="0 0 200 200" aria-hidden="true">
            <use xlink:href="/assets/icons/icons.dcaca1c147.svg#angle-left"></use>
        </svg> </button>

    <div class="quote-slider__quotes">
        <div class="quote-slider__quote">

            <figure id="quote-slider-23798-74124-quote-1" class="quote quote--block" role="figure" aria-labelledby="quote-slider-23798-74124-quote-1-caption">
                <div class="quote__inner">
                    <img src="https://bildermangel.de/555x555/fe7c09/130f26.webp" width="555" height="555" class="quote__image" role="presentation" loading="lazy" alt="">

                    <div class="quote__quote-caption">
                        <blockquote class="quote__quote">Lorem ipsum dolor sit amet consectetur adipiscing elit lobortis, magnis cubilia arcu nibh a enim natoque turpis maximus nunc lacinia ante est risus ad.</blockquote>

                        <figcaption class="quote__caption" id="quote-slider-23798-74124-quote-1-caption">Lorem ipsum dolor</figcaption>

                    </div>
                </div>
            </figure>
        </div>
        <div class="quote-slider__quote">

            <figure id="quote-slider-23798-74124-quote-2" class="quote quote--block" role="figure" aria-labelledby="quote-slider-23798-74124-quote-2-caption">
                <div class="quote__inner">
                    <img src="https://bildermangel.de/555x555/fe7c09/130f26.webp" width="555" height="555" class="quote__image" role="presentation" loading="lazy" alt="">

                    <div class="quote__quote-caption">
                        <blockquote class="quote__quote">Lorem ipsum dolor sit amet consectetur adipiscing elit lobortis, magnis cubilia arcu nibh a enim natoque turpis maximus nunc lacinia ante est risus ad.</blockquote>

                        <figcaption class="quote__caption" id="quote-slider-23798-74124-quote-2-caption">Lorem ipsum dolor</figcaption>

                    </div>
                </div>
            </figure>
        </div>
        <div class="quote-slider__quote">

            <figure id="quote-slider-23798-74124-quote-3" class="quote quote--block" role="figure" aria-labelledby="quote-slider-23798-74124-quote-3-caption">
                <div class="quote__inner">
                    <img src="https://bildermangel.de/555x555/fe7c09/130f26.webp" width="555" height="555" class="quote__image" role="presentation" loading="lazy" alt="">

                    <div class="quote__quote-caption">
                        <blockquote class="quote__quote">Lorem ipsum dolor sit amet consectetur adipiscing elit lobortis, magnis cubilia arcu nibh a enim natoque turpis maximus nunc lacinia ante est risus ad.</blockquote>

                        <figcaption class="quote__caption" id="quote-slider-23798-74124-quote-3-caption">Lorem ipsum dolor</figcaption>

                    </div>
                </div>
            </figure>
        </div>
        <div class="quote-slider__quote">

            <figure id="quote-slider-23798-74124-quote-4" class="quote quote--block" role="figure" aria-labelledby="quote-slider-23798-74124-quote-4-caption">
                <div class="quote__inner">
                    <img src="https://bildermangel.de/555x555/fe7c09/130f26.webp" width="555" height="555" class="quote__image" role="presentation" loading="lazy" alt="">

                    <div class="quote__quote-caption">
                        <blockquote class="quote__quote">Lorem ipsum dolor sit amet consectetur adipiscing elit lobortis, magnis cubilia arcu nibh a enim natoque turpis maximus nunc lacinia ante est risus ad.</blockquote>

                        <figcaption class="quote__caption" id="quote-slider-23798-74124-quote-4-caption">Lorem ipsum dolor</figcaption>

                    </div>
                </div>
            </figure>
        </div>
        <div class="quote-slider__quote">

            <figure id="quote-slider-23798-74124-quote-5" class="quote quote--block" role="figure" aria-labelledby="quote-slider-23798-74124-quote-5-caption">
                <div class="quote__inner">
                    <img src="https://bildermangel.de/555x555/fe7c09/130f26.webp" width="555" height="555" class="quote__image" role="presentation" loading="lazy" alt="">

                    <div class="quote__quote-caption">
                        <blockquote class="quote__quote">Lorem ipsum dolor sit amet consectetur adipiscing elit lobortis, magnis cubilia arcu nibh a enim natoque turpis maximus nunc lacinia ante est risus ad.</blockquote>

                        <figcaption class="quote__caption" id="quote-slider-23798-74124-quote-5-caption">Lorem ipsum dolor</figcaption>

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

    <button class="quote-slider__button" type="button" title="Move to right" data-quote-slider="right" disabled>
        <svg class="icon icon--angle-right" viewBox="0 0 200 200" aria-hidden="true">
            <use xlink:href="/assets/icons/icons.dcaca1c147.svg#angle-right"></use>
        </svg> </button>
</div>
 
{% set id = id ??? html_id('quote-slider') %}

<div {{ html_attributes({
  id,
  class: 'quote-slider',
}, attrs ?? {}) }}>
  <button {{ html_attributes({
    class: 'quote-slider__button',
    type: 'button',
    title: 'Move to left' | t('site'),
    'data-quote-slider': 'left',
    disabled: true,
  }) }}>
    {% include '@icon' with { icon: 'angle-left' } only %}
  </button>

  <div class="quote-slider__quotes">
    {% for quote in quotes %}
      <div class="quote-slider__quote">
        {% include '@quote' with {
          id: "quote-#{loop.index}" | namespaceInputId(id),
        } | merge(quote) | merge({
          block: true,
        }) only %}
      </div>
    {% endfor %}
  </div>

  <button {{ html_attributes({
    class: 'quote-slider__button',
    type: 'button',
    title: 'Move to right' | t('site'),
    'data-quote-slider': 'right',
    disabled: true,
  }) }}>
    {% include '@icon' with { icon: 'angle-right' } only %}
  </button>
</div>
 
{
  "quotes": [
    {
      "text": "Lorem ipsum dolor sit amet consectetur adipiscing elit lobortis, magnis cubilia arcu nibh a enim natoque turpis maximus nunc lacinia ante est risus ad.",
      "caption": "Lorem ipsum dolor",
      "image": {
        "src": "https://bildermangel.de/555x555/fe7c09/130f26.webp",
        "width": 555,
        "height": 555
      }
    },
    {
      "text": "Lorem ipsum dolor sit amet consectetur adipiscing elit lobortis, magnis cubilia arcu nibh a enim natoque turpis maximus nunc lacinia ante est risus ad.",
      "caption": "Lorem ipsum dolor",
      "image": {
        "src": "https://bildermangel.de/555x555/fe7c09/130f26.webp",
        "width": 555,
        "height": 555
      }
    },
    {
      "text": "Lorem ipsum dolor sit amet consectetur adipiscing elit lobortis, magnis cubilia arcu nibh a enim natoque turpis maximus nunc lacinia ante est risus ad.",
      "caption": "Lorem ipsum dolor",
      "image": {
        "src": "https://bildermangel.de/555x555/fe7c09/130f26.webp",
        "width": 555,
        "height": 555
      }
    },
    {
      "text": "Lorem ipsum dolor sit amet consectetur adipiscing elit lobortis, magnis cubilia arcu nibh a enim natoque turpis maximus nunc lacinia ante est risus ad.",
      "caption": "Lorem ipsum dolor",
      "image": {
        "src": "https://bildermangel.de/555x555/fe7c09/130f26.webp",
        "width": 555,
        "height": 555
      }
    },
    {
      "text": "Lorem ipsum dolor sit amet consectetur adipiscing elit lobortis, magnis cubilia arcu nibh a enim natoque turpis maximus nunc lacinia ante est risus ad.",
      "caption": "Lorem ipsum dolor",
      "image": {
        "src": "https://bildermangel.de/555x555/fe7c09/130f26.webp",
        "width": 555,
        "height": 555
      }
    }
  ]
}
  • Content: 
    .quote-slider {
  align-items: stretch;
  container-name: quote-slider;
  container-type: inline-size;
  display: flex;
}

.quote-slider__button {
  --icon-size: calc(var(--quote-slider-button-size, 4.4rem) - 2rem);

  align-items: center;
  color: var(--color-gray-300);
  display: flex;
  flex-shrink: 0;
  inline-size: var(--quote-slider-button-size, 4.4rem);
  justify-content: center;
  transition-property: color, opacity;

  &:not([disabled]):is(:hover, :focus-visible) {
    color: var(--color-gray-600);
  }

  &:is([disabled]) {
    opacity: 0.2;
    pointer-events: none;
  }
}

.quote-slider__quotes {
  background-color: var(--color-steel-700);
  border-radius: var(--border-radius-large);
  display: flex;
  flex-grow: 1;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-inline: contain;
  position: relative;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;

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

.quote-slider__quote {
  --quote-font-size: var(--font-size-large);
  --quote-color: var(--color-white);
  --quote-caption-color: var(--color-steel-200);
  --quote-line-height: var(--line-height-regular);

  border-inline: 1px solid var(--color-steel-600);
  flex-shrink: 0;
  inline-size: 100%;
  padding: 2.4rem;
  scroll-snap-align: start;

  &:first-child {
    border-inline-start: 0;
  }

  &:last-child {
    border-inline-end: 0;
  }

  @container quote-slider (inline-size > 70rem) {
    inline-size: 50%;
  }
}
  • URL: /components/raw/quote-slider/quote-slider.scss
  • Filesystem Path: src/components/4-organisms/quote-slider/quote-slider.scss
  • Size: 1.5 KB
  • Content: 
    import abort from '../../../javascripts/utils/abort';
import onLoad from '../../../javascripts/utils/onLoad';

onLoad<HTMLElement>('.quote-slider', ($quoteSlider) => {
  const $quotes = $quoteSlider.querySelector('.quote-slider__quotes') ?? abort();
  const $firstquote = $quotes.querySelector('.quote-slider__quote') ?? abort();
  const $leftButton = $quoteSlider.querySelector<HTMLButtonElement>('[data-quote-slider="left"]') ?? abort();
  const $rightButton = $quoteSlider.querySelector<HTMLButtonElement>('[data-quote-slider="right"]') ?? abort();

  const onScroll = () => {
    $leftButton.disabled = $quotes.scrollLeft <= $firstquote.clientWidth;
    $rightButton.disabled = $quotes.scrollLeft >= ($quotes.scrollWidth - $quotes.clientWidth - $firstquote.clientWidth);
  };

  $quotes.addEventListener('scroll', onScroll, { passive: true });
  window.addEventListener('resize', onScroll, { passive: true });

  onScroll();

  $leftButton.addEventListener('click', (event) => {
    event.preventDefault();
    $quotes.scrollBy({ left: $quotes.clientWidth * -1 });
  });

  $rightButton.addEventListener('click', (event) => {
    event.preventDefault();
    $quotes.scrollBy({ left: $quotes.clientWidth });
  });
});
  • URL: /components/raw/quote-slider/quote-slider.ts
  • Filesystem Path: src/components/4-organisms/quote-slider/quote-slider.ts
  • Size: 1.2 KB

No notes defined.