Slider
Different Sizes
Card is based on a paper component
This is a default colored button and it's pretty sweet
<div id="62becf196d5791.99066650" 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" js-slider-repeat="" data-uid="62becf196d5ab">
<div class="splide__arrows c-slider__arrows">
<button id="62becf196dacc" class="c-button splide__arrow splide__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62becf196dac5">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<i id="62becf196dbaf" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf196dba9">
keyboard_arrow_left
</i>
</span>
</span>
</button> <button id="62becf196dc1e" class="c-button splide__arrow splide__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62becf196dc19">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<i id="62becf196dc67" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf196dc63">
keyboard_arrow_right
</i>
</span>
</span>
</button> </div>
<div class="c-slider__container splide__track">
<div class="c-slider__inner splide__list" js-slider-inner>
<!-- segment.blade.php -->
<section id="62becf196cc34" class="c-segment splide__slide c-segment--left c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" data-uid="62becf196cc31">
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- typography.blade.php (promoted) -->
<h1 id="62becf196ccf9" class="c-typography c-segment__title c-typography__variant--h2" data-uid="62becf196ccf5">
Base Layout
</h1>
</div>
</div>
</section>
<!-- segment.blade.php -->
<section id="62becf196ce8a" class="c-segment splide__slide c-segment--left c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" data-uid="62becf196ce86">
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- typography.blade.php -->
<h2 id="62becf196cee5" class="c-typography c-segment__title c-typography__variant--h2" data-uid="62becf196cee2">
Base Layout
</h2>
</div>
</div>
</section>
<!-- segment.blade.php -->
<section id="62becf196d021" class="c-segment splide__slide c-segment--left c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" data-uid="62becf196d01e">
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- typography.blade.php -->
<h2 id="62becf196d066" class="c-typography c-segment__title c-typography__variant--h2" data-uid="62becf196d063">
Base Layout
</h2>
</div>
</div>
</section>
<!-- segment.blade.php -->
<section id="62becf196d1a8" class="c-segment splide__slide c-segment--left c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" data-uid="62becf196d1a5">
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- typography.blade.php -->
<h2 id="62becf196d203" class="c-typography c-segment__title c-typography__variant--h2" data-uid="62becf196d1fe">
Base Layout
</h2>
</div>
</div>
</section>
</div>
</div>
</div>@slider([
'showStepper' => true,
'autoSlide' => false,
])
@segment([
'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' => 'left',
'containerColor' => 'tertiary',
'background_image' => 'https://picsum.photos/1080/720',
'overlay' => 'light',
'overlay_opacity' => 'medium',
'classList' => [
'splide__slide'
]
])
@slot('bottom')
@button([
'text' => 'Primary filled',
'color' => 'primary',
'type' => 'filled'
])
@endbutton
@button([
'text' => 'Secondary filled',
'color' => 'secondary',
'type' => 'filled'
])
@endbutton
@button([
'text' => 'Default filled',
'color' => 'default',
'type' => 'filled'
])
@endbutton
@endslot
@endsegment
@segment([
'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' => 'left',
'containerColor' => 'tertiary',
'background_image' => 'https://picsum.photos/1080/720',
'overlay' => 'light',
'overlay_opacity' => 'medium',
'classList' => [
'splide__slide'
]
])
@slot('bottom')
@button([
'text' => 'Primary filled',
'color' => 'primary',
'type' => 'filled'
])
@endbutton
@button([
'text' => 'Secondary filled',
'color' => 'secondary',
'type' => 'filled'
])
@endbutton
@button([
'text' => 'Default filled',
'color' => 'default',
'type' => 'filled'
])
@endbutton
@endslot
@endsegment
@segment([
'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' => 'left',
'containerColor' => 'tertiary',
'background_image' => 'https://picsum.photos/1080/720',
'background_video' => 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
'overlay' => 'light',
'overlay_opacity' => 'medium',
'classList' => [
'splide__slide'
]
])
@slot('bottom')
@button([
'text' => 'Primary filled',
'color' => 'primary',
'type' => 'filled'
])
@endbutton
@button([
'text' => 'Secondary filled',
'color' => 'secondary',
'type' => 'filled'
])
@endbutton
@button([
'text' => 'Default filled',
'color' => 'default',
'type' => 'filled'
])
@endbutton
@endslot
@endsegment
@segment([
'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' => 'tertiary',
'layout' => 'left',
'overlay' => 'light',
'overlay_opacity' => 'medium',
'classList' => [
'splide__slide'
]
])
@slot('bottom')
@button([
'text' => 'Primary filled',
'color' => 'primary',
'type' => 'filled'
])
@endbutton
@button([
'text' => 'Secondary filled',
'color' => 'secondary',
'type' => 'filled'
])
@endbutton
@button([
'text' => 'Default filled',
'color' => 'default',
'type' => 'filled'
])
@endbutton
@endslot
@endsegment
@endsliderDifferent Sizes
Card is based on a paper component
This is a default colored button and it's pretty sweet
<div id="62becf196f4be5.45562282" 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" js-slider-repeat="" data-uid="62becf196f4c8">
<div class="splide__arrows c-slider__arrows">
<button id="62becf196f55c" class="c-button splide__arrow splide__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62becf196f557">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<i id="62becf196f5ae" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf196f5a9">
keyboard_arrow_left
</i>
</span>
</span>
</button> <button id="62becf196f60e" class="c-button splide__arrow splide__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62becf196f608">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<i id="62becf196f666" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf196f660">
keyboard_arrow_right
</i>
</span>
</span>
</button> </div>
<div class="c-slider__container splide__track">
<div class="c-slider__inner splide__list" js-slider-inner>
<!-- segment.blade.php -->
<section id="62becf196e2ec" class="c-slider__item splide__slide c-slider__item--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'); background-position: 50% 30%;" data-uid="62becf196e2df">
<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 -->
<h2 id="62becf196e79d" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf196e799">
Base Layout
</h2>
<!-- typography.blade.php -->
<p id="62becf196e810" class="c-typography c-slider__item__body c-typography__variant--body" data-uid="62becf196e80c">
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>
<!-- segment.blade.php -->
<section id="62becf196e87c" class="c-slider__item splide__slide c-slider__item--bg-theme c-slider__item--text-white c-slider__item--layout-bottom c-slider__item--overlay-none" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="62becf196e877">
<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 -->
<h2 id="62becf196e943" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf196e93f">
Base Layout
</h2>
<!-- typography.blade.php -->
<p id="62becf196e98d" class="c-typography c-slider__item__body c-typography__variant--body" data-uid="62becf196e98a">
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>
<!-- segment.blade.php -->
<section id="62becf196e9e4" class="c-slider__item splide__slide c-slider__item--bg-none c-slider__item--layout-center c-slider__item--overlay-light" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="62becf196e9e0">
<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 -->
<h2 id="62becf196ea8d" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf196ea8a">
Base Layout
</h2>
<!-- typography.blade.php -->
<p id="62becf196ead1" class="c-typography c-slider__item__body c-typography__variant--body" data-uid="62becf196eace">
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>
<!-- segment.blade.php -->
<section id="62becf196eb24" class="c-slider__item splide__slide c-slider__item--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'); background-position: 50% 30%;" data-uid="62becf196eb1f">
<!-- video.blade.php -->
<video id="62becf196ef36" class="c-video c-slider__item__background--video" width="600" height="300" muted autoplay loop="1" data-uid="62becf196ef30">
<source class="c-video__source" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<!-- notice.blade.php -->
<div id="62becf196f1a2" class="c-notice c-notice--info" data-uid="62becf196f19d" aria-labelledby="notice__text__62becf196f1a2">
<!-- notice__ico -->
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__62becf196f1a2" for="" class="c-notice__message">
This component is not supported by your browser.
</span>
</div>
</video>
<button id="62becf196f21b" class="c-button c-slider__item__background--video__play__btn c-button__filled c-button__filled--secondary c-button--md c-button--icon-only" href="" target="_top" js-video-control="" type="button" aria-pressed="false" data-uid="62becf196f216">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<i id="62becf196f276" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf196f270">
play_arrow
</i>
</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 -->
<h2 id="62becf196f2df" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf196f2da">
Base Layout
</h2>
<!-- typography.blade.php -->
<p id="62becf196f331" class="c-typography c-slider__item__body c-typography__variant--body" data-uid="62becf196f32e">
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>
<!-- segment.blade.php -->
<section id="62becf196f389" class="c-slider__item splide__slide c-slider__item--bg-white c-slider__item--layout-center c-slider__item--overlay-none" style="background-position: 50% 30%;" data-uid="62becf196f384">
<div class="c-slider__item__container">
<!-- typography.blade.php -->
<h2 id="62becf196f43a" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf196f437">
Base Layout
</h2>
<!-- typography.blade.php -->
<p id="62becf196f480" class="c-typography c-slider__item__body c-typography__variant--body" data-uid="62becf196f47d">
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
@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' => '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',
])
@endslider__item
@endsliderSingle slide
<div id="62becf196fab45.14331887" 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" js-slider-repeat="" data-uid="62becf196fabe">
<div class="splide__arrows c-slider__arrows">
<button id="62becf196fb51" class="c-button splide__arrow splide__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62becf196fb4c">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<i id="62becf196fb9b" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf196fb97">
keyboard_arrow_left
</i>
</span>
</span>
</button> <button id="62becf196fbea" class="c-button splide__arrow splide__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62becf196fbe6">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<i id="62becf196fc32" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf196fc2f">
keyboard_arrow_right
</i>
</span>
</span>
</button> </div>
<div class="c-slider__container splide__track">
<div class="c-slider__inner splide__list" js-slider-inner>
<!-- segment.blade.php -->
<section id="62becf196f942" class="c-slider__item splide__slide c-slider__item--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'); background-position: 50% 30%;" data-uid="62becf196f93c">
<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 -->
<h2 id="62becf196fa28" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf196fa23">
Base Layout
</h2>
<!-- typography.blade.php -->
<p id="62becf196fa75" class="c-typography c-slider__item__body c-typography__variant--body" data-uid="62becf196fa72">
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
@endsliderRepeat slide
<div id="62becf1970b187.45470484" 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" js-slider-repeat="1" data-uid="62becf1970b23">
<div class="splide__arrows c-slider__arrows">
<button id="62becf1970bbd" class="c-button splide__arrow splide__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62becf1970bb7">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<i id="62becf1970c08" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf1970c03">
keyboard_arrow_left
</i>
</span>
</span>
</button> <button id="62becf1970c54" class="c-button splide__arrow splide__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" href="" target="_top" js-toggle-trigger="" js-toggle-item="" type="button" aria-pressed="false" data-uid="62becf1970c4f">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<i id="62becf1970c98" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf1970c94">
keyboard_arrow_right
</i>
</span>
</span>
</button> </div>
<div class="c-slider__container splide__track">
<div class="c-slider__inner splide__list" js-slider-inner>
<!-- segment.blade.php -->
<section id="62becf1970289" class="c-slider__item splide__slide c-slider__item--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'); background-position: 50% 30%;" data-uid="62becf1970283">
<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 -->
<h2 id="62becf1970364" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf197035f">
Base Layout
</h2>
<!-- typography.blade.php -->
<p id="62becf19703bf" class="c-typography c-slider__item__body c-typography__variant--body" data-uid="62becf19703ba">
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>
<!-- segment.blade.php -->
<section id="62becf1970422" class="c-slider__item splide__slide c-slider__item--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'); background-position: 50% 30%;" data-uid="62becf197041d">
<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 -->
<h2 id="62becf19704d0" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf19704cd">
Base Layout
</h2>
<!-- typography.blade.php -->
<p id="62becf197051e" class="c-typography c-slider__item__body c-typography__variant--body" data-uid="62becf197051b">
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>
<!-- segment.blade.php -->
<section id="62becf1970570" class="c-slider__item splide__slide c-slider__item--bg-none c-slider__item--layout-center c-slider__item--overlay-light" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="62becf197056b">
<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 -->
<h2 id="62becf1970613" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf1970610">
Base Layout
</h2>
<!-- typography.blade.php -->
<p id="62becf197065d" class="c-typography c-slider__item__body c-typography__variant--body" data-uid="62becf1970659">
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>
<!-- segment.blade.php -->
<section id="62becf19706bf" class="c-slider__item splide__slide c-slider__item--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'); background-position: 50% 30%;" data-uid="62becf19706ba">
<!-- video.blade.php -->
<video id="62becf19707c9" class="c-video c-slider__item__background--video" width="600" height="300" muted autoplay loop="1" data-uid="62becf19707c4">
<source class="c-video__source" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
<!-- notice.blade.php -->
<div id="62becf197081d" class="c-notice c-notice--info" data-uid="62becf1970819" aria-labelledby="notice__text__62becf197081d">
<!-- notice__ico -->
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__62becf197081d" for="" class="c-notice__message">
This component is not supported by your browser.
</span>
</div>
</video>
<button id="62becf1970873" class="c-button c-slider__item__background--video__play__btn c-button__filled c-button__filled--secondary c-button--md c-button--icon-only" href="" target="_top" js-video-control="" type="button" aria-pressed="false" data-uid="62becf197086e">
<span class="c-button__label">
<span class="c-button__label-icon ">
<!-- icon.blade.php -->
<i id="62becf19708bb" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="62becf19708b6">
play_arrow
</i>
</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 -->
<h2 id="62becf1970909" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf1970906">
Base Layout
</h2>
<!-- typography.blade.php -->
<p id="62becf197094c" class="c-typography c-slider__item__body c-typography__variant--body" data-uid="62becf1970949">
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>
<!-- segment.blade.php -->
<section id="62becf19709a1" class="c-slider__item splide__slide c-slider__item--bg-white c-slider__item--layout-center c-slider__item--overlay-none" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="62becf197099c">
<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 -->
<h2 id="62becf1970a67" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="62becf1970a62">
Base Layout
</h2>
<!-- typography.blade.php -->
<p id="62becf1970ab6" class="c-typography c-slider__item__body c-typography__variant--body" data-uid="62becf1970ab3">
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
@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 | false | boolean | - | Will allow the slide to repeat its cycle |
| heroStyle | false | boolean | - | - |
| shadow | true | boolean | - | - |
| arrowButtons | {"color":"primary","style":"filled"} | array | - | - |
| 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. |