Slider

Different Sizes

Base Layout

Base Layout

Base Layout

Base Layout

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
@endslider

Different Sizes

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

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
@endslider

Single slide

Base Layout

Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!

<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

@endslider

Blade component parameters

Key Default value Type Available values Description
showStepper true boolean - Option to hide or show stepper.
autoSlide true boolean - If set to true, slider will auto slide with default delay. Can also receive an int to set delay in seconds
peekSlides false boolean - Adds some padding to show a peek of next and previous slides
navigationHover true boolean - Only show navigation when hovering over the slider
ratio 16:9 string - The size ratio of the slider
repeatSlide 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.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Slider/slider.json