Awesomeness

Slider

Horizontal slider with native vertical scrolling capabilities. Each slider consists of a container with the class .slider-container. Inside the container, there is one div withe the class .slider containing an unordered list with the class .slides and .slides--contains-n whereas n needs to be the number of images inside of the slider. This second mandatory class ensures that the slider keeps working, even when javascript is turned off in the clients browser.

Each list item than has the class .slide and can contain an image with the class .slide__img and an image caption with the class .slide__caption

After the div with the class .slider and the class .slider__controls--is-start, there is a second unordered list with the class .slider__controls that contains buttons for the user to navigate the slider. Inside this list there are two items, each one containing a link, one with the class .slider__prev and one with the class .slider__next

To ensure, that a class exists for your specific number of images inside the slider please edit the bottom of the sass file of this module

Example

Imports

  • SASS:
    @import "base";
@import "imports/modules/slider";
  • Javascript:
    require(["slider"], function(Slider)
{
	// Initialize Slider
	if(typeof ScrollController === "function" && !Modernizr.touch)
	{
		var scroll_controller = new ScrollController();
		scroll_controller.init(".slider", ".slides", ".slider__prev, .slider__next", ".slider__controls");
	}
});

Code

<div class="slider">
	<ul class="slides slides--contains-3">
		<li class="slide">
			<!-- First slide -->
			<img class="slide__img" src="/img/slider-carrotcake.jpg" alt="Carrot Cake">
			<div class="slide__caption">
				<h3>Carrot Cake</h3>
				<p>Contains carrots</p>
				<a href="http://www.flickr.com/photos/stevenbrisson/4248069302/">StevenBrisson on Flickr</a>
			</div>
		</li>

		<li class="slide">
			<!-- second slide -->
			<img class="slide__img" src="/img/slider-madleines.jpg" alt="A1 workforce management screenshot">
			<div class="slide__caption">
				<h3>Piggy Madeleines</h3>
				<p>Small, piggy shaped madeleines.</p>
				<a href="http://www.flickr.com/photos/bananagranola/4312761345/">bananagranola on Flickr</a>
			</div>
		</li>

		<li class="slide">
			<!-- third slide -->
			<img class="slide__img" src="/img/slider-oreocake.jpg" alt="Oreo Cake">
			<div class="slide__caption">
				<h3>Oreo Cake</h3>
				<p>Devil's food cake with cream cheese & oreo filling, covered in chocolate.</p>
				<a href="http://www.flickr.com/photos/ginnerobot/3245408401/">ginnerobot on Flickr</a>
			</div>
		</li>
	</ul>
	</div>
	<ul class="slider__controls slider__controls--is-start">
	<li>
		<a class="slider__prev" href="#">
			<i class="fa fa-chevron-left"></i>
		</a>
	</li>
	<li>
		<a class="slider__next" href="#">
			<i class="fa fa-chevron-right"></i>
		</a>
	</li>
	</ul>
</div>