Slider

Using the slider item component

By using the slider item component you can create a slider with ease

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 class="c-slider c-slider--16-9 c-slider__navigation--hover c-slider--shadow c-slider--has-stepper" data-step="0" js-slider="0" js-slider-index="0" data-slider-loop="1" data-slider-gap="2" id="647e3dfddc9da6.53489813" data-uid="647e3dfddca2a">

            <div class="splide__arrows c-slider__arrows">
            <button class="c-button splide__arrow splide__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_left" type="button" data-uid="647e3dfddcaac">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e3dfddcaff">
        <span data-nosnippet aria-hidden="true">
                            keyboard_arrow_left
                    </span>
        </span>
            </span>
        
        
    </span> </button>            <button class="c-button splide__arrow splide__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_right" type="button" data-uid="647e3dfddcb49">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e3dfddcb86">
        <span data-nosnippet aria-hidden="true">
                            keyboard_arrow_right
                    </span>
        </span>
            </span>
        
        
    </span> </button>        </div>
    
        <div class="c-slider__container splide__track">
            <div class="c-slider__inner splide__list" js-slider-inner>
                <!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--darkest c-slider__item--text-white c-slider__item--layout-center c-slider__item--overlay-none c-slider__item--hero" style="background-image: url(&#039;https://picsum.photos/1080/720&#039;); background-position: 50% 30%;" role="img" aria-labeledby="647e3dfddb9ac__heading" data-uid="647e3dfddb9ac">
    
    
            <img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
    
            <div class="c-slider__item__container">
            

                            <!-- typography.blade.php (promoted) -->
<h1 class="c-typography c-slider__item__heading c-typography__variant--h2" id="647e3dfddb9ac__heading" data-uid="647e3dfddbc4a">
    Base Layout
</h1>            
                            <!-- typography.blade.php  -->
<p class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="647e3dfddbcb6">
    Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>            
            
                        
        </div>
    

    </section>
    <!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--darkest c-slider__item--text-white c-slider__item--layout-bottom c-slider__item--overlay-none" style="background-image: url(&#039;https://picsum.photos/1080/720&#039;); background-position: 50% 30%;" role="img" aria-labeledby="647e3dfddbcf8__heading" data-uid="647e3dfddbcf8">
    
    
            <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 class="c-typography c-slider__item__heading c-typography__variant--h2" id="647e3dfddbcf8__heading" data-uid="647e3dfddbd49">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="647e3dfddbd83">
    Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>            
            
                        
        </div>
    

    </section>
    <!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--transparent c-slider__item--layout-center c-slider__item--overlay-light" style="background-image: url(&#039;https://picsum.photos/1080/720&#039;); background-position: 50% 30%;" role="img" aria-labeledby="647e3dfddbdcf__heading" data-uid="647e3dfddbdcf">
    
    
            <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 class="c-typography c-slider__item__heading c-typography__variant--h2" id="647e3dfddbdcf__heading" data-uid="647e3dfddbe1e">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="647e3dfddbe56">
    Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>            
            
                        
        </div>
    

    </section>
    <!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--lightest c-slider__item--text-theme c-slider__item--layout-bottom c-slider__item--overlay-none" style="background-image: url(&#039;https://picsum.photos/1080/720&#039;); background-position: 50% 30%;" data-uid="647e3dfddbe97">
    
            <!-- video.blade.php -->
    <video class="c-video c-slider__item__background--video" width="600" height="300"  muted autoplay loop="1" data-uid="647e3dfddc1b0">

                                    <source class="c-video__source" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
                            
                    <!-- notice.blade.php -->
<div class="c-notice c-notice--info" data-uid="647e3dfddc3d2" aria-labelledby="notice__text__">
    
    <!-- notice__ico -->
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__" for="" class="c-notice__message">
                This component is not supported by your browser.
    </span>

</div>                    
    </video>
<button class="c-button c-slider__item__background--video__play__btn c-button__filled c-button__filled--secondary c-button--md c-button--icon-only" target="_top" js-video-control="" aria-label="play_arrow" type="button" data-uid="647e3dfddc48a">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--play-arrow c-icon--material c-icon--material-play_arrow material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e3dfddc581">
        <span data-nosnippet aria-hidden="true">
                            play_arrow
                    </span>
        </span>
            </span>
        
        
    </span> </button>    
            <img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
    
            <div class="c-slider__item__container">
            

                            <!-- typography.blade.php  -->
<h2 class="c-typography c-slider__item__heading c-typography__variant--h2" id="647e3dfddbe97__heading" data-uid="647e3dfddc61b">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="647e3dfddc66f">
    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" role="img" aria-labeledby="647e3dfddc779__heading" style="background-position: 50% 30%;" data-uid="647e3dfddc779">
    
    
    
            <div class="c-slider__item__container">
            

                            <!-- typography.blade.php  -->
<h2 class="c-typography c-slider__item__heading c-typography__variant--h2" id="647e3dfddc779__heading" data-uid="647e3dfddc7c1">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="647e3dfddc7fc">
    Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>            
            
                        
        </div>
    

    </section>
            </div>
        </div>
    
        
        
        </div>
@slider([
    'showStepper' => true,
    'autoSlide' => false,
])
    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'center',
        'containerColor' => 'darkest',
        'textColor' => 'white',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
        'heroStyle' => true
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'bottom',
        'containerColor' => 'darkest',
        'textColor' => 'white',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'center',
        'containerColor' => 'transparent',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
        'overlay' => 'light',
        'overlay_opacity' => 'medium'
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'bottom',
        'containerColor' => 'lightest',
        'textColor' => 'theme',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
        'background_video' => 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'containerColor' => 'darkest',
        'layout' => 'center',
    ])
    @endslider__item
@endslider

Single slide

<div class="c-slider c-slider--16-9 c-slider__navigation--hover c-slider--shadow c-slider--has-stepper" data-step="0" js-slider="0" js-slider-index="0" data-slider-loop="1" data-slider-gap="2" id="647e3dfddcdfe2.58233768" data-uid="647e3dfddce08">

            <div class="splide__arrows c-slider__arrows">
            <button class="c-button splide__arrow splide__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_left" type="button" data-uid="647e3dfddce47">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e3dfddce89">
        <span data-nosnippet aria-hidden="true">
                            keyboard_arrow_left
                    </span>
        </span>
            </span>
        
        
    </span> </button>            <button class="c-button splide__arrow splide__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_right" type="button" data-uid="647e3dfddcf83">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e3dfddcfc4">
        <span data-nosnippet aria-hidden="true">
                            keyboard_arrow_right
                    </span>
        </span>
            </span>
        
        
    </span> </button>        </div>
    
        <div class="c-slider__container splide__track">
            <div class="c-slider__inner splide__list" js-slider-inner>
                <!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--transparent c-slider__item--text-white c-slider__item--layout-center c-slider__item--overlay-none c-slider__item--hero" style="background-image: url(&#039;https://picsum.photos/1080/720&#039;); background-position: 50% 30%;" role="img" aria-labeledby="647e3dfddcd17__heading" data-uid="647e3dfddcd17">
    
    
            <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 class="c-typography c-slider__item__heading c-typography__variant--h2" id="647e3dfddcd17__heading" data-uid="647e3dfddcd6c">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="647e3dfddcdc6">
    Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>            
            
                        
        </div>
    

    </section>
            </div>
        </div>
    
        
        
        </div>
@slider([
    'showStepper' => true,
    'autoSlide' => false,
])
    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'center',
        'containerColor' => 'transparent',
        'textColor' => 'white',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
        'heroStyle' => true
    ])
    @endslider__item

@endslider

Repeat slide

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 class="c-slider c-slider--16-9 c-slider__navigation--hover c-slider--shadow c-slider--has-stepper" data-step="0" js-slider="0" js-slider-index="0" data-slider-loop="1" data-slider-gap="2" id="647e3dfddd9777.37636726" data-uid="647e3dfddd987">

            <div class="splide__arrows c-slider__arrows">
            <button class="c-button splide__arrow splide__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_left" type="button" data-uid="647e3dfddd9d7">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e3dfddda25">
        <span data-nosnippet aria-hidden="true">
                            keyboard_arrow_left
                    </span>
        </span>
            </span>
        
        
    </span> </button>            <button class="c-button splide__arrow splide__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_right" type="button" data-uid="647e3dfddda6e">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e3dfdddad2">
        <span data-nosnippet aria-hidden="true">
                            keyboard_arrow_right
                    </span>
        </span>
            </span>
        
        
    </span> </button>        </div>
    
        <div class="c-slider__container splide__track">
            <div class="c-slider__inner splide__list" js-slider-inner>
                <!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--none c-slider__item--text-align-center c-slider__item--text-white c-slider__item--layout-center c-slider__item--overlay-dark c-slider__item--hero" style="background-image: url(&#039;https://picsum.photos/1080/720&#039;); background-position: 50% 30%;" role="img" aria-labeledby="647e3dfddd1cf__heading" data-uid="647e3dfddd1cf">
    
    
            <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 class="c-typography c-slider__item__heading c-typography__variant--h2" id="647e3dfddd1cf__heading" data-uid="647e3dfddd222">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="647e3dfddd36c">
    Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>            
            
                        
        </div>
    

    </section>
    <!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--theme c-slider__item--text-white c-slider__item--layout-bottom c-slider__item--overlay-light" style="background-image: url(&#039;https://picsum.photos/1080/720&#039;); background-position: 50% 30%;" role="img" aria-labeledby="647e3dfddd3b2__heading" data-uid="647e3dfddd3b2">
    
    
            <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 class="c-typography c-slider__item__heading c-typography__variant--h2" id="647e3dfddd3b2__heading" data-uid="647e3dfddd40c">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="647e3dfddd453">
    Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>            
            
                        
        </div>
    

    </section>
    <!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--none c-slider__item--layout-center c-slider__item--overlay-light" style="background-image: url(&#039;https://picsum.photos/1080/720&#039;); background-position: 50% 30%;" role="img" aria-labeledby="647e3dfddd49c__heading" data-uid="647e3dfddd49c">
    
    
            <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 class="c-typography c-slider__item__heading c-typography__variant--h2" id="647e3dfddd49c__heading" data-uid="647e3dfddd4e5">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="647e3dfddd51b">
    Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>            
            
                        
        </div>
    

    </section>
    <!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--white c-slider__item--text-theme c-slider__item--layout-bottom c-slider__item--overlay-none" style="background-image: url(&#039;https://picsum.photos/1080/720&#039;); background-position: 50% 30%;" data-uid="647e3dfddd564">
    
            <!-- video.blade.php -->
    <video class="c-video c-slider__item__background--video" width="600" height="300"  muted autoplay loop="1" data-uid="647e3dfddd5b9">

                                    <source class="c-video__source" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" type="video/mp4">
                            
                    <!-- notice.blade.php -->
<div class="c-notice c-notice--info" data-uid="647e3dfddd60c" aria-labelledby="notice__text__">
    
    <!-- notice__ico -->
        
    <!-- notice__title -->
    
    <!-- notice__text -->
    <span id="notice__text__" for="" class="c-notice__message">
                This component is not supported by your browser.
    </span>

</div>                    
    </video>
<button class="c-button c-slider__item__background--video__play__btn c-button__filled c-button__filled--secondary c-button--md c-button--icon-only" target="_top" js-video-control="" aria-label="play_arrow" type="button" data-uid="647e3dfddd743">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--play-arrow c-icon--material c-icon--material-play_arrow material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e3dfddd790">
        <span data-nosnippet aria-hidden="true">
                            play_arrow
                    </span>
        </span>
            </span>
        
        
    </span> </button>    
            <img class="u-sr__only c-slider__item__image" src="https://picsum.photos/1080/720" alt=""/>
    
            <div class="c-slider__item__container">
            

                            <!-- typography.blade.php  -->
<h2 class="c-typography c-slider__item__heading c-typography__variant--h2" id="647e3dfddd564__heading" data-uid="647e3dfddd7ec">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="647e3dfddd836">
    Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>            
            
                        
        </div>
    

    </section>
    <!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--white c-slider__item--layout-center c-slider__item--overlay-none" style="background-image: url(&#039;https://picsum.photos/1080/720&#039;); background-position: 50% 30%;" role="img" aria-labeledby="647e3dfddd87d__heading" data-uid="647e3dfddd87d">
    
    
            <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 class="c-typography c-slider__item__heading c-typography__variant--h2" id="647e3dfddd87d__heading" data-uid="647e3dfddd8d3">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="647e3dfddd919">
    Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>            
            
                        
        </div>
    

    </section>
            </div>
        </div>
    
        
        
        </div>
@slider([
    'showStepper' => true,
    'autoSlide' => false,
    'repeatSlide' => true,
])
    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'center',
        'containerColor' => 'none',
        'overlay' => 'dark',
        'textColor' => 'white',
        'textAlignment' => 'center',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
        'heroStyle' => true
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'bottom',
        'overlay' => 'light',
        'containerColor' => 'theme',
        'textColor' => 'white',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'center',
        'containerColor' => 'none',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
        'overlay' => 'light',
        'overlay_opacity' => 'medium'
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'bottom',
        'containerColor' => 'white',
        'textColor' => 'theme',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
        'background_video' => 'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'containerColor' => 'white',
        'layout' => 'center',
        'mobile_image' => 'https://picsum.photos/720/720',
        'desktop_image' => 'https://picsum.photos/1080/720',
    ])
    @endslider__item
@endslider

Button styling

Styling the buttons

<div class="c-slider c-slider--16-9 c-slider__navigation--hover c-slider--shadow c-slider--has-stepper" data-step="0" js-slider="0" js-slider-index="0" data-slider-loop="1" data-slider-gap="2" id="647e3dfddde393.25530632" data-uid="647e3dfddde43">

            <div class="splide__arrows c-slider__arrows">
            <button class="c-button splide__arrow splide__arrow--prev c-button__outlined c-button__outlined--secondary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_left" type="button" data-uid="647e3dfddde83">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e3dfdddec7">
        <span data-nosnippet aria-hidden="true">
                            keyboard_arrow_left
                    </span>
        </span>
            </span>
        
        
    </span> </button>            <button class="c-button splide__arrow splide__arrow--next c-button__outlined c-button__outlined--secondary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_right" type="button" data-uid="647e3dfdddf13">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e3dfdddf51">
        <span data-nosnippet aria-hidden="true">
                            keyboard_arrow_right
                    </span>
        </span>
            </span>
        
        
    </span> </button>        </div>
    
        <div class="c-slider__container splide__track">
            <div class="c-slider__inner splide__list" js-slider-inner>
                <!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--darkest c-slider__item--text-white c-slider__item--layout-center c-slider__item--overlay-none" role="img" aria-labeledby="647e3dfdddcc0__heading" style="background-position: 50% 30%;" data-uid="647e3dfdddcc0">
    
    
    
            <div class="c-slider__item__container">
            

                            <!-- typography.blade.php  -->
<h2 class="c-typography c-slider__item__heading c-typography__variant--h2" id="647e3dfdddcc0__heading" data-uid="647e3dfdddd0d">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="647e3dfdddd47">
    Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>            
            
                        
        </div>
    

    </section>
    <!-- slider__item.blade.php -->
<section class="c-slider__item splide__slide u-color__bg--darkest c-slider__item--text-white c-slider__item--layout-bottom c-slider__item--overlay-none" role="img" aria-labeledby="647e3dfdddd82__heading" style="background-position: 50% 30%;" data-uid="647e3dfdddd82">
    
    
    
            <div class="c-slider__item__container">
            

                            <!-- typography.blade.php  -->
<h2 class="c-typography c-slider__item__heading c-typography__variant--h2" id="647e3dfdddd82__heading" data-uid="647e3dfddddc3">
    Base Layout
</h2>            
                            <!-- typography.blade.php  -->
<p class="c-typography c-slider__item__body  c-typography__variant--body" data-uid="647e3dfddddff">
    Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!
</p>            
            
                        
        </div>
    

    </section>
            </div>
        </div>
    
        
        
        </div>
@slider([
    'showStepper' => true,
    'autoSlide' => false,
    'arrowButtons' => array("color" => "secondary", "style" => "outlined")
])
    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'center',
        'containerColor' => 'darkest',
        'textColor' => 'white',

    ])
    @endslider__item

    @slider__item([
        'title' => 'Base Layout',
        'sub_title' => 'This is a slightly longer title called subtitle',
        'text' => 'Here I could put some lorem ipsum text but I am too lazy to Google for one so I wrote all this instead. Woo!',
        'layout' => 'bottom',
        'containerColor' => 'darkest',
        'textColor' => 'white',
    ])
    @endslider__item
@endslider

Slider with Cards

<div class="c-slider c-slider--16-9 c-slider__navigation--hover c-slider--shadow" data-slides-per-page="4" data-step="0" js-slider="0" js-slider-index="0" data-slider-loop="1" data-slider-gap="2" id="647e3dfddead07.98694641" data-uid="647e3dfddeada">

            <div class="splide__arrows c-slider__arrows">
            <button class="c-button splide__arrow splide__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_left" type="button" data-uid="647e3dfddeb1b">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e3dfddeb5d">
        <span data-nosnippet aria-hidden="true">
                            keyboard_arrow_left
                    </span>
        </span>
            </span>
        
        
    </span> </button>            <button class="c-button splide__arrow splide__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_right" type="button" data-uid="647e3dfddeba3">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e3dfddebe1">
        <span data-nosnippet aria-hidden="true">
                            keyboard_arrow_right
                    </span>
        </span>
            </span>
        
        
    </span> </button>        </div>
    
        <div class="c-slider__container splide__track">
            <div class="c-slider__inner splide__list" js-slider-inner>
                <!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--text-black c-slider__item--layout-center" role="img" aria-labeledby="647e3dfdde51f__heading" style="background-position: 50% 30%;" data-uid="647e3dfdde51f">
    
    
    
            <div class="c-slider__item__container">
            <!-- card.blade.php -->
<a class="c-card u-color__text--info c-card--focus-inset c-card--default c-card--action c-card--ratio-4-3" href="https://www.helsingborg.se" data-uid="647e3dfdde164">
    <div class="c-card__image c-card__image--primary">
    <div class="c-card__image-background " style="background-image:url('https://picsum.photos/seed/0/267');"></div>
</div><div class="c-card__body">
            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e3dfdde42a">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="647e3dfdde3d9">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="647e3dfdde35b">
    Card #0
</h2>
</div>
</div>            <!-- typography.blade.php  -->
<p class="c-typography c-typography__variant--p" data-uid="647e3dfdde4ac">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p> </div>    
    </a>

            
            
            
                        
        </div>
    

    </section>
        
        <!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--text-black c-slider__item--layout-center" role="img" aria-labeledby="647e3dfdde6f8__heading" style="background-position: 50% 30%;" data-uid="647e3dfdde6f8">
    
    
    
            <div class="c-slider__item__container">
            <!-- card.blade.php -->
<a class="c-card u-color__text--info c-card--focus-inset c-card--default c-card--action c-card--ratio-4-3" href="https://www.helsingborg.se" data-uid="647e3dfdde572">
    <div class="c-card__image c-card__image--primary">
    <div class="c-card__image-background " style="background-image:url('https://picsum.photos/seed/1/267');"></div>
</div><div class="c-card__body">
            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e3dfdde665">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="647e3dfdde62e">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="647e3dfdde5f5">
    Card #1
</h2>
</div>
</div>            <!-- typography.blade.php  -->
<p class="c-typography c-typography__variant--p" data-uid="647e3dfdde6b8">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p> </div>    
    </a>

            
            
            
                        
        </div>
    

    </section>
        
        <!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--text-black c-slider__item--layout-center" role="img" aria-labeledby="647e3dfdde8ce__heading" style="background-position: 50% 30%;" data-uid="647e3dfdde8ce">
    
    
    
            <div class="c-slider__item__container">
            <!-- card.blade.php -->
<a class="c-card u-color__text--info c-card--focus-inset c-card--default c-card--action c-card--ratio-4-3" href="https://www.helsingborg.se" data-uid="647e3dfdde747">
    <div class="c-card__image c-card__image--primary">
    <div class="c-card__image-background " style="background-image:url('https://picsum.photos/seed/2/267');"></div>
</div><div class="c-card__body">
            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e3dfdde845">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="647e3dfdde80f">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="647e3dfdde7d8">
    Card #2
</h2>
</div>
</div>            <!-- typography.blade.php  -->
<p class="c-typography c-typography__variant--p" data-uid="647e3dfdde891">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p> </div>    
    </a>

            
            
            
                        
        </div>
    

    </section>
        
        <!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--text-black c-slider__item--layout-center" role="img" aria-labeledby="647e3dfddea91__heading" style="background-position: 50% 30%;" data-uid="647e3dfddea91">
    
    
    
            <div class="c-slider__item__container">
            <!-- card.blade.php -->
<a class="c-card u-color__text--info c-card--focus-inset c-card--default c-card--action c-card--ratio-4-3" href="https://www.helsingborg.se" data-uid="647e3dfdde91d">
    <div class="c-card__image c-card__image--primary">
    <div class="c-card__image-background " style="background-image:url('https://picsum.photos/seed/3/267');"></div>
</div><div class="c-card__body">
            <!-- group.blade.php -->
<div class="c-group c-group--horizontal c-group--justify-content-space-between c-group--align-items-start" data-uid="647e3dfddea0b">
    <!-- group.blade.php -->
<div class="c-group c-group--vertical" data-uid="647e3dfdde9d6">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-card__heading c-typography__variant--h3" data-uid="647e3dfdde99e">
    Card #3
</h2>
</div>
</div>            <!-- typography.blade.php  -->
<p class="c-typography c-typography__variant--p" data-uid="647e3dfddea54">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p> </div>    
    </a>

            
            
            
                        
        </div>
    

    </section>
            </div>
        </div>
    
        
        
        </div>
@slider([
    'showStepper' => false,
    'autoSlide' => false,
    'attributeList' => [
        'data-slides-per-page' => 4
    ],
])

    @for ($i = 0; $i < 4; $i++)
    
        @slider__item([
            'layout' => 'center',
            'textColor' => 'black',
            'heroStyle' => false,
            'classList' => ['c-slider__item--post']
        ])

            @card([
                'link' => 'https://www.helsingborg.se',
                'image' => ['src' => "https://picsum.photos/seed/$i/267", 'alt' => 'ALT'],
                'heading' => "Card #$i",
                'content' => "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                'classList' => ['u-color__text--info', 'c-card--focus-inset'],
            ])
            @endcard

        @endslider__item

    @endfor

@endslider

Slider with Segment

<div class="c-slider c-slider--post c-slider--16-9 c-slider__navigation--hover c-slider--shadow" data-slides-per-page="1" data-step="0" js-slider="0" js-slider-index="0" data-slider-gap="2" id="647e3dfddfece4.18497223" data-uid="647e3dfddfed8">

            <div class="splide__arrows c-slider__arrows">
            <button class="c-button splide__arrow splide__arrow--prev c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_left" type="button" data-uid="647e3dfddff15">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-left c-icon--material c-icon--material-keyboard_arrow_left material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e3dfddff83">
        <span data-nosnippet aria-hidden="true">
                            keyboard_arrow_left
                    </span>
        </span>
            </span>
        
        
    </span> </button>            <button class="c-button splide__arrow splide__arrow--next c-button__filled c-button__filled--primary c-button--md c-button--icon-only" target="_top" aria-label="keyboard_arrow_right" type="button" data-uid="647e3dfddffd2">   
     <span class="c-button__label">         
                    <span class="c-button__label-icon ">
                <!-- icon.blade.php -->
    <span class="c-icon c-icon--keyboard-arrow-right c-icon--material c-icon--material-keyboard_arrow_right material-icons c-icon--size-md" aria-hidden="true" translate="no" role="img" aria-label="Icon: Undefined" alt="Icon: Undefined" data-uid="647e3dfde002e">
        <span data-nosnippet aria-hidden="true">
                            keyboard_arrow_right
                    </span>
        </span>
            </span>
        
        
    </span> </button>        </div>
    
        <div class="c-slider__container splide__track">
            <div class="c-slider__inner splide__list" js-slider-inner>
                <!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-bottom" role="img" aria-labeledby="647e3dfddf550__heading" style="background-position: 50% 30%;" data-uid="647e3dfddf550">
    
    
    
            <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="647e3dfddeef0">
        <a class="c-link c-segment__image" id="" href="https://www.helsingborg.se" target="_top" data-uid="647e3dfddf200">
        <div class="c-segment__image " style="background-image: url(&#039;https://picsum.photos/seed/0/267&#039;); background-position: 50% 30%;"></div>
    </a>
    <div class="c-segment__content">
    <!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="647e3dfddf4ea">
        <!-- 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="647e3dfddf381">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="647e3dfddf34a">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h3" data-uid="647e3dfddf311">
    <a class="c-link" id="" href="https://www.helsingborg.se" target="_top" data-uid="647e3dfddf2d6">
        Card #0
    </a>
</h2>
</div>
</div>


    <!-- typography.blade.php  -->
<div class="c-typography c-segment__text c-typography__variant--p" data-uid="647e3dfddf461">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
    <div class="c-segment__buttons">
                    <a class="c-button c-button__filled c-button__filled--default c-button--md" target="_top" type="button" href="https://www.helsingborg.se" aria-label="Read More" data-uid="647e3dfddf4a3">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                Read More
            </span>
        
    </span> </a>            </div>
    <div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></div>
    </div>

</div>
</section>

            
            
            
                        
        </div>
    

    </section>
        
        <!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-bottom" role="img" aria-labeledby="647e3dfddf8ef__heading" style="background-position: 50% 30%;" data-uid="647e3dfddf8ef">
    
    
    
            <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="647e3dfddf5b4">
        <a class="c-link c-segment__image" id="" href="https://www.helsingborg.se" target="_top" data-uid="647e3dfddf605">
        <div class="c-segment__image " style="background-image: url(&#039;https://picsum.photos/seed/1/267&#039;); background-position: 50% 30%;"></div>
    </a>
    <div class="c-segment__content">
    <!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="647e3dfddf8a7">
        <!-- 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="647e3dfddf70b">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="647e3dfddf6d4">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h3" data-uid="647e3dfddf69d">
    <a class="c-link" id="" href="https://www.helsingborg.se" target="_top" data-uid="647e3dfddf667">
        Card #1
    </a>
</h2>
</div>
</div>


    <!-- typography.blade.php  -->
<div class="c-typography c-segment__text c-typography__variant--p" data-uid="647e3dfddf7fe">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
    <div class="c-segment__buttons">
                    <a class="c-button c-button__filled c-button__filled--default c-button--md" target="_top" type="button" href="https://www.helsingborg.se" aria-label="Read More" data-uid="647e3dfddf855">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                Read More
            </span>
        
    </span> </a>            </div>
    <div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></div>
    </div>

</div>
</section>

            
            
            
                        
        </div>
    

    </section>
        
        <!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-bottom" role="img" aria-labeledby="647e3dfddfbc6__heading" style="background-position: 50% 30%;" data-uid="647e3dfddfbc6">
    
    
    
            <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="647e3dfddf94b">
        <a class="c-link c-segment__image" id="" href="https://www.helsingborg.se" target="_top" data-uid="647e3dfddf99b">
        <div class="c-segment__image " style="background-image: url(&#039;https://picsum.photos/seed/2/267&#039;); background-position: 50% 30%;"></div>
    </a>
    <div class="c-segment__content">
    <!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="647e3dfddfb89">
        <!-- 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="647e3dfddfacb">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="647e3dfddfa94">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h3" data-uid="647e3dfddfa5e">
    <a class="c-link" id="" href="https://www.helsingborg.se" target="_top" data-uid="647e3dfddfa27">
        Card #2
    </a>
</h2>
</div>
</div>


    <!-- typography.blade.php  -->
<div class="c-typography c-segment__text c-typography__variant--p" data-uid="647e3dfddfb05">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
    <div class="c-segment__buttons">
                    <a class="c-button c-button__filled c-button__filled--default c-button--md" target="_top" type="button" href="https://www.helsingborg.se" aria-label="Read More" data-uid="647e3dfddfb45">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                Read More
            </span>
        
    </span> </a>            </div>
    <div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></div>
    </div>

</div>
</section>

            
            
            
                        
        </div>
    

    </section>
        
        <!-- slider__item.blade.php -->
<section class="c-slider__item c-slider__item--post splide__slide c-slider__item--layout-bottom" role="img" aria-labeledby="647e3dfddfe8d__heading" style="background-position: 50% 30%;" data-uid="647e3dfddfe8d">
    
    
    
            <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="647e3dfddfc19">
        <a class="c-link c-segment__image" id="" href="https://www.helsingborg.se" target="_top" data-uid="647e3dfddfc69">
        <div class="c-segment__image " style="background-image: url(&#039;https://picsum.photos/seed/3/267&#039;); background-position: 50% 30%;"></div>
    </a>
    <div class="c-segment__content">
    <!-- card.blade.php -->
<div class="c-card c-segment__content-card c-card--default c-card--image-first c-card--ratio-4-3" data-uid="647e3dfddfe4b">
        <!-- 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="647e3dfddfd94">
    <!-- group.blade.php -->
<div class="c-group u-width--100 c-group--vertical" data-uid="647e3dfddfd5d">
    <!-- typography.blade.php  -->
<h2 class="c-typography c-segment__title u-margin__bottom--1 c-typography__variant--h3" data-uid="647e3dfddfd0c">
    <a class="c-link" id="" href="https://www.helsingborg.se" target="_top" data-uid="647e3dfddfcd5">
        Card #3
    </a>
</h2>
</div>
</div>


    <!-- typography.blade.php  -->
<div class="c-typography c-segment__text c-typography__variant--p" data-uid="647e3dfddfdc9">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
    <div class="c-segment__buttons">
                    <a class="c-button c-button__filled c-button__filled--default c-button--md" target="_top" type="button" href="https://www.helsingborg.se" aria-label="Read More" data-uid="647e3dfddfe07">   
     <span class="c-button__label">         
        
                    <span class="c-button__label-text ">
                Read More
            </span>
        
    </span> </a>            </div>
    <div class="c-segment__inner-blocks u-hide-empty"><InnerBlocks /></div>
    </div>

</div>
</section>

            
            
            
                        
        </div>
    

    </section>
            </div>
        </div>
    
        
        
        </div>
@slider([
    'showStepper' => false,
    'autoSlide' => false,
    'repeatSlide' => false,
    'attributeList' => [
        'data-slides-per-page' => 1
    ],
    'classList' => ['c-slider--post']
])

    @for ($i = 0; $i < 4; $i++)
    
        @slider__item([
            'classList' => ['c-slider__item--post']
        ])

            @segment([
                'layout' => 'card',
                'title' => "Card #$i",
                'tags' => false,
                'meta' => false,
                'image' => "https://picsum.photos/seed/$i/267",
                'buttons' => [['text' => 'Read More', 'href' => 'https://www.helsingborg.se']],
                'content' => "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
                'classList' => ['c-segment--slider', 'c-segment--size-sm'],
                'containerAware' => true,
                'reverseColumns' => true
            ])
            @endsegment

        @endslider__item

    @endfor

@endslider

Blade component parameters

Key Default value Type Available values Description
showStepper true boolean - Option to hide or show stepper.
autoSlide true boolean - If set to true, slider will auto slide with default delay. Can also receive an int to set delay in seconds
peekSlides false boolean - Adds some padding to show a peek of next and previous slides
navigationHover true boolean - Only show navigation when hovering over the slider
ratio 16:9 string - The size ratio of the slider
repeatSlide true boolean - Will allow the slide to repeat its cycle
heroStyle false boolean - -
shadow true boolean - -
customButtons false boolean - -
arrowButtons {"color":"primary","style":"filled"} array - -
padding 0 integer - Sets the amount of padding between slides
gap 2 integer - Sets the amount of gap between slides
id string - The DOM id of the component.
classList [] array - Array containing wrapping classes array
attributeList [] array - Array containing keys and values rendered as attributes
containerAware false boolean true/false Makes the component container aware. Appends modifiers --size--xs/sm/md/lg to the component.
Settings location: /mnt/persist/www/docroot_styleguide_v2/source/library/source/php/Component/Slider/slider.json