Skip to content

Modular JavaScript slider that is dependency-free, rich-featured, flexible and easy to use.

License

Notifications You must be signed in to change notification settings

bqworks/slider-pro-js

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

npm version License Build Tests Downloads

Slider Pro JS

A modular JavaScript slider that is dependency-free, rich-featured, flexible and easy to use.

Main features:

  • Modular architecture
  • Responsive
  • Touch-swipe support
  • CSS3 transitions
  • Animated layers (and static)
  • Infinite scrolling
  • Carousel layout
  • Different sized slides/images
  • Full Width and Full Window support
  • Thumbnails
  • Lazy loading
  • Fade effect
  • Full-screen support
  • Video content support
  • Conditional images (different images for different screen sizes)
  • JavaScript breakpoints

See some examples on the presentation page.

The slider is also available as a jQuery plugin and as a WordPress plugin.

Getting started

1. Get a copy of the plugin

You can fork or download the plugin from GitHub, or you can install it through npm.

$ npm install slider-pro-js

2. Load the required files

You can either load the minimized JS and CSS files in your HTML or you can import the files as modules.

<link rel="stylesheet" href="slider-pro-js/build/slider-pro.css"/>
<script type="text/javascript" src="slider-pro-js/build/slider-pro.js"></script>

From unpkg.com:

<link rel="stylesheet" href="https://unpkg.com/slider-pro-js/build/slider-pro.css"/>
<script type="text/javascript" src="https://unpkg.com/slider-pro-js/build/slider-pro.js"></script>

Alternatively you can import the slider's core and each add-on from the slider-pro-js package.

import SliderPro, { Autoplay, Buttons, Thumbnails } from 'slider-pro-js';

You can also import the CSS, either the entire code or for each individual module:

// imports the entire CSS code
import 'slider-pro-js/css';
// imports the CSS code for the core and for each individual add-on
import 'slider-pro-js/css/core';
import 'slider-pro-js/css/buttons';
import 'slider-pro-js/css/thumbnails';
import 'slider-pro-js/css/arrows';
import 'slider-pro-js/css/caption';
import 'slider-pro-js/css/fullscreen';
import 'slider-pro-js/css/layers';
import 'slider-pro-js/css/thumbnail-arrows';
import 'slider-pro-js/css/thumbnail-touch-swipe';
import 'slider-pro-js/css/touch-swipe';
import 'slider-pro-js/css/video';

3. Create the HTML for the slider

<div class="slider-pro" id="my-slider">
	<div class="sp-slides">
		<!-- Slide 1 -->
		<div class="sp-slide">
			<img class="sp-image" src="path/to/image1.jpg"/>
		</div>
		
		<!-- Slide 2 -->
		<div class="sp-slide">
			<p>Lorem ipsum dolor sit amet</p>
		</div>
		
		<!-- Slide 3 -->
		<div class="sp-slide">
			<h3 class="sp-layer">Lorem ipsum dolor sit amet</h3>
			<p class="sp-layer">consectetur adipisicing elit</p>
		</div>
	</div>
</div>

4. Instantiate the slider

<script type="text/javascript">
	document.addEventListener( 'DOMContentLoaded', () => {
		const mySlider = new SliderPro( '#my-slider', {
			width: '100vw',
			height: '100vh',
			autoplay: true,
			...
		});
	});
</script>

If you are importing the files as modules, you need to add each imported add-on to the addOns option.

<script type="text/javascript">
	document.addEventListener( 'DOMContentLoaded', () => {
		const mySlider = new SliderPro( '#my-slider', {
			addOns: [ Autoplay, Buttons, Thumbnails ],
			width: '100vw',
			...
		});
	});
</script>

Custom build

The files from the packages's build folder, by default, will include all the slider's features. If you will use only a few of the provided features/add-ons and you want to optimize the files so that they include only what you use, you need to go to entry/bundle.js and entry/style-bundle.js, and comment out/remove the add-ons that you won't use. After that you need to open the terminal, navigate to the slider-pro-js package and run npm run build.

Detailed usage instructions

1. Core options

