Sliders

Front Street implements a few different types of basic sliders, which utilize the Owl Carousel script. The goal here is to style and implement the JavaScript for some basic sliders that you can utilize with HTML.

  1. 1
  2. 2
  3. 3
Loading

General Overview

Basic sliders come in three types, in which the JavaScript is all setup for you — Simple Slider, Gallery Slider and Block Slider. In this section, we'll cover the general information that can be applied to all slider types.

HTML Structure

Below is an overview of the basic, outer HTML structure.

Loading

Slides

For all slider types, your actual slides will go in an element with class fs-slider and owl-carousel. The fs-slider class is what triggers our JavaScript and recieves any custom styling for the specific slider type. And the owl-carousel class is what actually receives the styling from the included Owl Carousel CSS, compiled with Front Street. Then within, you'll have an element for each slide with class slider-item.


In the above structure, you may have noticed that there were three types of navigation. Each of these are optional; include them or don't. You can preview how these looks with the various types of sliders later in this article.

The first type of navigation is the standard navigation dots. Create a list with class fs-slider-nav. Make sure to include a list item for each slide you create. For example, if there are three slides, there should be three list items in your .fs-slider-nav element.

  1. 1
  2. 2
  3. 3

The second type of navigation are the absolute-positioned arrows, to move the slider to next or previous slide. Create a list with class fs-slider-arrows and two list items within with classes next and prev. You can also add the class trans to each list item to give it a transparent look.

You can also use any color library class on the list items to give them a specific color.

The last type is the thumbnail navigation. This would generally be used in place of the standard dot navigation. For this type of navigation create a list of thumbnail images with class fs-slider-thumbs. Make sure the thumbnail images coorespond to the slide images and are in the same order.

You can also include one of the sizing classes to determine the size of the thumbnail images — thumbs-sm, thumbs-md, thumbs-lg or thumbs-xl.

Important! Different from the two previous navigation types, make sure the .fs-slider-thumbs element comes outside of the .wrap element.

  1. <img src="thumb-1.jpg">
  2. <img src="thumb-2.jpg">
  3. <img src="thumb-3.jpg">

Loader

To implement the loader component, add it within your .wrap element. Also make sure to add the class loading to your top-level .fs-{type}-slider element.

...
Loading

Data Attributes

Even though the JavaScript is setup for you with these pre-configured slider types, we've included some optional data-* attributes you can add to customize some of the slider settings. To utilize them, just add them into your wrapping .fs-{type}-slider element.

...

Here's a table of all available data-* attributes; pay attention to which slider types they support.

Data Attribute Type Default Description Slider Type
Simple Gallery Block
data-autoplay Number 0 Number of milliseconda between auto-rotating slider; use 0 to disable auto-rotating.
data-fade Boolean false Enable fade effect for slide transitions; data-speed will have no effect for fade effect.
data-items Number 4 Number of slide items visibile at once.
data-loop Booloean true Enable infinity loop. Duplicate last and first items to get loop illusion.
data-margin Number 1 Space between slides.
data-pause Booloean true If auto-rotating enabled, pause on mouse hover.
data-speed Number 500 Speed of slide transitions in milliseconds.

Simple Slider

The simple slider is meant to serve as a basic image slider, but could include other content types with some custom styling. Let's stick with creating a basic image slider, though.

  1. 1
  2. 2
  3. 3
Loading
<div class="fs-simple-slider loading">
	
  1. 1
  2. 2
  3. 3
Loading
</div>

Slide Captions

You may have noticed in the third slide above, we included some caption text. Here's the basic structure for a caption included within each .slider-item element.

Donec Rutrum

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Dots Navigation

The .fs-slider-nav navigation element can go inside or outside of the .wrap element to achieve different looks. In the example below, we've placed it outside so that it appears below the slider instead of over top.

Loading
  1. 1
  2. 2
  3. 3
<div class="fs-simple-slider loading">

	
...
  1. 1
  2. 2
  3. 3
</div>

Thumbnail Navigation

