Responsive Video Slider was created as a plugin for our free WordPress gallery plugin, FooGallery. Seeing as the jQuery can still be used to create great looking and responsive video galleries we have decided to put it up here on GitHub for everyone to use.
Compiled and minified CSS and JavaScript ready for project use.
Once you've downloaded the plugin files, we've created a simple generator to help you get started using the plugin. Simply supply a supported video url and the generator will do the rest and provide you with the HTML, CSS and JavaScript required to create a slider.
Within the downloaded zip, you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.
The plugin requires jQuery to be included in your page.
Once downloaded and unzipped, you will see something like the below structure:
css/
├── rvslider.css
└── rvslider.min.css
js/
├── rvslider.js
└── rvslider.min.js
starter-template.html
The starter-template.html file contains the basic HTML structure required for the plugin to work. It contains a single generic item for you
to modify and then duplicate to create any additional items.
Responsive Video Slider is designed to work with pre-existing HTML, if you don't use the generator you will need to provide the markup that the plugin uses to create the slider.
The HTML structure is fairly simple and comprises of two main sections, items and nav. The items section is the larger of the two containing the actual videos while the nav section provides the thumbnails for each item.
<div class="rvs-container">
<div class="rvs-item-container">
<div class="rvs-item-stage">
<!-- items go here -->
</div>
</div>
<div class="rvs-nav-container">
<a class="rvs-nav-prev"></a>
<div class="rvs-nav-stage">
<!-- nav items go here -->
</div>
<a class="rvs-nav-next"></a>
</div>
</div>For every item added to the slider, a corresponding nav item must exist at the same index within its parent. The nav switches items based on index, so if the thumbnail is at a different index than the item it will display whatever is at that index instead of what you expect. It sounds more complicated than it is, just make sure your items and nav items are added in the same order. The basic structure of the main item can be seen below.
<div class="rvs-item" style="background-image: url(LARGE_VIDEO_IMAGE)">
<a href="VIDEO_URL" class="rvs-play-video"></a>
</div>
When creating items, you can include a text overlay that is then transitioned into view by simply placing a p element with a class of rvs-item-text within
the rvs-item element. As this overlay text will probably contain a title and a short description or author credits you can place an optional small element
within it to provide a second line of text that has a slightly smaller font size than the first.
<div class="rvs-item" style="background-image: url(LARGE_VIDEO_IMAGE)">
<p class="rvs-item-text">VIDEO_TITLE <small>VIDEO_CREDITS</small></p>
<a href="VIDEO_URL" class="rvs-play-video"></a>
</div>
By default this overlay text is displayed in the top left corner of an item however you can change this by applying one of the below positional classes to the
p.rvs-item-text element.
rvs-top-left - this is the default and is applied even if no class is supplied, text is positioned along the top of the item and is left aligned.rvs-top-center - text is positioned along the top of the item and is center aligned.rvs-top-right - text is positioned along the top of the item and is right aligned.rvs-bottom-left - text is positioned along the bottom of the item and is left aligned.rvs-bottom-center - text is positioned along the bottom of the item and is center aligned.rvs-bottom-right - text is positioned along the bottom of the item and is right aligned.
The nav is the smaller of the two areas the slider is divided into. It is used to display thumbnail representations of each item which must appear at the same index
within the .rvs-nav-stage element as the item appears within the .rvs-item-stage element. This nav item structure is as below.
<a class="rvs-nav-item">
<span style="background-image: url(SMALL_VIDEO_IMAGE)"></span>
<h4>VIDEO_TITLE</h4>
<small>VIDEO_CREDITS</small>
</a>Putting all the above together, we get the following markup that makes up a complete, albeit simple, single item slider.
<div class="rvs-container">
<div class="rvs-item-container">
<div class="rvs-item-stage">
<!-- items go here -->
<div class="rvs-item" style="background-image: url(LARGE_VIDEO_IMAGE)">
<p class="rvs-item-text">VIDEO_TITLE <small>VIDEO_CREDITS</small></p>
<a href="VIDEO_URL" class="rvs-play-video"></a>
</div>
</div>
</div>
<div class="rvs-nav-container">
<a class="rvs-nav-prev"></a>
<div class="rvs-nav-stage">
<!-- nav items go here -->
<a class="rvs-nav-item">
<span style="background-image: url(SMALL_VIDEO_IMAGE)"></span>
<h4>VIDEO_TITLE</h4>
<small>VIDEO_CREDITS</small>
</a>
</div>
<a class="rvs-nav-next"></a>
</div>
</div>Responsive Video Slider is designed to work from an HTML first perspective and has minimal JavaScript options that need to be set when using the plugin. Most, if not all, of the options you would change are supplied through applying CSS classes to the slider element.
When using any of the listed CSS classes they must be applied to the root .rvs-container element of the slider. In the below example replace
CSS_CLASS_NAME with the name of class you want to use.
<div class="rvs-container CSS_CLASS_NAME">
...
</div>The below CSS classes can be applied simultaneously to the root .rvs-container element of the slider.
rvs-horizontal - Switch the thumbnail layout from the default vertical on the right side to a horizontal layout along the bottom.rvs-light - Switch the theme from the default dark to the alternate light theme.rvs-thumb-play - Allow videos to be played by clicking on the thumbnail of the nav item.rvs-use-viewport - Use the viewport width when determining layout instead of the parent elements width.rvs-continuous-play - Allow videos to continue to play while navigating items.rvs-large-thumbs - Use large thumbnails (Not supported when using rvs-horizontal).The below lists the default highlight styles that can be used with the plugin. The highlight color is applied to the play and close buttons on hover and the nav items when the item is active.
rvs-blue-highlight - #0087bervs-green-highlight - #02874Arvs-orange-highlight - #FF8E31rvs-red-highlight - #F12B24Please note only one of the above highlight classes should be applied to the .rvs-container element at a time.
The below JavaScript options are generally not meant for end users and are normally left as their default values but are documented here as they can be used to tweak the slider to fit your exact needs.
An array defining the breakpoints, their classes, and the number of items to display when using the horizontal layout.
This is an array of arrays where the first item of each child array defines the minimum width of the parent or viewport. The second item specifies the CSS classes to apply at the breakpoint. The third item is the number of nav items to display at the breakpoint when using the horizontal layout.
null
If no array is supplied the plugin falls back to the below default configuration.
[ // number of items to display at various widths and the classes to apply
[480, 'rvs-xs', 2], // Width less than 480 equals 2 items
[768, 'rvs-xs rvs-sm', 3], // W > 480 && W < 768 = 3 items
[1024, 'rvs-xs rvs-sm rvs-md', 4], // W > 768 && W < 1024 = 4 items
[1280, 'rvs-xs rvs-sm rvs-md rvs-lg', 5], // W > 1024 && W < 1280 = 5 items
[1600, 'rvs-xs rvs-sm rvs-md rvs-lg rvs-xl', 6] // Effectively anything greater than 1280 will equal 6 items as this last value is used for anything larger.
]The below shows how to supply the breakpoints array directly through the options.
$(".rvs-container").rvslider({
"num": [
[480, 'rvs-xs', 2],
[768, 'rvs-xs rvs-sm', 3],
[1024, 'rvs-xs rvs-sm rvs-md', 4],
[1280, 'rvs-xs rvs-sm rvs-md rvs-lg', 5],
[1600, 'rvs-xs rvs-sm rvs-md rvs-lg rvs-xl', 6]
]
});The index of the item to be selected when the plugin initializes.
This is the zero based index used by the plugin on initialize to determine which item will be selected. Setting this to a number larger than the available number of items will result in the last item being selected. Similarly specifying a number smaller than zero will result in the first item being selected.
0
If no selected index is supplied, the plugin falls back to starting with zero.
The below shows how to supply the selected index directly through the options.
$(".rvs-container").rvslider({
"selected": 3
});The minimum distance a swipe must travel before being registered by the plugin.
This is the minimum distance in pixels that a swipe must travel before it is registered by the plugin as a legitimate swipe. A smaller number means the plugin is more sensitive to swipes.
20
If no deadzone is supplied, the plugin falls back to a starting value of 20px.
The below shows how to supply the deadzone directly through the options.
$(".rvs-container").rvslider({
"swipe": {
"deadzone": 30
}
});The minimum distance a swipe must travel before the plugin switches items.
This is the minimum distance, as a percent of the width of the item being swiped, that a swipe must travel before it is registered by the plugin as a legitimate swipe. A smaller number means the plugin is more sensitive to swipes.
0.15
If no value is supplied, the plugin falls back to a starting value of 15% of an items width.
The below shows how to supply the items value directly through the options.
$(".rvs-container").rvslider({
"swipe": {
"items": 0.25 // swipe must travel 25% of the items width
}
});The minimum distance a swipe must travel before the plugin scrolls the nav items.
This is the minimum distance, as a percent of either the width (horizontal slider) or height (vertical slider) of the nav item being swiped, that a swipe must travel before it is registered by the plugin as a legitimate swipe. A smaller number means the plugin is more sensitive to swipes.
0.4
If no value is supplied, the plugin falls back to a starting value of 40% of a nav items width or height depending on whether the slider is in its horizontal or vertical layout.
The below shows how to supply the nav value directly through the options.
$(".rvs-container").rvslider({
"swipe": {
"nav": 0.5 // swipe must travel 50% of the items width or height
}
});The number of touch points required for swiping.
This is the number of touch points required for the plugin to register the swipe and act accordingly. This is an exact number of touches to allow additional gestures to be added or existing ones to not be interfered with.
1
If no value is supplied, the plugin falls back to using a single touch point to register swipe gestures.
The below shows how to supply the touches value directly through the options.
$(".rvs-container").rvslider({
"swipe": {
"touches": 2 // swipe requires 2 touch points on the screen to be registered
}
});The below lists various examples to help you get started using Responsive Video Slider in your projects. Keep in mind the plugin provides the CSS and JavaScript while you need to supply the HTML.