Name Default value Description
width 500 Sets the width of the slide (not the whole slider). Can be set to a fixed value, like 900 (indicating 900 pixels), or to a percentage value, like '100%' or '100vw'.
height 300 Sets the height of the slide.
responsive true Makes the slider responsive. The slider can be responsive even if the 'width' and/or 'height' properties are set to fixed values. In this situation, 'width' and 'height' will act as the maximum width and height of the slides.
aspectRatio -1 Sets the aspect ratio of the slides. If set to a value different than -1 (e.g., 1.5, 2), the height of the slides will be overridden in order to maintain the specified aspect ratio.
imageScaleMode 'cover' Sets the scale mode of the main slide images (images added as background). 'cover' will scale and crop the image so that it fills the entire slide. 'contain' will keep the entire image visible inside the slide. 'exact' will match the size of the image to the size of the slide. 'none' will leave the image to its original size.
Available values: 'cover', 'contain', 'exact' and 'none'
centerImage true Indicates if the image will be centered
allowScaleUp true Indicates if the image can be scaled up more than its original size
autoHeight false Indicates if height of the slider will be adjusted to the height of the selected slide.
autoSlideSize false Will maintain all the slides at the same height, but will allow the width of the slides to be variable if the orientation of the slides is horizontal and vice-versa if the orientation is vertical.
startSlide 0 Sets the slide that will be selected when the slider loads.
shuffle false Indicates if the slides will be shuffled.
orientation 'horizontal' Indicates whether the slides will be arranged horizontally or vertically.
Available value: 'horizontal' and 'vertical'
forceSize 'none' Indicates if the size of the slider will be forced to full width or full window.
Available value: 'fullWidth', 'fullWindow' and 'none'.
loop true Indicates if the slider will be loopable (infinite scrolling).
slideDistance 10 Sets the distance between the slides.
slideAnimationDuration 700 Sets the duration of the slide animation.
heightAnimationDuration 700 Sets the duration of the height animation.
visibleSize 'auto' Sets the size of the visible area, allowing for more slides to become visible near the selected slide.
centerSelectedSlide true Indicates whether the selected slide will be in the center of the slider, when there are more slides visible at a time. If set to false, the selected slide will be in the left side of the slider.
rightToLeft false Indicates if the direction of the slider will be from right to left, instead of the default left to right.

2. Add-on options

Name Default value Description
addOns [] If the add-ons are imported as modules, each module needs to be added to this array.
fade false Indicates if fade will be used.
fadeOutPreviousSlide true Indicates if the previous slide will be faded out (in addition to the next slide being faded in).
fadeDuration 500 Sets the duration of the fade effect.
autoplay true Indicates whether or not autoplay will be enabled.
autoplayDelay 5000 Sets the delay/interval (in milliseconds) at which the autoplay will run.
autoplayDirection 'normal' Indicates whether autoplay will navigate to the next slide or previous slide.
Available values: 'normal' and 'backwards'
autoplayOnHover 'pause' Indicates if the autoplay will be paused or stopped when the slider is hovered.
Available values: 'pause', 'stop' and 'none'
arrows false Indicates whether the arrow buttons will be created.
fadeArrows true Indicates whether the arrows will fade in only on hover.
buttons true Indicates whether the buttons will be created.
keyboard true Indicates whether keyboard navigation will be enabled.
keyboardOnlyOnFocus false Indicates whether the slider will respond to keyboard input only when the slider is in focus.
touchSwipe true Indicates whether the touch swipe will be enabled for slides.
touchSwipeThreshold 50 Sets the minimum amount that the slides should move.
fadeCaption true Indicates whether or not the captions will be faded.
captionFadeDuration 500 Sets the duration of the fade animation.
fullscreen false Indicates whether the full-screen button is enabled.
fadeFullscreen true Indicates whether the button will fade in only on hover.
waitForLayers false Indicates whether the slider will wait for the layers to disappear before going to a new slide.
autoScaleLayers true Indicates whether the layers will be scaled automatically.
autoScaleReference -1 Sets a reference width which will be compared to the current slider width in order to determine how much the layers need to scale down. By default, the reference width will be equal to the slide width. However, if the slide width is set to a percentage value, then it's necessary to set a specific value for 'autoScaleReference'.
smallSize 480 If the slider size is below this size, the small version of the images will be used.
mediumSize 768 If the slider size is below this size, the medium version of the images will be used.
largeSize 1024 If the slider size is below this size, the large version of the images will be used.
updateHash false Indicates whether the hash will be updated when a new slide is selected.
reachVideoAction 'none' Sets the action that the video will perform when its slide container is selected.
Available values: 'playVideo' and 'none'
leaveVideoAction 'pauseVideo' Sets the action that the video will perform when another slide is selected.
Available values: 'stopVideo', 'pauseVideo', 'removeVideo' and 'none'
playVideoAction 'stopAutoplay' Sets the action that the slider will perform when the video starts playing.
Available values: 'stopAutoplay' and 'none'
pauseVideoAction 'none' Sets the action that the slider will perform when the video is paused.
Available values: 'startAutoplay' and 'none'
endVideoAction 'none' Sets the action that the slider will perform when the video ends.
Available values: 'startAutoplay', 'nextSlide', 'replayVideo' and 'none'
thumbnailWidth 100 Sets the width of the thumbnail.
thumbnailHeight 80 Sets the height of the thumbnail.
thumbnailsPosition 'bottom' Sets the position of the thumbnail scroller.
Available values: 'top', 'bottom', 'right' and 'left'
thumbnailPointer false Indicates if a pointer will be displayed for the selected thumbnail.
thumbnailArrows false Indicates whether the thumbnail arrows will be enabled.
fadeThumbnailArrows true Indicates whether the thumbnail arrows will be faded.
thumbnailTouchSwipe true Indicates whether the touch swipe will be enabled for thumbnails.
breakpoints null Sets specific breakpoints which allow changing the look and behavior of the slider when the page resizes.

