Slider
Different Sizes
Card is based on a paper component
This is a default colored button and it's pretty sweet
<div id="61efac704e20f9.09245658" 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="61efac704e23e">
<div class="c-slider__container">
<div class="c-slider__inner" js-slider-inner>
<!-- segment.blade.php -->
<section id="61efac704d935" class="c-segment c-segment--left c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" js-slider-slide="" data-uid="61efac704d931">
<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="61efac704d9b8" class="c-typography c-segment__title c-typography__variant--h2" data-uid="61efac704d9b5">
Base Layout
</h1>
</div>
</div>
</section>
<!-- segment.blade.php -->
<section id="61efac704db08" class="c-segment c-segment--left c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" js-slider-slide="" data-uid="61efac704db05">
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- typography.blade.php -->
<h2 id="61efac704db4f" class="c-typography c-segment__title c-typography__variant--h2" data-uid="61efac704db4c">
Base Layout
</h2>
</div>
</div>
</section>
<!-- segment.blade.php -->
<section id="61efac704dc88" class="c-segment c-segment--left c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" js-slider-slide="" data-uid="61efac704dc85">
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- typography.blade.php -->
<h2 id="61efac704dccb" class="c-typography c-segment__title c-typography__variant--h2" data-uid="61efac704dcc9">
Base Layout
</h2>
</div>
</div>
</section>
<!-- segment.blade.php -->
<section id="61efac704de01" class="c-segment c-segment--left c-segment--text-dark c-segment--height-content c-segment--text-default c-segment--alignment-top" js-slider-slide="" data-uid="61efac704ddfe">
<div class="c-segment__content o-container o-container--content o-container--keep-spacing">
<div class="c-segment__padder">
<!-- typography.blade.php -->
<h2 id="61efac704de51" class="c-typography c-segment__title c-typography__variant--h2" data-uid="61efac704de4e">
Base Layout
</h2>
</div>
</div>
</section>
</div>
</div>
<button id="61efac704e5af8.96823568" class="c-button c-slider__button c-slider__button-prev c-button__basic c-button__basic--default c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-slider-btn="prev" type="button" aria-pressed="false" data-uid="61efac704e5c0">
<span class="c-button__label">
<!-- icon.blade.php -->
<i id="61efac704e64b" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efac704e646">
chevron_left
</i>
</span>
</button>
<button id="61efac704e6ac9.67661627" class="c-button c-slider__button c-slider__button-next c-button__basic c-button__basic--default c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-slider-btn="next" type="button" aria-pressed="false" data-uid="61efac704e6b9">
<span class="c-button__label">
<!-- icon.blade.php -->
<i id="61efac704e706" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efac704e703">
chevron_right
</i>
</span>
</button>
<div class="c-slider__steppers" js-slider__stepper>
<div class="c-slider__dot"></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',
'attributeList' => [
'js-slider-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',
'attributeList' => [
'js-slider-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' => 'https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_1280_10MG.mp4',
'overlay' => 'light',
'overlay_opacity' => 'medium',
'attributeList' => [
'js-slider-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',
'attributeList' => [
'js-slider-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="61efac704fde36.94681882" 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="61efac704fdec">
<div class="c-slider__container">
<div class="c-slider__inner" js-slider-inner>
<!-- segment.blade.php -->
<section id="61efac704edaf" class="c-slider__item c-slider__item--bg-transparent c-slider__item--text-white c-slider__item--layout-center c-slider__item--hero" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="61efac704eda9" js-slider-slide>
<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="61efac704f28d" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="61efac704f289">
Base Layout
</h2>
<!-- typography.blade.php -->
<p id="61efac704f2ea" class="c-typography c-slider__item__body c-typography__variant--body" data-uid="61efac704f2e7">
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="61efac704f340" class="c-slider__item c-slider__item--bg-theme c-slider__item--text-white c-slider__item--layout-bottom" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="61efac704f33c" js-slider-slide>
<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="61efac704f3cf" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="61efac704f3cc">
Base Layout
</h2>
<!-- typography.blade.php -->
<p id="61efac704f415" class="c-typography c-slider__item__body c-typography__variant--body" data-uid="61efac704f412">
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="61efac704f466" class="c-slider__item c-slider__item--bg-none c-slider__item--layout-center" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="61efac704f462" js-slider-slide>
<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="61efac704f4ec" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="61efac704f4e9">
Base Layout
</h2>
<!-- typography.blade.php -->
<p id="61efac704f530" class="c-typography c-slider__item__body c-typography__variant--body" data-uid="61efac704f52d">
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="61efac704f580" class="c-slider__item c-slider__item--bg-white c-slider__item--text-theme c-slider__item--layout-bottom" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="61efac704f57c" js-slider-slide>
<!-- video.blade.php -->
<video id="61efac704f9d5" class="c-video c-slider__item__background--video" width="600" height="300" muted autoplay loop="1" data-uid="61efac704f9d0">
<source class="c-video__source" src="https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_1280_10MG.mp4" type="video/mp4">
<br />
<b>Notice</b>: Undefined variable: stretch in <b>/mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Notice/Notice.php</b> on line <b>18</b><br />
<!-- notice.blade.php -->
<div id="61efac704fb31" class="c-notice c-notice--info" data-uid="61efac704fb2d" aria-labelledby="notice__text__61efac704fb31">
<!-- notice__ico -->
<!-- notice__title -->
<!-- notice__text -->
<span id="notice__text__61efac704fb31" for="" class="c-notice__message">
This component is not supported by your browser.
</span>
</div>
</video>
<button id="61efac704fb841.60070968" class="c-button c-slider__item__background--video__play__btn c-button__filled c-button__filled--secondary c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-video-control="" type="button" aria-pressed="false" data-uid="61efac704fb93">
<span class="c-button__label">
<!-- icon.blade.php -->
<i id="61efac704fbe4" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efac704fbe0">
play_arrow
</i>
</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="61efac704fc39" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="61efac704fc36">
Base Layout
</h2>
<!-- typography.blade.php -->
<p id="61efac704fc7e" class="c-typography c-slider__item__body c-typography__variant--body" data-uid="61efac704fc7c">
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="61efac704fcd1" class="c-slider__item c-slider__item--bg-white c-slider__item--layout-center" style="background-position: 50% 30%;" data-uid="61efac704fccc" js-slider-slide>
<div class="c-slider__item__container">
<!-- typography.blade.php -->
<h2 id="61efac704fd60" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="61efac704fd5d">
Base Layout
</h2>
<!-- typography.blade.php -->
<p id="61efac704fda5" class="c-typography c-slider__item__body c-typography__variant--body" data-uid="61efac704fda3">
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>
<button id="61efac704fe556.51935721" class="c-button c-slider__button c-slider__button-prev c-button__basic c-button__basic--default c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-slider-btn="prev" type="button" aria-pressed="false" data-uid="61efac704fe63">
<span class="c-button__label">
<!-- icon.blade.php -->
<i id="61efac704feb1" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efac704fead">
chevron_left
</i>
</span>
</button>
<button id="61efac704fef49.60370317" class="c-button c-slider__button c-slider__button-next c-button__basic c-button__basic--default c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-slider-btn="next" type="button" aria-pressed="false" data-uid="61efac704ff01">
<span class="c-button__label">
<!-- icon.blade.php -->
<i id="61efac704ff4a" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efac704ff47">
chevron_right
</i>
</span>
</button>
<div class="c-slider__steppers" js-slider__stepper>
<div class="c-slider__dot"></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' => 'https://file-examples-com.github.io/uploads/2017/04/file_example_MP4_1280_10MG.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="61efac70503472.51132171" 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="61efac7050350">
<div class="c-slider__container">
<div class="c-slider__inner" js-slider-inner>
<!-- segment.blade.php -->
<section id="61efac705021e" class="c-slider__item c-slider__item--bg-transparent c-slider__item--text-white c-slider__item--layout-center c-slider__item--hero" style="background-image: url('https://picsum.photos/1080/720'); background-position: 50% 30%;" data-uid="61efac7050219" js-slider-slide>
<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="61efac70502af" class="c-typography c-slider__item__heading c-typography__variant--h2" data-uid="61efac70502ac">
Base Layout
</h2>
<!-- typography.blade.php -->
<p id="61efac7050308" class="c-typography c-slider__item__body c-typography__variant--body" data-uid="61efac7050305">
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>
<button id="61efac70503b56.50726994" class="c-button c-slider__button c-slider__button-prev c-button__basic c-button__basic--default c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-slider-btn="prev" type="button" aria-pressed="false" data-uid="61efac70503c4">
<span class="c-button__label">
<!-- icon.blade.php -->
<i id="61efac7050412" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efac705040e">
chevron_left
</i>
</span>
</button>
<button id="61efac70504541.09419712" class="c-button c-slider__button c-slider__button-next c-button__basic c-button__basic--default c-button__icon-size--md ripple ripple--before c-button--icon-only" href="" target="_top" js-slider-btn="next" type="button" aria-pressed="false" data-uid="61efac7050461">
<span class="c-button__label">
<!-- icon.blade.php -->
<i id="61efac70504a9" class="c-icon c-icon--size-md material-icons" translate="no" role="img" alt="" data-uid="61efac70504a6">
chevron_right
</i>
</span>
</button>
<div class="c-slider__steppers" js-slider__stepper>
<div class="c-slider__dot"></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
@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 |
| shadow | true | boolean | - | - |
| 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. |