slider

// src/components/elements/slider/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /elements/slider
type: object
required:
  - label
  - slides
additionalProperties: false
properties:
  label:
    type: string
  slides:
    type: array
    items:
      type: string
      format: html

// src/components/elements/slider/mocks.yaml

$hidden: true
label: Slider
$variants:
  - $name: few slides
    slides:
      - <div class="Slider-mockSlide">Slide 1</div>
      - <div class="Slider-mockSlide">Slide 2</div>
      - <div class="Slider-mockSlide">Slide 3</div>
  - $name: many slides
    slides:
      - <div class="Slider-mockSlide">Slide 1</div>
      - <div class="Slider-mockSlide">Slide 2</div>
      - <div class="Slider-mockSlide">Slide 3</div>
      - <div class="Slider-mockSlide">Slide 4</div>
      - <div class="Slider-mockSlide">Slide 5</div>
      - <div class="Slider-mockSlide">Slide 6</div>
      - <div class="Slider-mockSlide">Slide 7</div>
      - <div class="Slider-mockSlide">Slide 8</div>
  - $name: full width slides
    slides:
      - <div class="Slider-mockSlide Slider-mockSlide--fullWidth">Slide 1</div>
      - <div class="Slider-mockSlide Slider-mockSlide--fullWidth">Slide 2</div>
      - <div class="Slider-mockSlide Slider-mockSlide--fullWidth">Slide 3</div>

// src/components/elements/slider/slider.twig

{% set id = "slider-" ~ random %}
{% set label = id ~ "-heading" %}
{% set track_id = id ~ "-track" %}

<finstral-slider
	class="Slider js-Slider"
	role="group"
	aria-roledescription="slider"
	aria-brailleroledescription="sldr"
	aria-labelledby="{{ label }}"
>
	<span id="{{ label }}" hidden>{{ heading }}</span>

	<div class="Slider-navigation">
		<button
			class="Slider-navigationButton Slider-navigationButton--previous js-Slider-navigationButton--previous"
			type="button"
			aria-label="{{ "slider.previous"|t }}"
			aria-controls="{{ track_id }}"
			disabled
		>
			{% include "@elements/icon/icon.twig" with {name: 'chevron_left'} only %}
		</button>

		<button
			class="Slider-navigationButton Slider-navigationButton--next js-Slider-navigationButton--next"
			type="button"
			aria-label="{{ "slider.next"|t }}"
			aria-controls="{{ track_id }}"
			disabled
		>
			{% include "@elements/icon/icon.twig" with {name: 'chevron_right'} only %}
		</button>
	</div>

	<div
		class="Slider-track js-Slider-track"
		id="{{ track_id }}"
		tabindex="0"
	>
		{% for slide in slides %}
			<div
				class="Slider-slide js-Slider-slide"
				role="group"
				aria-roledescription="slide"
				aria-brailleroledescription="sld"
				aria-label="{{ "slider.slideNumber"|t({'@current': loop.index, '@total': loop.length}) }}"
			>
				{{ slide|raw }}
			</div>
		{% endfor %}
	</div>
</finstral-slider>