3. Public methods

Method signature Description
gotoSlide( index ) Scrolls to the slide at the specified index.
nextSlide() Scrolls to the next slide.
previousSlide() Scrolls to the previous slide.
getSlideAt( index ) Gets all the data of the slide at the specified index. Returns an object that contains all the data specified for that slide.
getSelectedSlide() Gets the index of the selected slide.
getTotalSlides() Gets the total number of slides.
update() This is called by the plugin automatically when a property is changed. You can call this manually in order to refresh the slider after changing its HTML markup (i.e., adding or removing slides).
resize() This is called by the plugin automatically when the slider changes its size. You can also call it manually if you find it necessary to have the slider resize itself.
addEventListener( type, handler ) Adds an event listener to the slider.
removeEventListener( type ) Removes an event listener from the slider.
destroy() Destroys a slider by removing all the visual elements and functionality added by the plugin. Basically, it leaves the slider in the state it was before the plugin was instantiated.

Example:

// instantiate the slider and set a few options
const mySlider = new SliderPro( '#my-slider', {
	autoSlideSize: true,
	loop: false
});

// the slider will go to the next slide when the document is clicked
document.addEventListener( 'click', () => {
	mySlider.nextSlide();
});

4. Events

Event type Description
beforeInit Triggered before the slider begins its initialization.
init Triggered after the slider was setup.
beforeUpdate Triggered before the slider is updates.
update Triggered when the 'update' method is called, either automatically or manually.
beforeResize Triggered before the slider is resized.
resize Triggered after the slider is resized.
gotoSlide Triggered when a new slide is selected.
Available details:
index: the index of the selected slide
previousIndex: the index of the previously selected slide
gotoSlideComplete Triggered when the animation to the new slide is completed.
Available details:
index: the index of the opened slide

Example:

// instantiate the slider and set a few options
const mySlider = new SliderPro( '#my-slider', {
	autoSlideSize: true,
	loop: false
});

// the slider will go to the next slide when the document is clicked
document.addEventListener( 'click', () => {
	mySlider.nextSlide();
});

// will show the index of the new slide in the console
mySlider.addEventListener( 'gotoSlide', ( event ) => {
	console.log( event.detail.index );
});

Add-ons

Add-ons are optional blocks of code that extend the core functionality, adding more capabilities. This modular architecture makes the code more organized and also allows you to include only the features you will use, resulting in an optimized file size and performance.

1. Breakpoints