Here's an alternate example of the slider above, where we've subsituted the standard navigation dots for a thumbnail navigation. Notice that the the thumbnail navigation is outside of the .wrap element — This is important!

Loading
<div class="fs-simple-slider loading">

	
...
  • <img src="thumb-1.jpg">
  • <img src="thumb-2.jpg">
  • <img src="thumb-3.jpg">
</div>

Fade Transition

For a simple slider to transition with a fade effect, instead of the standard sliding effect, add data-fade="true" to your .fs-simple-slider element.

  1. 1
  2. 2
  3. 3
Loading
<div class="fs-simple-slider loading" data-fade="true">
    
...
</div>

Dark Text

What if you have really light images and you'd prefer dark navigational elements and text? Add class text-dark to your .fs-simple-slider element.

  1. 1
  2. 2
  3. 3
Loading
<div class="fs-simple-slider loading text-dark">
	
...
</div>

Mini Simple Slider

If your .fs-simple-slider element uses really small images, adding the class slider-mini will adjust the .fs-slider-arrows element to fit better.

<div class="fs-simple-slider slider-mini">
	
...
</div>

The gallery slider is useful for displaying images of varying dimensions in a more modern, carousel-style slider. It's setup essentially the same a simple slider, except for you'll use class fs-gallery-slider.

<div class="fs-gallery-slider loading">
	
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
Loading
</div>

The standard dot navigation can also go outside of the .wrap element so that it appears below the slider, with a slightly different look.

<div class="fs-gallery-slider loading">

	
...
  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
</div>

Just like with a simple slider, the thumbnail navigation will work with a gallery slider, too.

<div class="fs-gallery-slider loading">

	
...
  • <img src="thumb-1.jpg">
  • <img src="thumb-2.jpg">
  • <img src="thumb-3.jpg">
  • <img src="thumb-4.jpg">
  • <img src="thumb-5.jpg">
</div>

The images of a gallery slider are styled in a way that you might call... reverse responsive? They're given height: 100% and width: auto. — In other words, images will all match the height of the slider, with their widths scaling proportionally.

So for the gallery slider to work properly, it needs a specified height, which will unify all images at an equal height, but with varying widths.

By default we've set this at 400px, with the height shrinking at smaller viewports. But through your own CSS customizations, you could create your own height specifications. Below is an example.

<div class="fs-gallery-slider my-slider">
	
...
</div>
.my-slider .fs-slider,
.my-slider .slider-item {
	height: 400px;
}
@media (max-width: 61.9375em) { /* md */
	.my-slider .fs-slider,
	.my-slider .slider-item {
		height: 300px;
	}
}
@media (max-width: 47.9375em) { /* sm */
	.my-slider .fs-slider,
	.my-slider .slider-item {
		height: 200px;
	}
}
@media (max-width: 35.9375em) { /* xs */
	.my-slider .fs-slider,
	.my-slider .slider-item {
		height: 150px;
	}
}

Block Slider

If you're wanting more of a classic carousel to cycle through blocks, use the class fs-block-slider with your slider element.

Loading
<div class="fs-block-slider loading">
	
Loading
</div>

The following example changes up some things. — First we've added some data attributes (see full table of data attributes above). We've got data-items="3" to adjust how many items show per slide, data-margin="15" to add some gutters between items, and data-loop="false" to not allow the carousel to continuously cycle. And last, we've added the standard dot navigation outside of the .wrap element so that it appears below the carousel.

Loading
  1. 1
  2. 2
  3. 3
<div class="fs-block-slider loading" data-items="3" data-margin="15" data-loop="false">

	
...
  1. 1
  2. 2
  3. 3
</div>

Note: When adding the dots navigation to the block slider, remember to count the number of slides that will be generated for determining how many to add. — For example, if you have nine items and you've set data-items="3", then three slides will be produced and so your navigation needs three dots.

The block slider will also go great when combined with thumbnail links and modal functionality.

Loading
  1. 1
  2. 2
  3. 3
<div class="fs-block-slider loading">

	
Loading
  1. 1
  2. 2
  3. 3
</div>