Slider
Using the slider item component
By using the slider item component you can create a slider with ease
<div class="c-slider c-slider--16-9 c-slider__navigation--hover c-slider--shadow c-slider--has-stepper" data-step="0" js-slider="0" js-slider-index="0" data-slider-loop="1" data-slider-gap="2" id="662deff27ac2a8.64370387" data-uid="662deff27ac42">
<div class="splide__arrows c-slider__arrows">
<button class="c-button splide__arrow splide__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_left" type="button" data-uid="662deff27ac8f">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="keyboard_arrow_left" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662deff27acca">
</span>
</span>
</span> </button> <button class="c-button splide__arrow splide__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_right" type="button" data-uid="662deff27ad07">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="keyboard_arrow_right" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662deff27ad3a">
</span>
</span>
</span> </button> </div>
<div class="c-slider__container splide__track">
<div class="c-slider__inner splide__list" js-slider-inner>
<!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--darkest c-slider__item--text-white c-slider__item--layout-center c-slider__item--overlay-none c-slider__item--hero" style="background-image: url('https://picsum.photos/1080/720');" aria-labeledby="662deff27a61e__heading" data-uid="662deff27a61e">
<img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
<div class="c-slider__item__container">
<!-- typography.blade.php (promoted) (hasSeenH1) original: h2 -->
<h1 class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="662deff27a6c0">
Base Layout
</h1>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="662deff27a6fe">
Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--darkest c-slider__item--text-white c-slider__item--layout-bottom c-slider__item--overlay-none" style="background-image: url('https://picsum.photos/1080/720');" aria-labeledby="662deff27a737__heading" data-uid="662deff27a737">
<img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
<div class="c-slider__item__container">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="662deff27a778">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="662deff27a7a6">
Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--transparent c-slider__item--layout-center c-slider__item--overlay-light" style="background-image: url('https://picsum.photos/1080/720');" aria-labeledby="662deff27a7d6__heading" data-uid="662deff27a7d6">
<img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
<div class="c-slider__item__container">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="662deff27a811">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="662deff27a83d">
Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--lightest c-slider__item--text-theme c-slider__item--layout-bottom c-slider__item--overlay-none" style="background-image: url('https://picsum.photos/1080/720');" data-uid="662deff27a87c">
<!-- video.blade.php -->
<video class="c-video c-slider__item__background--video" width="600" height="300" muted autoplay loop="1" data-uid="662deff27a906">
<source class="c-video__source" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<br />
<b>Warning</b>: The parameter <b>"isWarning"</b> is not recognized in the component <b>"notice"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<!-- notice.blade.php -->
<div class="c-notice c-notice--info" id="662deff27a9c7" data-uid="662deff27a9d1" aria-labelledby="notice__text__662deff27a9c7">
<!-- notice__ico -->
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__662deff27a9c7" for="" class="c-notice__message">
This component is not supported by your browser.
</span>
</div>
</video>
<button class="c-button c-slider__item__background--video__play__btn c-button__filled c-button__filled--secondary c-button--md c-button--icon-only" target="_top" js-video-control="" aria-label="play_arrow" type="button" data-uid="662deff27aa4d">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--play-arrow c-icon--material c-icon--material-play_arrow material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="play_arrow" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662deff27aab8">
</span>
</span>
</span> </button>
<img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
<div class="c-slider__item__container">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="662deff27ab01">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="662deff27ab31">
Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--darkest c-slider__item--layout-center c-slider__item--overlay-none" aria-labeledby="662deff27ab65__heading" data-uid="662deff27ab65">
<div class="c-slider__item__container">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="662deff27ab9c">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="662deff27abc8">
Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>
</div>
</section>
</div>
</div>
</div>
@slider([
'showStepper' => true,
'autoSlide' => false,
])
@slider__item([
'title' => 'Base Layout',
'sub_title' => 'This is a slightly longer title called subtitle',
'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
'layout' => 'center',
'containerColor' => 'darkest',
'textColor' => 'white',
'mobile_image' => 'https://picsum.photos/720/720',
'desktop_image' => 'https://picsum.photos/1080/720',
'heroStyle' => true
])
@endslider__item
@slider__item([
'title' => 'Base Layout',
'sub_title' => 'This is a slightly longer title called subtitle',
'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
'layout' => 'bottom',
'containerColor' => 'darkest',
'textColor' => 'white',
'mobile_image' => 'https://picsum.photos/720/720',
'desktop_image' => 'https://picsum.photos/1080/720',
])
@endslider__item
@slider__item([
'title' => 'Base Layout',
'sub_title' => 'This is a slightly longer title called subtitle',
'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
'layout' => 'center',
'containerColor' => 'transparent',
'mobile_image' => 'https://picsum.photos/720/720',
'desktop_image' => 'https://picsum.photos/1080/720',
'overlay' => 'light',
'overlay_opacity' => 'medium'
])
@endslider__item
@slider__item([
'title' => 'Base Layout',
'sub_title' => 'This is a slightly longer title called subtitle',
'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
'layout' => 'bottom',
'containerColor' => 'lightest',
'textColor' => 'theme',
'mobile_image' => 'https://picsum.photos/720/720',
'desktop_image' => 'https://picsum.photos/1080/720',
'background_video' => 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
])
@endslider__item
@slider__item([
'title' => 'Base Layout',
'sub_title' => 'This is a slightly longer title called subtitle',
'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
'containerColor' => 'darkest',
'layout' => 'center',
])
@endslider__item
@endslider
Single slide
<div class="c-slider c-slider--16-9 c-slider__navigation--hover c-slider--shadow c-slider--has-stepper" data-step="0" js-slider="0" js-slider-index="0" data-slider-loop="1" data-slider-gap="2" id="662deff27ae506.55931752" data-uid="662deff27ae5a">
<div class="splide__arrows c-slider__arrows">
<button class="c-button splide__arrow splide__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_left" type="button" data-uid="662deff27ae8f">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="keyboard_arrow_left" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662deff27aec4">
</span>
</span>
</span> </button> <button class="c-button splide__arrow splide__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_right" type="button" data-uid="662deff27aefd">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="keyboard_arrow_right" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662deff27af2e">
</span>
</span>
</span> </button> </div>
<div class="c-slider__container splide__track">
<div class="c-slider__inner splide__list" js-slider-inner>
<!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--transparent c-slider__item--text-white c-slider__item--layout-center c-slider__item--overlay-none c-slider__item--hero" style="background-image: url('https://picsum.photos/1080/720');" aria-labeledby="662deff27adb7__heading" data-uid="662deff27adb7">
<img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
<div class="c-slider__item__container">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="662deff27adf8">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="662deff27ae26">
Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>
</div>
</section>
</div>
</div>
</div>
@slider([
'showStepper' => true,
'autoSlide' => false,
])
@slider__item([
'title' => 'Base Layout',
'sub_title' => 'This is a slightly longer title called subtitle',
'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
'layout' => 'center',
'containerColor' => 'transparent',
'textColor' => 'white',
'mobile_image' => 'https://picsum.photos/720/720',
'desktop_image' => 'https://picsum.photos/1080/720',
'heroStyle' => true
])
@endslider__item
@endslider
Repeat slide
<div class="c-slider c-slider--16-9 c-slider__navigation--hover c-slider--shadow c-slider--has-stepper" data-step="0" js-slider="0" js-slider-index="0" data-slider-loop="1" data-slider-gap="2" id="662deff27b3f14.88979489" data-uid="662deff27b3fd">
<div class="splide__arrows c-slider__arrows">
<button class="c-button splide__arrow splide__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_left" type="button" data-uid="662deff27b442">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="keyboard_arrow_left" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662deff27b47c">
</span>
</span>
</span> </button> <button class="c-button splide__arrow splide__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_right" type="button" data-uid="662deff27b4ba">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="keyboard_arrow_right" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662deff27b4ef">
</span>
</span>
</span> </button> </div>
<div class="c-slider__container splide__track">
<div class="c-slider__inner splide__list" js-slider-inner>
<!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--none c-slider__item--text-align-center c-slider__item--text-white c-slider__item--layout-center c-slider__item--overlay-dark c-slider__item--hero" style="background-image: url('https://picsum.photos/1080/720');" aria-labeledby="662deff27afa5__heading" data-uid="662deff27afa5">
<img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
<div class="c-slider__item__container">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="662deff27afe4">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="662deff27b012">
Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--theme c-slider__item--text-white c-slider__item--layout-bottom c-slider__item--overlay-light" style="background-image: url('https://picsum.photos/1080/720');" aria-labeledby="662deff27b047__heading" data-uid="662deff27b047">
<img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
<div class="c-slider__item__container">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="662deff27b081">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="662deff27b0ab">
Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--none c-slider__item--layout-center c-slider__item--overlay-light" style="background-image: url('https://picsum.photos/1080/720');" aria-labeledby="662deff27b0d7__heading" data-uid="662deff27b0d7">
<img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
<div class="c-slider__item__container">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="662deff27b10e">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="662deff27b138">
Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--white c-slider__item--text-theme c-slider__item--layout-bottom c-slider__item--overlay-none" style="background-image: url('https://picsum.photos/1080/720');" data-uid="662deff27b17e">
<!-- video.blade.php -->
<video class="c-video c-slider__item__background--video" width="600" height="300" muted autoplay loop="1" data-uid="662deff27b1c6">
<source class="c-video__source" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<br />
<b>Warning</b>: The parameter <b>"isWarning"</b> is not recognized in the component <b>"notice"</b> in <b>/var/www/webroot/ROOT/vendor/helsingborg-stad/component-library/source/php/Register.php</b> on line <b>228</b><br />
<!-- notice.blade.php -->
<div class="c-notice c-notice--info" id="662deff27b22a" data-uid="662deff27b233" aria-labelledby="notice__text__662deff27b22a">
<!-- notice__ico -->
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__662deff27b22a" for="" class="c-notice__message">
This component is not supported by your browser.
</span>
</div>
</video>
<button class="c-button c-slider__item__background--video__play__btn c-button__filled c-button__filled--secondary c-button--md c-button--icon-only" target="_top" js-video-control="" aria-label="play_arrow" type="button" data-uid="662deff27b27b">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--play-arrow c-icon--material c-icon--material-play_arrow material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="play_arrow" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662deff27b2b7">
</span>
</span>
</span> </button>
<img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
<div class="c-slider__item__container">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="662deff27b2f7">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="662deff27b326">
Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--white c-slider__item--layout-center c-slider__item--overlay-none" style="background-image: url('https://picsum.photos/1080/720');" aria-labeledby="662deff27b357__heading" data-uid="662deff27b357">
<img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
<div class="c-slider__item__container">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="662deff27b394">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="662deff27b3c4">
Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>
</div>
</section>
</div>
</div>
</div>
@slider([
'showStepper' => true,
'autoSlide' => false,
'repeatSlide' => true,
])
@slider__item([
'title' => 'Base Layout',
'sub_title' => 'This is a slightly longer title called subtitle',
'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
'layout' => 'center',
'containerColor' => 'none',
'overlay' => 'dark',
'textColor' => 'white',
'textAlignment' => 'center',
'mobile_image' => 'https://picsum.photos/720/720',
'desktop_image' => 'https://picsum.photos/1080/720',
'heroStyle' => true
])
@endslider__item
@slider__item([
'title' => 'Base Layout',
'sub_title' => 'This is a slightly longer title called subtitle',
'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
'layout' => 'bottom',
'overlay' => 'light',
'containerColor' => 'theme',
'textColor' => 'white',
'mobile_image' => 'https://picsum.photos/720/720',
'desktop_image' => 'https://picsum.photos/1080/720',
])
@endslider__item
@slider__item([
'title' => 'Base Layout',
'sub_title' => 'This is a slightly longer title called subtitle',
'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
'layout' => 'center',
'containerColor' => 'none',
'mobile_image' => 'https://picsum.photos/720/720',
'desktop_image' => 'https://picsum.photos/1080/720',
'overlay' => 'light',
'overlay_opacity' => 'medium'
])
@endslider__item
@slider__item([
'title' => 'Base Layout',
'sub_title' => 'This is a slightly longer title called subtitle',
'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
'layout' => 'bottom',
'containerColor' => 'white',
'textColor' => 'theme',
'mobile_image' => 'https://picsum.photos/720/720',
'desktop_image' => 'https://picsum.photos/1080/720',
'background_video' => 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
])
@endslider__item
@slider__item([
'title' => 'Base Layout',
'sub_title' => 'This is a slightly longer title called subtitle',
'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
'containerColor' => 'white',
'layout' => 'center',
'mobile_image' => 'https://picsum.photos/720/720',
'desktop_image' => 'https://picsum.photos/1080/720',
])
@endslider__item
@endslider
Button styling
Styling the buttons
<div class="c-slider c-slider--16-9 c-slider__navigation--hover c-slider--shadow c-slider--has-stepper" data-step="0" js-slider="0" js-slider-index="0" data-slider-loop="1" data-slider-gap="2" id="662deff27b68a6.44396762" data-uid="662deff27b694">
<div class="splide__arrows c-slider__arrows">
<button class="c-button splide__arrow splide__arrow--prev c-button__outlined c-button__outlined--secondary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_left" type="button" data-uid="662deff27b6c8">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="keyboard_arrow_left" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662deff27b6fc">
</span>
</span>
</span> </button> <button class="c-button splide__arrow splide__arrow--next c-button__outlined c-button__outlined--secondary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_right" type="button" data-uid="662deff27b735">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="keyboard_arrow_right" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662deff27b766">
</span>
</span>
</span> </button> </div>
<div class="c-slider__container splide__track">
<div class="c-slider__inner splide__list" js-slider-inner>
<!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--darkest c-slider__item--text-white c-slider__item--layout-center c-slider__item--overlay-none" aria-labeledby="662deff27b575__heading" data-uid="662deff27b575">
<div class="c-slider__item__container">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="662deff27b5ac">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="662deff27b5d9">
Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--darkest c-slider__item--text-white c-slider__item--layout-bottom c-slider__item--overlay-none" aria-labeledby="662deff27b606__heading" data-uid="662deff27b606">
<div class="c-slider__item__container">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="662deff27b639">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="662deff27b662">
Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>
</div>
</section>
</div>
</div>
</div>
@slider([
'showStepper' => true,
'autoSlide' => false,
'arrowButtons' => array("color" => "secondary", "style" => "outlined")
])
@slider__item([
'title' => 'Base Layout',
'sub_title' => 'This is a slightly longer title called subtitle',
'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
'layout' => 'center',
'containerColor' => 'darkest',
'textColor' => 'white',
])
@endslider__item
@slider__item([
'title' => 'Base Layout',
'sub_title' => 'This is a slightly longer title called subtitle',
'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
'layout' => 'bottom',
'containerColor' => 'darkest',
'textColor' => 'white',
])
@endslider__item
@endslider
Slider with Cards
<div class="c-slider c-slider--16-9 c-slider__navigation--hover c-slider--shadow" data-slides-per-page="4" data-step="0" js-slider="0" js-slider-index="0" data-slider-loop="1" data-slider-gap="2" id="662deff27be5b7.14042785" data-uid="662deff27be66">
<div class="splide__arrows c-slider__arrows">
<button class="c-button splide__arrow splide__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_left" type="button" data-uid="662deff27be9a">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="keyboard_arrow_left" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662deff27becd">
</span>
</span>
</span> </button> <button class="c-button splide__arrow splide__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_right" type="button" data-uid="662deff27bf03">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="keyboard_arrow_right" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662deff27bf32">
</span>
</span>
</span> </button> </div>
<div class="c-slider__container splide__track">
<div class="c-slider__inner splide__list" js-slider-inner>
<!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--text-black c-slider__item--layout-center" aria-labeledby="662deff27ba03__heading" data-uid="662deff27ba03">
<div class="c-slider__item__container">
<!-- card.blade.php -->
<a class="c-card u-color__text--info c-card--focus-inset c-card--default c-card--has-image c-card--action c-card--ratio-4-3" href="https://www.helsingborg.se" data-uid="662deff27b83a">
<div class="c-card__image c-card__image--primary">
<div class="c-card__image-background " style="background-image:url('https://picsum.photos/seed/0/267');"></div>
</div><div class="c-card__body">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="662deff27b978">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="662deff27b943">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="662deff27b8ea">
Card #0
</h2>
</div>
</div> <!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="662deff27b9cd">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p> </div>
</a>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--text-black c-slider__item--layout-center" aria-labeledby="662deff27bb6d__heading" data-uid="662deff27bb6d">
<div class="c-slider__item__container">
<!-- card.blade.php -->
<a class="c-card u-color__text--info c-card--focus-inset c-card--default c-card--has-image c-card--action c-card--ratio-4-3" href="https://www.helsingborg.se" data-uid="662deff27ba44">
<div class="c-card__image c-card__image--primary">
<div class="c-card__image-background " style="background-image:url('https://picsum.photos/seed/1/267');"></div>
</div><div class="c-card__body">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="662deff27bb01">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="662deff27bad9">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="662deff27baae">
Card #1
</h2>
</div>
</div> <!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="662deff27bb3c">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p> </div>
</a>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--text-black c-slider__item--layout-center" aria-labeledby="662deff27bcd3__heading" data-uid="662deff27bcd3">
<div class="c-slider__item__container">
<!-- card.blade.php -->
<a class="c-card u-color__text--info c-card--focus-inset c-card--default c-card--has-image c-card--action c-card--ratio-4-3" href="https://www.helsingborg.se" data-uid="662deff27bba7">
<div class="c-card__image c-card__image--primary">
<div class="c-card__image-background " style="background-image:url('https://picsum.photos/seed/2/267');"></div>
</div><div class="c-card__body">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="662deff27bc6a">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="662deff27bc42">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="662deff27bc18">
Card #2
</h2>
</div>
</div> <!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="662deff27bca3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p> </div>
</a>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--text-black c-slider__item--layout-center" aria-labeledby="662deff27be2c__heading" data-uid="662deff27be2c">
<div class="c-slider__item__container">
<!-- card.blade.php -->
<a class="c-card u-color__text--info c-card--focus-inset c-card--default c-card--has-image c-card--action c-card--ratio-4-3" href="https://www.helsingborg.se" data-uid="662deff27bd0d">
<div class="c-card__image c-card__image--primary">
<div class="c-card__image-background " style="background-image:url('https://picsum.photos/seed/3/267');"></div>
</div><div class="c-card__body">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="662deff27bdc4">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="662deff27bd9d">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="662deff27bd73">
Card #3
</h2>
</div>
</div> <!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="662deff27bdfd">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p> </div>
</a>
</div>
</section>
</div>
</div>
</div>
@slider([
'showStepper' => false,
'autoSlide' => false,
'attributeList' => [
'data-slides-per-page' => 4
],
])
@for ($i = 0; $i < 4; $i++)
@slider__item([
'layout' => 'center',
'textColor' => 'black',
'heroStyle' => false,
'classList' => ['c-slider__item--post']
])
@card([
'link' => 'https://www.helsingborg.se',
'image' => ['src' => "https://picsum.photos/seed/$i/267", 'alt' => 'ALT'],
'heading' => "Card #$i",
'content' => "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
'classList' => ['u-color__text--info', 'c-card--focus-inset'],
])
@endcard
@endslider__item
@endfor
@endslider
Slider with Segment
<div class="c-slider c-slider--post c-slider--16-9 c-slider__navigation--hover c-slider--shadow" data-slides-per-page="1" data-step="0" js-slider="0" js-slider-index="0" data-slider-gap="2" id="662deff27c8c24.80101079" data-uid="662deff27c8cd">
<div class="splide__arrows c-slider__arrows">
<button class="c-button splide__arrow splide__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_left" type="button" data-uid="662deff27c902">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="keyboard_arrow_left" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662deff27c938">
</span>
</span>
</span> </button> <button class="c-button splide__arrow splide__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_right" type="button" data-uid="662deff27c971">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-symbols-outlined material-symbols-outlined--filled c-icon--size-md" aria-hidden="true" material-symbol="keyboard_arrow_right" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-nosnippet="" translate="no" data-uid="662deff27c9ac">
</span>
</span>
</span> </button> </div>
<div class="c-slider__container splide__track">
<div class="c-slider__inner splide__list" js-slider-inner>
<!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-bottom" aria-labeledby="662deff27c219__heading" data-uid="662deff27c219">
<div class="c-slider__item__container">
<!-- segment.blade.php -->
<section class="c-segment c-segment--slider c-segment--size-sm c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top c-segment--reverse" data-observe-resizes="" data-uid="662deff27bfe6">
<a class="c-link c-segment__image" id="" aria-label="Visit: https://www.helsingborg.se" href="https://www.helsingborg.se" target="_top" data-uid="662deff27c05a">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/seed/0/267'); background-position: 50% 50%;"></div>
</a>
<div class="c-segment__content">
<!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="662deff27c1e6">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-uid="662deff27c14f">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="662deff27c125">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h3" data-uid="662deff27c0f8">
<a class="c-link" id="" href="https://www.helsingborg.se" target="_top" data-uid="662deff27c0ca">
Card #0
</a>
</h2>
</div>
</div>
<!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-uid="662deff27c178">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="c-segment__buttons">
<a class="c-button c-button__filled c-button__filled--default c-button--md" target="_top" type="button" href="https://www.helsingborg.se" aria-label="Read More" data-uid="662deff27c1ad">
<span class="c-button__label">
<span class="c-button__label-text ">
Read More
</span>
</span> </a> </div>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></div>
</div>
</div>
</section>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-bottom" aria-labeledby="662deff27c443__heading" data-uid="662deff27c443">
<div class="c-slider__item__container">
<!-- segment.blade.php -->
<section class="c-segment c-segment--slider c-segment--size-sm c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top c-segment--reverse" data-observe-resizes="" data-uid="662deff27c25d">
<a class="c-link c-segment__image" id="" aria-label="Visit: https://www.helsingborg.se" href="https://www.helsingborg.se" target="_top" data-uid="662deff27c29a">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/seed/1/267'); background-position: 50% 50%;"></div>
</a>
<div class="c-segment__content">
<!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="662deff27c410">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-uid="662deff27c362">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="662deff27c33b">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h3" data-uid="662deff27c312">
<a class="c-link" id="" href="https://www.helsingborg.se" target="_top" data-uid="662deff27c2e8">
Card #1
</a>
</h2>
</div>
</div>
<!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-uid="662deff27c38a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="c-segment__buttons">
<a class="c-button c-button__filled c-button__filled--default c-button--md" target="_top" type="button" href="https://www.helsingborg.se" aria-label="Read More" data-uid="662deff27c3c5">
<span class="c-button__label">
<span class="c-button__label-text ">
Read More
</span>
</span> </a> </div>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></div>
</div>
</div>
</section>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-bottom" aria-labeledby="662deff27c665__heading" data-uid="662deff27c665">
<div class="c-slider__item__container">
<!-- segment.blade.php -->
<section class="c-segment c-segment--slider c-segment--size-sm c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top c-segment--reverse" data-observe-resizes="" data-uid="662deff27c488">
<a class="c-link c-segment__image" id="" aria-label="Visit: https://www.helsingborg.se" href="https://www.helsingborg.se" target="_top" data-uid="662deff27c4c8">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/seed/2/267'); background-position: 50% 50%;"></div>
</a>
<div class="c-segment__content">
<!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="662deff27c636">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-uid="662deff27c5a6">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="662deff27c57e">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h3" data-uid="662deff27c548">
<a class="c-link" id="" href="https://www.helsingborg.se" target="_top" data-uid="662deff27c51c">
Card #2
</a>
</h2>
</div>
</div>
<!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-uid="662deff27c5ce">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="c-segment__buttons">
<a class="c-button c-button__filled c-button__filled--default c-button--md" target="_top" type="button" href="https://www.helsingborg.se" aria-label="Read More" data-uid="662deff27c600">
<span class="c-button__label">
<span class="c-button__label-text ">
Read More
</span>
</span> </a> </div>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></div>
</div>
</div>
</section>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-bottom" aria-labeledby="662deff27c88c__heading" data-uid="662deff27c88c">
<div class="c-slider__item__container">
<!-- segment.blade.php -->
<section class="c-segment c-segment--slider c-segment--size-sm c-segment--card c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top c-segment--reverse" data-observe-resizes="" data-uid="662deff27c6a5">
<a class="c-link c-segment__image" id="" aria-label="Visit: https://www.helsingborg.se" href="https://www.helsingborg.se" target="_top" data-uid="662deff27c6e1">
<div class="c-segment__image " style="background-image: url('https://picsum.photos/seed/3/267'); background-position: 50% 50%;"></div>
</a>
<div class="c-segment__content">
<!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="662deff27c857">
<!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--gap-2 c-group--align-items-start" data-uid="662deff27c7ae">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="662deff27c77f">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h3" data-uid="662deff27c757">
<a class="c-link" id="" href="https://www.helsingborg.se" target="_top" data-uid="662deff27c72e">
Card #3
</a>
</h2>
</div>
</div>
<!-- typography.blade.php (hasSeenH1) original: div -->
<div class="c-typography c-segment__text c-typography__variant--div" data-uid="662deff27c7d8">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="c-segment__buttons">
<a class="c-button c-button__filled c-button__filled--default c-button--md" target="_top" type="button" href="https://www.helsingborg.se" aria-label="Read More" data-uid="662deff27c81e">
<span class="c-button__label">
<span class="c-button__label-text ">
Read More
</span>
</span> </a> </div>
<div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></div>
</div>
</div>
</section>
</div>
</section>
</div>
</div>
</div>
@slider([
'showStepper' => false,
'autoSlide' => false,
'repeatSlide' => false,
'attributeList' => [
'data-slides-per-page' => 1
],
'classList' => ['c-slider--post']
])
@for ($i = 0; $i < 4; $i++)
@slider__item([
'classList' => ['c-slider__item--post']
])
@segment([
'layout' => 'card',
'title' => "Card #$i",
'tags' => false,
'meta' => false,
'image' => "https://picsum.photos/seed/$i/267",
'buttons' => [['text' => 'Read More', 'href' => 'https://www.helsingborg.se']],
'content' => "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
'classList' => ['c-segment--slider', 'c-segment--size-sm'],
'containerAware' => true,
'reverseColumns' => true
])
@endsegment
@endslider__item
@endfor
@endslider
Blade component parameters
Key | Default value | Type | Available values | Description |
showStepper | true | boolean | - | Option to hide or show stepper. |
autoSlide | true | boolean | - | If set to true, slider will auto slide with default delay. Can also receive an int to set delay in seconds |
peekSlides | false | boolean | - | Adds some padding to show a peek of next and previous slides |
navigationHover | true | boolean | - | Only show navigation when hovering over the slider |
ratio | 16:9 | string | - | The size ratio of the slider |
repeatSlide | true | boolean | - | Will allow the slide to repeat its cycle |
heroStyle | false | boolean | - | - |
shadow | true | boolean | - | - |
customButtons | false | boolean | - | - |
arrowButtons | {"color":"primary","style":"filled"} | array | - | - |
padding | 0 | integer | - | Sets the amount of padding between slides |
gap | 2 | integer | - | Sets the amount of gap between slides |
id | string | - | The DOM id of the component. | |
classList | [] | array | - | Array containing wrapping classes array |
attributeList | [] | array | - | Array containing keys and values rendered as attributes |
containerAware | false | boolean | true/false | Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component. |