The 'breakpoints' property is assigned an object which contains certain browser window widths and the slider properties that are applied to those specific widths. This is very similar to CSS media queries. However, please note that these custom properties will not be inherited between different breakpoints. The slider's properties will reset to the original values before applying a new set of properties, so if you want a certain property value to persist, you need to set it for each breakpoint.

Example:

const mySlider = new SliderPro( '#my-slider', {
	width: 960, 
	height: 400,
	orientation: 'horizontal',
	thumbnailPosition: 'right',
	breakpoints: {
		800: {
			thumbnailsPosition: 'bottom',
			thumbnailWidth: 270,
			thumbnailHeight: 100
		},
		500: {
			orientation: 'vertical',
			thumbnailsPosition: 'bottom',
			thumbnailWidth: 120,
			thumbnailHeight: 50
		}
	}
});

2. Fade

This add-on replaces the default slide/swipe transition with a fade transition.

Customizable properties: fade, fadeOutPreviousSlide and fadeDuration.


3. Caption

Allows you to add captions to slides. Captions will be displayed one at a time, below the slides. The caption must be given the sp-caption class.

Example:

<div class="sp-slide">
	<img class="sp-image" src="path/to/image.jpg"/>
	<p class="sp-caption">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
</div>

Customizable properties: fadeCaption and captionFadeDuration.


4. Full Screen

Allows you to view the slider in fullscreen mode, adding a button in the top-right corner of the slider.

Customizable properties: fullscreen and fadeFullscreen.


5. Lazy Loading

Enables the slider to load images (slide images and thumbnail images) only when they are in a visible area, thus saving bandwidth by not loading images that won't be viewed by the user. It also makes the initial load of the slider much faster.

Example:

<div class="slider-pro">
	<div class="sp-slides">
		<div class="sp-slide">
			<img class="sp-image" src="path/to/blank.gif" data-src="path/to/image1.jpg"/>
		</div>

		<div class="sp-slide">
			<a href="https://bqworks.net">
				<img class="sp-image" src="path/to/blank.gif" data-src="path/to/image2.jpg"/>
			</a>
		</div>

		<div class="sp-slide">
			<img class="sp-image" src="path/to/blank.gif" data-src="path/to/image3.jpg"/>
		</div>
	</div>

	<div class="sp-thumbnails">
		<img class="sp-thumbnail" src="path/to/blank.gif" data-src="path/to/thumbnail1.jpg"/>
		<img class="sp-thumbnail" src="path/to/blank.gif" data-src="path/to/thumbnail2.jpg"/>
	</div>
</div>

The src attribute of the image will point to a placeholder image, and the actual image will be specified in the data-src attribute. When the image becomes visible, the placeholder image will be replaced by the actual image.


6. Retina

Allows you to specify an alternative image for screens with high PPI (pixels per inch), like the 'Retina' screens from Apple devices. Please note that this module will work for any screen that has high PPI, not only for the 'Retina' screens.

The high resolution image needs to be specified in the data-retina attribute, as seen below.

Example:

<div class="slider-pro">
	<div class="sp-slides">
		<div class="sp-slide">
			<img class="sp-image" src="path/to/blank.gif" data-src="path/to/image1.jpg" data-src="path/to/image1@2x.jpg"/>
		</div>

		<div class="sp-slide">
			<a href="https://bqworks.net">
				<img class="sp-image" src="path/to/blank.gif" data-src="path/to/image2.jpg" data-retina="path/to/image2@2x.jpg"/>
			</a>
		</div>

		<div class="sp-slide">
			<img class="sp-image" src="path/to/blank.gif" data-src="path/to/image3.jpg" data-retina="path/to/image3@2x.jpg"/>
		</div>
	</div>

	<div class="sp-thumbnails">
		<img class="sp-thumbnail" src="path/to/blank.gif" data-src="path/to/thumbnail1.jpg" data-retina="path/to/thumbnail1@2x.jpg"/>
		<img class="sp-thumbnail" src="path/to/blank.gif" data-src="path/to/thumbnail2.jpg" data-retina="path/to/thumbnail2@2x.jpg"/>
	</div>
</div>

As can be seen above, the 'Retina' module can work together with the 'Lazy Loading' module.

