Slider
Using the slider item component
By using the slider item component you can create a slider with ease
<div class="c-slider splide u-visibility--visible c-slider--16-9 c-slider__navigation--hover c-slider--shadow c-slider--has-stepper" data-step="0" data-js-slider="0" data-js-slider-index="0" data-slider-loop="1" data-slider-gap="2" data-js-slider-buttons="sider_69b75e2eb1ac4113683837" id="sider_69b75e2eb1ac4113683837" data-uid="69b75e2eb1ad5">
<div class="c-slider__arrows" id="slider_sider_69b75e2eb1ac4113683837">
<button class="c-button c-slider__arrow c-slider__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-prev="1" aria-label="keyboard_arrow_left" type="button" data-uid="69b75e2eb1b33">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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 material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69b75e2eb1b67">
</span>
</span>
</span> </button> <button class="c-button c-slider__arrow c-slider__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-next="1" aria-label="keyboard_arrow_right" type="button" data-uid="69b75e2eb1ba0">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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 material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69b75e2eb1bcf">
</span>
</span>
</span> </button></div>
<div class="c-slider__container splide__track">
<div class="c-slider__inner splide__list" data-js-slider-inner>
<!-- 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 c-slider__item--hero" data-uid="69b75e2eb1108">
<!-- image.blade.php -->
<figure class="c-image c-slider__item__image c-image--cover" data-uid="69b75e2eb11ad">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/1080/720"
alt=""
></div> </figure>
<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="69b75e2eb1276">
Base Layout
</h1>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="69b75e2eb12ae">
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>
<a class="c-button c-slider__item__cta c-button__filled c-button__filled--default c-button--md" href="https://www.helsingborg.se" target="_top" aria-label="Read more" data-uid="69b75e2eb1322">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--arrow-forward c-icon--material c-icon--material-arrow_forward material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="arrow_forward" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69b75e2eb147e">
</span>
</span>
<span class="c-button__label-text ">
Read more
</span>
</span> </a>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--darkest c-slider__item--layout-bottom c-slider__item--overlay-none" data-uid="69b75e2eb14dc">
<!-- image.blade.php -->
<figure class="c-image c-slider__item__image c-image--cover" data-uid="69b75e2eb1529">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/1080/720"
alt=""
></div> </figure>
<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="69b75e2eb159b">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="69b75e2eb15c9">
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>
<a class="c-button c-slider__item__cta c-button__filled c-button__filled--default c-button--md" href="https://www.helsingborg.se" target="_top" aria-label="Read more" data-uid="69b75e2eb1603">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<span class="c-icon c-icon--arrow-forward c-icon--material c-icon--material-arrow_forward material-symbols material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="arrow_forward" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69b75e2eb163d">
</span>
</span>
<span class="c-button__label-text ">
Read more
</span>
</span> </a>
</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" data-uid="69b75e2eb1682">
<!-- image.blade.php -->
<figure class="c-image c-slider__item__image c-image--cover" data-uid="69b75e2eb16c5">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/1080/720"
alt=""
></div> </figure>
<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="69b75e2eb1739">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="69b75e2eb1767">
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--layout-bottom c-slider__item--overlay-none" data-js-slider-video="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" data-uid="69b75e2eb179f">
<!-- video.blade.php -->
<video class="c-video c-slider__item__background--video" width="600" height="300" muted autoplay loop="1" data-uid="69b75e2eb182e">
<source class="c-video__source" src="#" type="video/mp4">
<!-- notice.blade.php -->
<div class="c-notice c-notice--warning" id="id_69b75e2eb1892" data-uid="69b75e2eb18a2" aria-labelledby="notice__text__id_69b75e2eb1892">
<span id="notice__text__id_69b75e2eb1892" data-js-notice-message="true" class="c-notice__message">
This component is not supported by your browser.
</span>
</div>
</video>
<!-- Play/pause button -->
<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" js-video-control="" aria-label="play_arrow" type="button" data-uid="69b75e2eb18e0">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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 material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="play_arrow" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69b75e2eb1913">
</span>
</span>
</span> </button> <!-- image.blade.php -->
<figure class="c-image c-slider__item__image c-image--cover" data-uid="69b75e2eb195d">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/1080/720"
alt=""
></div> </figure>
<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="69b75e2eb19bd">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="69b75e2eb19e5">
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" data-uid="69b75e2eb1a19">
<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="69b75e2eb1a44">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="69b75e2eb1a6a">
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',
'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',
'image' => 'https://picsum.photos/1080/720',
'heroStyle' => true,
'cta' => [
'title' => 'Read more',
'href' => 'https://www.helsingborg.se',
]
])
@endslider__item
@slider__item([
'title' => 'Base Layout',
'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',
'image' => 'https://picsum.photos/1080/720',
'cta' => [
'title' => 'Read more',
'href' => 'https://www.helsingborg.se',
]
])
@endslider__item
@slider__item([
'title' => 'Base Layout',
'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',
'image' => 'https://picsum.photos/1080/720',
'overlay' => 'light',
])
@endslider__item
@slider__item([
'title' => 'Base Layout',
'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',
'image' => 'https://picsum.photos/1080/720',
'video' => 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
])
@endslider__item
@slider__item([
'title' => 'Base Layout',
'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
@endsliderSingle slide
<div class="c-slider splide u-visibility--visible c-slider--16-9 c-slider__navigation--hover c-slider--shadow c-slider--has-stepper" data-step="0" data-js-slider="0" data-js-slider-index="0" data-slider-loop="1" data-slider-gap="2" data-js-slider-buttons="sider_69b75e2eb1d35571116823" id="sider_69b75e2eb1d35571116823" data-uid="69b75e2eb1d42">
<div class="c-slider__arrows" id="slider_sider_69b75e2eb1d35571116823">
<button class="c-button c-slider__arrow c-slider__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-prev="1" aria-label="keyboard_arrow_left" type="button" data-uid="69b75e2eb1d85">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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 material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69b75e2eb1db6">
</span>
</span>
</span> </button> <button class="c-button c-slider__arrow c-slider__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-next="1" aria-label="keyboard_arrow_right" type="button" data-uid="69b75e2eb1dee">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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 material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69b75e2eb1e1c">
</span>
</span>
</span> </button></div>
<div class="c-slider__container splide__track">
<div class="c-slider__inner splide__list" data-js-slider-inner>
<!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--transparent c-slider__item--layout-center c-slider__item--overlay-none c-slider__item--hero" data-uid="69b75e2eb1c47">
<!-- image.blade.php -->
<figure class="c-image c-slider__item__image c-image--cover" data-uid="69b75e2eb1c84">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/720/720"
alt=""
></div> </figure>
<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="69b75e2eb1ce5">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="69b75e2eb1d10">
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',
'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',
'image' => 'https://picsum.photos/720/720',
'heroStyle' => true
])
@endslider__item
@endsliderRepeat slide
<div class="c-slider splide u-visibility--visible c-slider--16-9 c-slider__navigation--hover c-slider--shadow c-slider--has-stepper" data-step="0" data-js-slider="0" data-js-slider-index="0" data-slider-loop="1" data-slider-gap="2" data-js-slider-buttons="sider_69b75e2eb248e139953020" id="sider_69b75e2eb248e139953020" data-uid="69b75e2eb249c">
<div class="c-slider__arrows" id="slider_sider_69b75e2eb248e139953020">
<button class="c-button c-slider__arrow c-slider__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-prev="1" aria-label="keyboard_arrow_left" type="button" data-uid="69b75e2eb24eb">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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 material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69b75e2eb2521">
</span>
</span>
</span> </button> <button class="c-button c-slider__arrow c-slider__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-next="1" aria-label="keyboard_arrow_right" type="button" data-uid="69b75e2eb2560">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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 material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69b75e2eb2592">
</span>
</span>
</span> </button></div>
<div class="c-slider__container splide__track">
<div class="c-slider__inner splide__list" data-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--layout-center c-slider__item--overlay-dark c-slider__item--hero" data-uid="69b75e2eb1e8c">
<!-- image.blade.php -->
<figure class="c-image c-slider__item__image c-image--cover" data-uid="69b75e2eb1ec8">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/1080/720"
alt=""
></div> </figure>
<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="69b75e2eb1f44">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="69b75e2eb1f70">
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--layout-bottom c-slider__item--overlay-light" data-uid="69b75e2eb1fa8">
<!-- image.blade.php -->
<figure class="c-image c-slider__item__image c-image--cover" data-uid="69b75e2eb1ff5">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/1080/720"
alt=""
></div> </figure>
<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="69b75e2eb204f">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="69b75e2eb2076">
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" data-uid="69b75e2eb20a6">
<!-- image.blade.php -->
<figure class="c-image c-slider__item__image c-image--cover" data-uid="69b75e2eb20de">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/1080/720"
alt=""
></div> </figure>
<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="69b75e2eb214e">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="69b75e2eb2178">
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-bottom c-slider__item--overlay-none" data-js-slider-video="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" data-uid="69b75e2eb21ae">
<!-- video.blade.php -->
<video class="c-video c-slider__item__background--video" width="600" height="300" muted autoplay loop="1" data-uid="69b75e2eb21f7">
<source class="c-video__source" src="#" type="video/mp4">
<!-- notice.blade.php -->
<div class="c-notice c-notice--warning" id="id_69b75e2eb2223" data-uid="69b75e2eb222c" aria-labelledby="notice__text__id_69b75e2eb2223">
<span id="notice__text__id_69b75e2eb2223" data-js-notice-message="true" class="c-notice__message">
This component is not supported by your browser.
</span>
</div>
</video>
<!-- Play/pause button -->
<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" js-video-control="" aria-label="play_arrow" type="button" data-uid="69b75e2eb2261">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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 material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="play_arrow" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69b75e2eb2292">
</span>
</span>
</span> </button> <!-- image.blade.php -->
<figure class="c-image c-slider__item__image c-image--cover" data-uid="69b75e2eb22da">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/1080/720"
alt=""
></div> </figure>
<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="69b75e2eb233e">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="69b75e2eb2365">
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" data-uid="69b75e2eb2396">
<!-- image.blade.php -->
<figure class="c-image c-slider__item__image c-image--cover" data-uid="69b75e2eb23cf">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/1080/720"
alt=""
></div> </figure>
<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="69b75e2eb243b">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="69b75e2eb2465">
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',
'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',
'textAlignment' => 'center',
'image' => 'https://picsum.photos/1080/720',
'heroStyle' => true
])
@endslider__item
@slider__item([
'title' => 'Base Layout',
'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',
'image' => 'https://picsum.photos/1080/720',
])
@endslider__item
@slider__item([
'title' => 'Base Layout',
'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',
'image' => 'https://picsum.photos/1080/720',
'overlay' => 'light',
])
@endslider__item
@slider__item([
'title' => 'Base Layout',
'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',
'image' => 'https://picsum.photos/1080/720',
'video' => 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
])
@endslider__item
@slider__item([
'title' => 'Base Layout',
'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',
'image' => 'https://picsum.photos/1080/720',
])
@endslider__item
@endsliderButton styling
Styling the buttons
<div class="c-slider splide u-visibility--visible c-slider--16-9 c-slider__navigation--hover c-slider--shadow c-slider--has-stepper" data-step="0" data-js-slider="0" data-js-slider-index="0" data-slider-loop="1" data-slider-gap="2" data-js-slider-buttons="sider_69b75e2eb28a7625005493" id="sider_69b75e2eb28a7625005493" data-uid="69b75e2eb28b7">
<div class="c-slider__arrows" id="slider_sider_69b75e2eb28a7625005493">
<button class="c-button c-slider__arrow c-slider__arrow--prev c-button__outlined c-button__outlined--secondary c-button--md c-button--icon-only" data-js-slider-prev="1" aria-label="keyboard_arrow_left" type="button" data-uid="69b75e2eb2903">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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 material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69b75e2eb293b">
</span>
</span>
</span> </button> <button class="c-button c-slider__arrow c-slider__arrow--next c-button__outlined c-button__outlined--secondary c-button--md c-button--icon-only" data-js-slider-next="1" aria-label="keyboard_arrow_right" type="button" data-uid="69b75e2eb2979">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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 material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69b75e2eb29ad">
</span>
</span>
</span> </button></div>
<div class="c-slider__container splide__track">
<div class="c-slider__inner splide__list" data-js-slider-inner>
<!-- 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" data-uid="69b75e2eb2613">
<!-- image.blade.php -->
<figure class="c-image c-slider__item__image c-image--cover" data-uid="69b75e2eb2656">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/1080/720"
alt=""
></div> </figure>
<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="69b75e2eb26c0">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="69b75e2eb2745">
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-bottom c-slider__item--overlay-none" data-uid="69b75e2eb2788">
<!-- image.blade.php -->
<figure class="c-image c-slider__item__image c-image--cover" data-uid="69b75e2eb27de">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/1080/720"
alt=""
></div> </figure>
<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="69b75e2eb2852">
Base Layout
</h2>
<!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-slider__item__body c-typography__variant--body" data-uid="69b75e2eb287e">
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([
'image' => 'https://picsum.photos/1080/720',
'title' => 'Base Layout',
'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'
])
@endslider__item
@slider__item([
'title' => 'Base Layout',
'image' => 'https://picsum.photos/1080/720',
'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'
])
@endslider__item
@endsliderSlider with Cards
<div class="c-slider splide u-visibility--visible c-slider--16-9 c-slider__navigation--hover c-slider--shadow" data-slides-per-page="4" data-step="0" data-js-slider="0" data-js-slider-index="0" data-slider-loop="1" data-slider-gap="2" data-js-slider-buttons="sider_69b75e2eb34df712373021" id="sider_69b75e2eb34df712373021" data-uid="69b75e2eb34ed">
<div class="c-slider__arrows" id="slider_sider_69b75e2eb34df712373021">
<button class="c-button c-slider__arrow c-slider__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-prev="1" aria-label="keyboard_arrow_left" type="button" data-uid="69b75e2eb3531">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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 material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69b75e2eb3566">
</span>
</span>
</span> </button> <button class="c-button c-slider__arrow c-slider__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-next="1" aria-label="keyboard_arrow_right" type="button" data-uid="69b75e2eb359e">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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 material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69b75e2eb35cd">
</span>
</span>
</span> </button></div>
<div class="c-slider__container splide__track">
<div class="c-slider__inner splide__list" data-js-slider-inner>
<!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-center" data-uid="69b75e2eb2c87">
<div class="c-slider__item__container">
<!-- card.blade.php -->
<a class="c-card u-color__text--info c-card--focus-inset c-card--has-image c-card--action c-card--ratio-16-9" href="https://www.helsingborg.se" aria-label="Card #0 - Lorem ipsum dolor sit amet," data-uid="69b75e2eb2a78">
<div class="c-card__paint-container">
<div class="c-card__image-container">
<!-- image.blade.php -->
<figure class="c-image c-card__image c-image--cover" data-uid="69b75e2eb2ae9">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/seed/0/267"
alt="ALT"
></div> </figure>
</div>
<div class="c-card__body">
<!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="69b75e2eb2c05">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69b75e2eb2bd7">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="69b75e2eb2b84">
Card #0
</h2>
</div>
</div> <!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="69b75e2eb2c4b">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p> </div>
</div>
</a>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-center" data-uid="69b75e2eb30c8">
<div class="c-slider__item__container">
<!-- card.blade.php -->
<a class="c-card u-color__text--info c-card--focus-inset c-card--has-image c-card--action c-card--ratio-16-9" href="https://www.helsingborg.se" aria-label="Card #1 - Lorem ipsum dolor sit amet," data-uid="69b75e2eb2cc5">
<div class="c-card__paint-container">
<div class="c-card__image-container">
<!-- image.blade.php -->
<figure class="c-image c-card__image c-image--cover" data-uid="69b75e2eb2d12">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/seed/1/267"
alt="ALT"
></div> </figure>
</div>
<div class="c-card__body">
<!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="69b75e2eb2de0">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69b75e2eb2db8">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="69b75e2eb2d90">
Card #1
</h2>
</div>
</div> <!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="69b75e2eb2e18">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p> </div>
</div>
</a>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-center" data-uid="69b75e2eb32f5">
<div class="c-slider__item__container">
<!-- card.blade.php -->
<a class="c-card u-color__text--info c-card--focus-inset c-card--has-image c-card--action c-card--ratio-16-9" href="https://www.helsingborg.se" aria-label="Card #2 - Lorem ipsum dolor sit amet," data-uid="69b75e2eb3139">
<div class="c-card__paint-container">
<div class="c-card__image-container">
<!-- image.blade.php -->
<figure class="c-image c-card__image c-image--cover" data-uid="69b75e2eb3193">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/seed/2/267"
alt="ALT"
></div> </figure>
</div>
<div class="c-card__body">
<!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="69b75e2eb3273">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69b75e2eb3249">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="69b75e2eb321c">
Card #2
</h2>
</div>
</div> <!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="69b75e2eb32ba">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p> </div>
</div>
</a>
</div>
</section>
<!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-center" data-uid="69b75e2eb34b6">
<div class="c-slider__item__container">
<!-- card.blade.php -->
<a class="c-card u-color__text--info c-card--focus-inset c-card--has-image c-card--action c-card--ratio-16-9" href="https://www.helsingborg.se" aria-label="Card #3 - Lorem ipsum dolor sit amet," data-uid="69b75e2eb3330">
<div class="c-card__paint-container">
<div class="c-card__image-container">
<!-- image.blade.php -->
<figure class="c-image c-card__image c-image--cover" data-uid="69b75e2eb337c">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/seed/3/267"
alt="ALT"
></div> </figure>
</div>
<div class="c-card__body">
<!-- group.blade.php -->
<div class="c-group c-card__heading-container c-group--horizontal c-group--justify-content-space-between c-group--align-items-center" data-uid="69b75e2eb3447">
<!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="69b75e2eb3420">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-card__heading u-margin__y--0 c-typography__variant--h3" data-uid="69b75e2eb33f7">
Card #3
</h2>
</div>
</div> <!-- typography.blade.php (hasSeenH1) original: p -->
<p class="c-typography c-card__content c-typography__variant--p" data-uid="69b75e2eb347f">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p> </div>
</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',
'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
@endsliderSlider with Segment
<div class="c-slider c-slider--post splide u-visibility--visible c-slider--16-9 c-slider__navigation--hover c-slider--shadow" data-slides-per-page="1" data-step="0" data-js-slider="0" data-js-slider-index="0" data-slider-gap="2" data-js-slider-buttons="sider_69b75e2eb419f784177305" id="sider_69b75e2eb419f784177305" data-uid="69b75e2eb41ad">
<div class="c-slider__arrows" id="slider_sider_69b75e2eb419f784177305">
<button class="c-button c-slider__arrow c-slider__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-prev="1" aria-label="keyboard_arrow_left" type="button" data-uid="69b75e2eb41ef">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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 material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_left" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69b75e2eb421f">
</span>
</span>
</span> </button> <button class="c-button c-slider__arrow c-slider__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" data-js-slider-next="1" aria-label="keyboard_arrow_right" type="button" data-uid="69b75e2eb427a">
<span class="c-button__label"> <span class="c-button__loader"></span>
<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 material-symbols-rounded material-symbols-sharp material-symbols-outlined c-icon--size-md" aria-hidden="false" data-material-symbol="keyboard_arrow_right" role="img" data-nosnippet="" translate="no" aria-label="Icon: Undefined" data-uid="69b75e2eb42ae">
</span>
</span>
</span> </button></div>
<div class="c-slider__container splide__track">
<div class="c-slider__inner splide__list" data-js-slider-inner>
<!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-bottom" data-uid="69b75e2eb39ac">
<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="69b75e2eb368d">
<a class="c-link c-segment__image-container" aria-label="Visit: https://www.helsingborg.se" href="https://www.helsingborg.se" target="_top" data-uid="69b75e2eb3786">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-uid="69b75e2eb36df">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/seed/0/1400"
alt=""
></div> </figure>
</a>
<div class="c-segment__content">
<!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--ratio-16-9" data-uid="69b75e2eb396d">
<div class="c-card__paint-container">
<!-- 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="69b75e2eb38c7">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69b75e2eb389b">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h3" data-uid="69b75e2eb3853">
<a class="c-link" href="https://www.helsingborg.se" target="_top" data-uid="69b75e2eb381f">
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="69b75e2eb38f3">
<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" href="https://www.helsingborg.se" target="_top" aria-label="Read More" data-uid="69b75e2eb392e">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-text ">
Read More
</span>
</span> </a> </div>
</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" data-uid="69b75e2eb3c5d">
<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="69b75e2eb39f4">
<a class="c-link c-segment__image-container" aria-label="Visit: https://www.helsingborg.se" href="https://www.helsingborg.se" target="_top" data-uid="69b75e2eb3aa7">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-uid="69b75e2eb3a3a">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/seed/1/1400"
alt=""
></div> </figure>
</a>
<div class="c-segment__content">
<!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--ratio-16-9" data-uid="69b75e2eb3c20">
<div class="c-card__paint-container">
<!-- 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="69b75e2eb3b81">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69b75e2eb3b57">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h3" data-uid="69b75e2eb3b2c">
<a class="c-link" href="https://www.helsingborg.se" target="_top" data-uid="69b75e2eb3aff">
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="69b75e2eb3bab">
<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" href="https://www.helsingborg.se" target="_top" aria-label="Read More" data-uid="69b75e2eb3be3">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-text ">
Read More
</span>
</span> </a> </div>
</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" data-uid="69b75e2eb3f1f">
<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="69b75e2eb3ca1">
<a class="c-link c-segment__image-container" aria-label="Visit: https://www.helsingborg.se" href="https://www.helsingborg.se" target="_top" data-uid="69b75e2eb3d48">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-uid="69b75e2eb3ce6">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/seed/2/1400"
alt=""
></div> </figure>
</a>
<div class="c-segment__content">
<!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--ratio-16-9" data-uid="69b75e2eb3eda">
<div class="c-card__paint-container">
<!-- 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="69b75e2eb3e28">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69b75e2eb3df6">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h3" data-uid="69b75e2eb3dcb">
<a class="c-link" href="https://www.helsingborg.se" target="_top" data-uid="69b75e2eb3d9e">
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="69b75e2eb3e58">
<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" href="https://www.helsingborg.se" target="_top" aria-label="Read More" data-uid="69b75e2eb3e9e">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-text ">
Read More
</span>
</span> </a> </div>
</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" data-uid="69b75e2eb4173">
<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="69b75e2eb3f5c">
<a class="c-link c-segment__image-container" aria-label="Visit: https://www.helsingborg.se" href="https://www.helsingborg.se" target="_top" data-uid="69b75e2eb3ff1">
<!-- image.blade.php -->
<figure class="c-image c-segment__image" data-uid="69b75e2eb3f99">
<div
class="c-image__image-wrapper"
>
<img
loading="lazy"
class="c-image__image"
src="https://picsum.photos/seed/3/1400"
alt=""
></div> </figure>
</a>
<div class="c-segment__content">
<!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--ratio-16-9" data-uid="69b75e2eb413d">
<div class="c-card__paint-container">
<!-- 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="69b75e2eb40b2">
<!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="69b75e2eb408d">
<!-- typography.blade.php (hasSeenH1) original: h2 -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 u-margin__top--0 c-typography__variant--h3" data-uid="69b75e2eb4066">
<a class="c-link" href="https://www.helsingborg.se" target="_top" data-uid="69b75e2eb403e">
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="69b75e2eb40d7">
<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" href="https://www.helsingborg.se" target="_top" aria-label="Read More" data-uid="69b75e2eb4108">
<span class="c-button__label"> <span class="c-button__loader"></span>
<span class="c-button__label-text ">
Read More
</span>
</span> </a> </div>
</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/1400",
'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
@endsliderBlade 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 | - | False will use default buttons, otherwise pass a string of the value of data-js-slider-buttons |
| 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. |