18 #Carousel Carousel extended
carousel, carousel-indicators, carousel-inner, carousel-caption, carousel-control
These styles are designed to work in conjunction with the Carousel JavaScript library from Bootstrap and React-Bootstrap.
Add the class is-below-nav to add a bit of extra padding to the top of the carousel. Use this when the carousel immediately follows a Nav Flyout menu. This compensates for the way the nav flyout overlaps the content beneath it, and allows it to overlay any background images in the carousel without covering the text.
<div class="carousel">
<ol class="carousel-indicators">
<li class="is-active"></li>
<li></li>
<li></li>
</ol>
<ol class="carousel-inner">
<li class="item is-active">
<img src="https://www.google.com/images/srpr/logo11w.png">
<div class="carousel-caption">Carousel example</div>
</li>
<li class="item">
<img src="https://www.google.com/images/srpr/logo11w.png">
</li>
<li class="item">
<img src="https://www.google.com/images/srpr/logo11w.png">
</li>
</ol>
<a class="carousel-control left" href="#prev">
<span class="icon-prev"></span>
</a>
<a class="carousel-control right" href="#next">
<span class="icon-next"></span>
</a>
</div>18.1 #Carousel.Slides Slides extended
slide, slide-title, slide-title-parent
Provides layouts that are common inside carousel slides, though they can also stand alone if you want a single static "slide" on a page.
Note there are two <div> elements wrapping the slide. Slides require two nested elements wrapping all slide content: the outer slide and the inner wrapper (slide-hero-left in this example). Apply one of the slide layout classes (below) to this inner wrapper to control they layout of the slide contents.
slide-padded
slide-centered
<div class="slide [modifier class]">
<div class="slide-hero-left">
<h2 class="slide-title">Liquidity in Index futures is on the rise</h2>
<p>Some slide content</p>
<button class="btn">Button</button>
</div>
</div><div class="slide" style="background-image: url(http://placehold.it/800x200)">
<div class="slide-hero-left">
<div class="slide-title-parent">Liquid, transparent markets</div>
<h2 class="slide-title">Liquidity in Index futures is on the rise</h2>
</div>
</div>18.1.1 #Carousel.Slides.inline Inline slides extended
<div class="slide-inline">
<h2 class="slide-title">Liquidity in Index futures is on the rise</h2>
<p>Some content goes here</p>
<button class="btn">Button</button>
</div>18.1.2 #Carousel.Slides.Layouts Layouts extended
slide-hero-left, slide-hero-right, slide-hero-center, slide-inline
Change the class on the inner wrapper to control the layout of the slide contents.
slide-hero-left
slide-hero-right
slide-hero-center
slide-inline
<div class="slide">
<div class="[modifier class]">
<h2 class="slide-title">Liquidity in Index futures is on the rise</h2>
<p>Some slide content</p>
</div>
</div>18.1.3 #Carousel.Slides.Media Media Slides extended
media-slide, media-slide-left, media-slide-right
Splits the slide content into a left and right side.
<div class="slide">
<div class="media-slide">
<div class="media-slide-left">
<img src="//placehold.it/400x400"/>
</div>
<div class="media-slide-right">
<h2 class="slide-title">Liquidity in Index futures is on the rise</h2>
<p>Some slide content</p>
</div>
</div>
</div><div class="slide">
<div class="slide-search">
<div class="slide-search__inner">
<h1 class="slide__title">Search Results</h2>
<div class="form-group">
<label htmlFor="search-main-input" class="sr-only">
Search
</label>
<input
id="search-main-input"
class="form-control form-control--mega"
type="search"
/>
</div>
</div>
</div>
</div>