The slider supports the srcset tag, which you can use to specify higher resolution images, so you don't need to use this add-on. This was provided only for backwards compatibility with the jQuery version of the slider, so that users who want to transition from the jQuery version to the Vanilla Javascript version can keep the previous HTML markup.


7. Conditional Images

This modules allows you to specify different image sources for different screen sizes. So, instead of loading large images (suited for desktop screens) on mobile devices, there will be a set of images that will load for smaller screens.

For each image you can specify three different sources in addition to the default source.

Example:

<div class="sp-slide">
	<img class="sp-image" src="path/to/blank.gif" 
		data-src="path/to/image_default.jpg"
		data-small="path/to/image_small.jpg"
		data-medium="path/to/image_medium.jpg"
		data-large="path/to/image_large.jpg"/>
</div>

The exact size represented by the data-small, data-medium and data-large attributes is given by the smallSize, mediumSize and largeSize properties. By default these are set to 480, 768 and 1024 pixels.

So, the image source specified in the data-large attribute will load when the slider's width is smaller than the value of the largeSize property (which is 1024, by default). The image source specified in the data-medium attribute will load when the slider's width is smaller than the value of the mediumSize property and the image source specified in the data-small attribute will load when the slider's width is smaller than the value of the smallSize property. If the slider's width is above any of these values, the default image source will be loaded.

If you want to specify separate images for Retina (high PPI) displays, you can use the data-retinasmall, data-retinamedium and data-retinalarge attributes (no space between retina and the screen size).

Example:

<div class="sp-slide">
	<img class="sp-image" src="path/to/blank.gif" 
		data-src="path/to/image_default.jpg"
		data-small="path/to/image_small.jpg"
		data-medium="path/to/image_medium.jpg"
		data-large="path/to/image_large.jpg"
		data-retinasmall="path/to/image_retina_small.jpg"
		data-retinamedium="path/to/image_retina_medium.jpg"
		data-retinalarge="path/to/image_retina_large.jpg"/>
</div>

Customizable properties: smallSize, mediumSize and largeSize.

As with the Retina add-on, you don't need to include this add-on, unless you transition from the jQuery version and don't want to update the HTML markup to use the srcset tag.


8. Layers

Adds support for layers, which are blocks of text or HTML content that can easily be positioned, sized or animated.

Example:

<div class="sp-slide">
	<img class="sp-image" src="path/to/image.jpg"/>

	<h3 class="sp-layer">
		Lorem ipsum dolor sit amet
	</h3>

	<p class="sp-layer">
		consectetur adipisicing elit
	</p>
</div>

As can be seen above, the layers need to have the sp-layer class, but they can be any HTML element: paragraphs, headings or just DIV elements.

Here is an example that adds some styling and animation parameters:

<div class="sp-slide">
	<img class="sp-image" src="path/to/image.jpg"/>

	<h3 class="sp-layer sp-black"
		data-position="bottomLeft" data-horizontal="10%"
		data-show-transition="left" data-show-delay="300" data-hide-transition="right">
		Lorem ipsum dolor sit amet
	</h3>

	<p class="sp-layer sp-white sp-padding"
		data-width="200" data-horizontal="center" data-vertical="40%"
		data-show-transition="down" data-hide-transition="up">
		consectetur adipisicing elit
	</p>

	<div class="sp-layer sp-static">Static content</div>
</div>

There are several predefined classes that can be passed to layers in order to style them. The position, size and animations are set using data attributes.

Predefined classes:

sp-static

Sets the layer to be visible all the time, not animated.

sp-black

Adds a black and transparent background and makes the font color white.

sp-white

Adds a white and transparent background and makes the font color black.

sp-padding

Adds a 10 pixel padding to the layer.

sp-rounded

Makes the layer's corners rounded.

Data attributes:

data-width

Sets the width of the layer. Can be set to a fixed or percentage value. If it's not set, the layer's width will adapt to the width of the inner content.

data-height

Sets the height of the layer. Can be set to a fixed or percentage value. If it's not set, the layer's height will adapt to the height of the inner content.

data-depth

Sets the depth (z-index, in CSS terms) of the layer.

data-position

