Examples
Source:
blocks/slideshow/style.scss, line 15
View Source
Default styling
.has-crop
Crops images to fit slideshow
.has-shownextup
next image peeks into frame by default
.has-aspectratio-16by9
16:9 aspect ratio
.has-aspectratio-4by3
4:3 aspect ratio
.has-aspectratio-1by1
1:1 (square) aspect ratio
.has-aspectratio-3by4
3:4 aspect ratio
.has-aspectratio-9by16
9:16 aspect ratio
Markup blocks/slideshow/bu-blocks-block-slideshow.hbs
<div class="page-wrapper">
<div class="wrapper">
<main id="main" role="main" class="content">
<article class="wp-prepress-layout-article-content">
<div class="bu-blocks-editorial-slideshow js-bu-blocks-slideshow {{modifier_class}}">
<div class="bu-blocks-slideshow-media-container">
<div class="back js-bu-blocks-slideshow-back-onmedia-btn"></div>
<div class="forward js-bu-blocks-slideshow-forward-onmedia-btn"></div>
<ul class="bu-blocks-slideshow-media-track js-bu-blocks-slideshow-media-track js-bu-blocks-slideshow-forward-ontrack-btn" style="">
<li class="js-bu-blocks-slideshow-media-track-item bu-blocks-slideshow-media bu-blocks-slideshow-media-001" >
<div class="bu-blocks-slideshow-media-backfill" style="background-image: url('https://picsum.photos/500/500')"></div>
<img class="bu-blocks-slideshow-media-actual" src="https://picsum.photos/500/500">
</li>
<li class="js-bu-blocks-slideshow-media-track-item bu-blocks-slideshow-media bu-blocks-slideshow-media-002" >
<div class="bu-blocks-slideshow-media-backfill" style="background-image: url('https://picsum.photos/640/480')"></div>
<img class="bu-blocks-slideshow-media-actual" src="https://picsum.photos/640/480">
</li>
<li class="js-bu-blocks-slideshow-media-track-item bu-blocks-slideshow-media bu-blocks-slideshow-media-003" >
<div class="bu-blocks-slideshow-media-backfill" style="background-image: url('https://picsum.photos/480/640')"></div>
<img class="bu-blocks-slideshow-media-actual" src="https://picsum.photos/480/640">
</li>
</ul>
</div>
<div class="bu-blocks-slideshow-caption-container bu-blocks-slideshow-caption-container-collapsed js-bu-blocks-slideshow-caption-container">
<ul class="bu-blocks-slideshow-caption-track js-bu-blocks-slideshow-caption-track">
<li class="bu-blocks-slideshow-caption bu-blocks-slideshow-caption-001 js-bu-blocks-slideshow-caption-item" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</p>
</li>
<li class="bu-blocks-slideshow-caption bu-blocks-slideshow-caption-002 js-bu-blocks-slideshow-caption-item" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo</p>
</li>
<li class="bu-blocks-slideshow-caption bu-blocks-slideshow-caption-003 js-bu-blocks-slideshow-caption-item" >
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod.</p>
</li>
</ul>
<div class="bu-blocks-slideshow-caption-expander js-bu-blocks-slideshow-caption-btn"><span class="icon-navigatedown"></span> read full caption</div>
</div>
<div class="bu-blocks-slideshow-controls">
<div class="bu-blocks-slideshow-controls-previous js-bu-blocks-slideshow-back-btn"><span class="icon-navigateleft"></span></div>
<div class="bu-blocks-slideshow-controls-next js-bu-blocks-slideshow-forward-btn"><span class="icon-navigateright"></span></div>
</div>
</div>
</article>
</main>
</div>
</div>