Slider

The Ensemble slider lets you create eye catching slideshows, with CSS3 animated layers and captions. The Ensemble slider is fully responsive, and easily customisable.

Basic slider

The Ensemble slider uses a very basic structure to create your slideshow. The basic slideshow consists of an outer container ensemble-slideshow-container, an inner slideshow container that also takes all the slideshow options in the form of data attributes ensemble-slideshow, then your slide images simply wrapped in div tags.

<div class="ensemble-slideshow-container">
	<div class="ensemble-slideshow"
	data-cycle-fx="scrollHorz"
	data-cycle-timeout="8000"
	data-cycle-loader="wait"
	data-cycle-pause-on-hover="true"
	data-cycle-speed="400"
	data-cycle-prev=".ensemble-slideshow__previous-slide"
	data-cycle-slide-class="ensemble-slideshow__slide"
	data-cycle-next=".ensemble-slideshow__next-slide"
	data-cycle-pager=".ensemble-slideshow__pager"
	data-cycle-slides="> div">

		<div class="ensemble-slideshow__first-slide">
			<img src="slider__slide-1.jpg">
		</div>

		<div>
			<img src="slider__slide-2.jpg">
		</div>

		<div>
			<img src="slider__slide-3.jpg">
		</div>

		<a href="#" class="ensemble-slideshow__previous-slide">
			<i class="ion-ios-arrow-left"></i>
		</a>
		<a href="#" class="ensemble-slideshow__next-slide">
			<i class="ion-ios-arrow-right"></i>
		</a>

	</div>

	<div class="ensemble-slideshow__pager"></div>

</div>

Left/right navigation

Ensemble slider can transition between slides upon clicking the left/right navigation arrows. The arrows are hidden until the slider is hovered over.

The navigation is simply 2 anchor tags, which have the classes ensemble-slideshow__previous-slide and ensemble-slideshow__next-slide, the navigation arrows are Ionicon icons.

<a href="#" class="ensemble-slideshow__previous-slide">
	<i class="ion-ios-arrow-left"></i>
</a>
<a href="#" class="ensemble-slideshow__next-slide">
	<i class="ion-ios-arrow-right"></i>
</a>

Pager

To add a pager to the slider simply add a div with the class ensemble-slideshow__pager inbetween the slider container outer and inner closing divs.

You can also add modifier classes to the pager to make it behave in a few different ways. With the ensemble-slideshow__pager--on-slider you can have the pager appear on the slider instead of underneath. Using the ensemble-slideshow__pager--rounded you can make pager items round instead of square. Both modifier classes can be used at the same time.

<!-- Standard pager -->
<div class="ensemble-slideshow__pager"></div>

<!-- Pager on slider -->
<div class="ensemble-slideshow__pager ensemble-slideshow__pager--on-slider"></div>

<!-- Round slider items -->
<div class="ensemble-slideshow__pager ensemble-slideshow__pager--rounded"></div>

Positional layers

Adding positional layers to Ensemble slider is a simple job of adding some layer divs. ensemble-slideshow__layer then adding a positional class such as ensemble-slideshow__layer-bottom-left. Positional classes will effect where text appears within the layer, all the positional classes you can use are listed opposite:

You can use multiple positional layers to place text and images where you need them.

<div>
	<img src="slider__slide.jpg">
	
	<div class="ensemble-slideshow__layer ensemble-slideshow__layer-top-center">
		<!-- Text appears centered at the top of the slider -->
	</div>
</div>

<div>
	<img src="slider__slide.jpg">
	<div class="ensemble-slideshow__layer ensemble-slideshow__layer-top-right">
		<!-- Text appears at the top right of the slider -->
	</div>
</div>

<div>
	<img src="slider__slide.jpg">
	<div class="ensemble-slideshow__layer ensemble-slideshow__layer-top-left">
		<!-- Text appears at the top left of the slider -->
	</div>
</div>
	
<div>
	<img src="slider__slide.jpg">
	<div class="ensemble-slideshow__layer ensemble-slideshow__layer-bottom-center">
		<!-- Text appears centered at the bottom of the slider -->
	</div>
</div>

<div>
	<img src="slider__slide.jpg">
	<div class="ensemble-slideshow__layer ensemble-slideshow__layer-bottom-right">
		<!-- Text appears at the bottom right of the slider -->
	</div>
</div>

<div>
	<img src="slider__slide.jpg">
	<div class="ensemble-slideshow__layer ensemble-slideshow__layer-bottom-left">
		<!-- Text appears at the bottom left of the slider -->
	</div>
</div>

Animating captions

Once you have added a positional layer to your slide, you can then add animated captions, using a div with the class of ensemble-slideshow__caption. You can then specify how you would like the caption to animated in using any of the Ensemble framework animation engine classes such as animate__bounce-in-right. Anything inside the caption will animate in. You can use several captions inside one layer.

<div>
	<img src="slider__slide.jpg">
	
	<div class="ensemble-slideshow__layer ensemble-slideshow__layer-bottom-right">
		<div class="ensemble-slideshow__caption animate__bounce-in-right">
			
			<h2>I am a heading that will bounce in right</h2>
			
		</div>
	</div>
	
</div>

Delay animations

By adding the animation-delay- class followed by the number of milliseconds, for example animation-delay-1000 you can create a delay staggering when animated captions appear.

Animations can be delayed from animation-delay-250 .25 of a second, up to animation-delay-3500 3.5 seconds.

<div>
	<img src="slider__slide.jpg">
	
	<div class="ensemble-slideshow__layer ensemble-slideshow__layer-bottom-right">
		<div class="ensemble-slideshow__caption animate__bounce-in animation-delay-1000">
			
			<h2>I am a heading that will bounce in right</h2>
			
		</div>
	</div>
	
</div>

Options

Options in Ensemble slider are added via data attributes, opposite you see an overview of the options and what they do.