Sets the position of the layer. Can be set to 'topLeft' (which is the default value), 'topCenter', 'topRight', 'bottomLeft', 'bottomCenter', 'bottomRight', 'centerLeft', 'centerRight' and 'centerCenter'.

data-horizontal

Sets the horizontal position of the layer, using the value specified for data-position as a reference point. Can be set to a fixed or percentage value.

data-vertical

Sets the vertical position of the layer, using the value specified for data-position as a reference point. Can be set to a fixed or percentage value.

data-show-transition

Sets the transition of the layer when it appears in the slide. Can be set to 'left', 'right', 'up' or 'down', these values describing the direction in which the layer will move when it appears.

data-show-offset

Sets an offset for the position of the layer from which the layer will be animated towards the final position when it appears in the slide. Needs to be set to a fixed value.

data-show-duration

Sets the duration of the show transition.

data-show-delay

Sets a delay for the show transition. This delay starts from the moment when the transition to the new slide starts.

data-hide-transition

Sets the transition of the layer when it disappears from the slide. Can be set to 'left', 'right', 'up' or 'down', these values describing the direction in which the layer will move when it disappears.

data-hide-offset

Sets an offset for the position of the layer towards which the layer will be animated from the original position when it disappears from the slide. Needs to be set to a fixed value.

data-hide-duration

Sets the duration of the hide transition.

data-hide-delay

Sets a delay for the hide transition.

data-stay-duration

Sets how much time a layer will stay visible before being hidden automatically.

The layers are animated using CSS3 transitions in most browsers. In IE9 and IE8 (where CSS3 transitions are not supported), the layers will only fade in/out, and in IE7 and older, the layers will appear without any animation.

Customizable properties: waitForLayers, autoScaleLayers and autoScaleReference.


9. Deep Linking

Provides the possibility to link to a specific slide in the slider. You can use this to have the slider opened at a specific slide when the page loads or to navigate to a specific slide at a later time.

The hash that needs to be appended to the URL consists of the 'id' attribute of the slider and the index of the slide separated by a slash character (/). For example, https://domain.com/page#my-slider/0 will open the first slide (because slide indexes start with 0) in the slider that has the 'id' set to 'my-slider'.

It's also possible to specify the 'id' attribute of the slide instead of its index.

Example:

<div id="my-slider" class="slider-pro">
	<div class="sp-slides">
		<div class="sp-slide">
			<img class="sp-image" src="path/to/image1.jpg"/>
		</div>

		<div id="my-slide" class="sp-slide">
			<img class="sp-image" src="path/to/image2.jpg"/>
		</div>

		<div class="sp-slide">
			<img class="sp-image" src="path/to/image3.jpg"/>
		</div>
	</div>
</div>

In order to open the second slide, you can use either https://domain.com/page#my-slider/1 or https://domain.com/page#my-slider/my-slide.

Customizable properties: updateHash.


10. Autoplay

Adds autoplay functionality.

Customizable properties: autoplay, autoplayDelay, autoplayDirection and autoplayOnHover.


11. Touch Swipe

Adds touch-swipe functionality for the slides. The module also adds mouse drag functionality on non-touch screen devices.

Customizable properties: touchSwipe and touchSwipeThreshold.


12. Buttons

Adds navigation buttons below the slider.

Customizable properties: buttons.


13. Arrows

Adds navigation arrows for the slides.

Customizable properties: arrows and fadeArrows.


14. Keyboard

Adds keyboard navigation support. The arrow keys will move the slider to the next or previous slide, and the Enter key will open the link attached to the slide's main image.

Customizable properties: keyboard and keyboardOnlyOnFocus.


15. Thumbnails

This module adds support for thumbnails. Thumbnails can contain any HTML content, from simple images to more complex structures that include both text and images.

There are two possible variations for adding thumbnails:

  • Add them separately from slides, in their own container, sp-thumbnails.

Example:

<div class="slider-pro">
	<div class="sp-slides">
		...
	</div>

	<div class="sp-thumbnails">
		<img class="sp-thumbnail" src="path/to/thumbnail.jpg"/>

		<p class="sp-thumbnail">Thumbnail 2</p>

		<div class="sp-thumbnail">
			<img class="sp-thumbnail-image" src="path/to/thumbnail.jpg"/>
			<p class="sp-thumbnail-text">Tempor incididunt ut labore et dolore magna</p>
		</div>
	</div>
