<div class="c-sliders js-slider" data-autoplay="false" data-autoplay-speed="6000" data-fade="false" data-dots="true" data-arrows="true" data-infinite="false" data-pause-on-hover="false" data-speed="300" data-as-nav-for="" data-slides-to-show="1" data-slides-to-scroll="1"
data-focus-on-select="false" data-responsive="[{breakpoint: 992,settings: {slidesToShow: 2,slidesToScroll: 2}}]">
<div class="c-sliders__slide slick-slide">
<figure class="u-no-margin-xs b-lazyload" style="padding-top:50%;">
<img class="b-image b-image--block b-lazyload__image js-lazyload" data-src="https://source.unsplash.com/400x400/?nature" data-srcset="https://source.unsplash.com/800x800/?nature 800w, https://source.unsplash.com/600x600/?nature 600w, https://source.unsplash.com/350x350/?nature 350w, https://source.unsplash.com/100x100/?nature 100w"
alt="Nature" draggable="false" />
</figure>
</div>
<div class="c-sliders__slide slick-slide">
<figure class="u-no-margin-xs b-lazyload" style="padding-top:50%;">
<img class="b-image b-image--block b-lazyload__image js-lazyload" data-src="https://via.placeholder.com/400x200?text=Image+coming+soon+2" alt="Image coming soon 2" draggable="false" />
</figure>
</div>
<div class="c-sliders__slide slick-slide">
<figure class="u-no-margin-xs b-lazyload" style="padding-top:50%;">
<img class="b-image b-image--block b-lazyload__image js-lazyload" data-src="https://via.placeholder.com/400x200?text=Image+coming+soon+3" alt="Image coming soon 2" draggable="false">
</figure>
</div>
<div class="c-sliders__slide slick-slide">
<img class="u-no-margin-xs b-image b-image--block" src="https://via.placeholder.com/400x200?text=Image+coming+soon+4" alt="Image coming soon 4" draggable="false">
</div>
</div>
<div class="c-sliders js-slider" data-autoplay="false" data-autoplay-speed="6000" data-fade="false" data-dots="true" data-arrows="true" data-infinite="false" data-pause-on-hover="false" data-speed="300" data-as-nav-for="" data-slides-to-show="1" data-slides-to-scroll="1" data-focus-on-select="false" data-responsive="[{breakpoint: 992,settings: {slidesToShow: 2,slidesToScroll: 2}}]">
<div class="c-sliders__slide slick-slide">
<figure class="u-no-margin-xs b-lazyload" style="padding-top:50%;">
<img class="b-image b-image--block b-lazyload__image js-lazyload" data-src="https://source.unsplash.com/400x400/?nature" data-srcset="https://source.unsplash.com/800x800/?nature 800w, https://source.unsplash.com/600x600/?nature 600w, https://source.unsplash.com/350x350/?nature 350w, https://source.unsplash.com/100x100/?nature 100w" alt="Nature" draggable="false" />
</figure>
</div>
<div class="c-sliders__slide slick-slide">
<figure class="u-no-margin-xs b-lazyload" style="padding-top:50%;">
<img class="b-image b-image--block b-lazyload__image js-lazyload" data-src="https://via.placeholder.com/400x200?text=Image+coming+soon+2" alt="Image coming soon 2" draggable="false" />
</figure>
</div>
<div class="c-sliders__slide slick-slide">
<figure class="u-no-margin-xs b-lazyload" style="padding-top:50%;">
<img class="b-image b-image--block b-lazyload__image js-lazyload" data-src="https://via.placeholder.com/400x200?text=Image+coming+soon+3" alt="Image coming soon 2" draggable="false">
</figure>
</div>
<div class="c-sliders__slide slick-slide">
<img class="u-no-margin-xs b-image b-image--block" src="https://via.placeholder.com/400x200?text=Image+coming+soon+4" alt="Image coming soon 4" draggable="false">
</div>
</div>
/* No context defined for this component. */
The slider component is a prebuilt plain slider for images, with data attributes that will control frontend output (such as arrows, dots etc).
All the attributes of the slider are held in data attributes on the main slider container:
<div class="c-sliders js-slider" data-autoplay="false" data-autoplay-speed="6000" data-fade="false" data-dots="true" data-arrows="true" data-infinite="false" data-pause-on-hover="false" data-speed="300" data-as-nav-for="" data-slides-to-show="1" data-slides-to-scroll="1" data-focus-on-select="false" data-responsive="[]">
Change these to edit how the slider works i.e. data-dots=”false” will make the slider have no dots, data-arrows=”false” will make the slider have no arrow controls.
The slider uses a JS plugin called slick slider http://kenwheeler.github.io/slick, so if you need to create a more bespoke slider I would suggest you base it around this plugin.