</div>
  • Add each thumbnail in the sp-slide element to which it corresponds.

Example:

<div class="slider-pro">
	<div class="sp-slides">
		<div class="sp-slide">
			<img class="sp-image" src="path/to/image1.jpg"/>

			<img class="sp-thumbnail" src="path/to/thumbnail.jpg"/>
		</div>

		<div id="my-slide" class="sp-slide">
			<img class="sp-image" src="path/to/image2.jpg"/>

			<p class="sp-thumbnail">Thumbnail 2</p>
		</div>

		<div class="sp-slide">
			<img class="sp-image" src="path/to/image3.jpg"/>

			<div class="sp-thumbnail">
				<img class="sp-thumbnail-image" src="path/to/thumbnail.jpg"/>
				<p class="sp-thumbnail-text">Tempor incididunt ut labore et dolore magna</p>
			</div>
		</div>
	</div>
</div>

You can use which variations you think is more semantic for your implementation.

Customizable properties: thumbnailWidth, thumbnailHeight, thumbnailsPosition and thumbnailPointer.


16. Thumbnail Touch Swipe

Adds touch swipe functionality for the thumbnails.

Customizable properties: thumbnailTouchSwipe.


17. Thumbnail Arrows

Adds navigation arrows for the thumbnails.

Customizable properties: thumbnailArrows and fadeThumbnailArrows.


18. Video

Provides automatic control of the videos loaded inside the slider. For example, the video will pause automatically when another slide is selected or, if the autoplay is running, it will be paused when a video starts playing.

The video types or providers supported by this module are: YouTube, Vimeo, HTML5 and Video.js.

In order to have a video automatically controlled by the slider, the video must have the sp-video class. Also, there are some provider-specific requirements for the videos, as presented below.

Customizable properties: reachVideoAction, leaveVideoAction, playVideoAction, pauseVideoAction and endVideoAction.

YouTube

YouTube videos can be loaded in two ways: by using a poster image with a link to the YouTube video or by inserting directly the video iframe provided by YouTube.

Example 1:

<a class="sp-video" href="//www.youtube.com/watch?v=oaDkph9yQBs">
    <img src="path/to/poster.jpg" width="500" height="300"/>
</a>

When using the second method, the videos will need to have the enablejsapi=1 parameter appended to the URL of the video. It's also recommended to append the wmode=opaque parameter. The parameters need to be delimited by &amp;.

Example 2:

<iframe class="sp-video" src="https://www.youtube.com/embed/msIjWthwWwI?enablejsapi=1&amp;wmode=opaque" width="500" height="350" frameborder="0" allowfullscreen></iframe>
Vimeo

Just like YouTube videos, Vimeo videos can also be loaded by using a poster image or by inserting directly the video iframe.

Example 1:

<a class="sp-video" href="https://vimeo.com/109354891">
    <img src="path/to/poster.jpg" width="500" height="300"/>
</a>

When using the second method, the videos will need to have the api=1 parameter appended to the URL of the video.

Example 2:

<iframe class="sp-video" src="https://player.vimeo.com/video/109354891?api=1" width="500" height="300" frameborder="0" allowfullscreen></iframe>
HTML5

Simple HTML5 videos don't need any preparations other than having the sp-video class.

Example:

<video class="sp-video" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none">
	<source src="path/to/video.mp4" type="video/mp4"/>
	<source src="path/to/video.ogv" type="video/ogg"/>
</video>
Video.js

Videos using Video.js also need the sp-video class, in addition to the other video.js specific requirements, like adding the video-js class or the data-setup={} attribute.

Example:

<video class="sp-video video-js" poster="path/to/poster.jpg" width="500" height="350" controls="controls" preload="none" data-setup="{}">
	<source src="path/to/video.mp4" type="video/mp4"/>
	<source src="path/to/video.ogv" type="video/ogg"/>
</video>

Support

If you found a bug or have a feature suggestion, please submit it in the Issues tracker.

If you need extensive help with implementing the slider in your project, you can contact me.

License

The plugin is available under the MIT license.