Excolo Slider

A simple jquery sliding plugin, supporting responsive design and touch.

A DIV slide

Under development. I'll post future features and enhancements, in the issue tracker.

Should you find bugs or want to suggest a feature, feel free to post it in an issue on the GitHub project page. :-)

Features:

AutoPlay Slideshow
Mouse slide navigation
Prev/next button navigation
HTML5 data-attribute captions
Pagination
Repeat when last slide is reached
Play the slideshow backwards
Auto adjust size initially and on browser resize, for responsive designs
Touch enabled (limited to a few browsers)
Can be molded into beauty using CSS

Most of these features can be configured and turned off, when setting up the slider.

Installation

First you download the plugin by following one of the links in the sidebar, or by visiting Excolo-Slider on Github.

Another option is to install our NuGet package using this command:


                PM> Install-Package Excolo-Slider

If you didn't use NuGet you'll have to insert the plugin files in the folders of your choice on your server. The files you'll need to insert is:


                query-1.9.1.min.js
                jquery.excoloSlider.min.js
                jquery.excoloSlider.css

These can be inserted in whatever folder you wish.

In the header of your website, you insert the references to jquery and the slider plugin:

Here I've placed the files in the javascripts and stylesheets folder, but you can just reference using the folder you chose to insert the files into. If you used NuGet, the javascript files are placed in the folder Scripts, the stylesheet is placed in the folder Content and the images is placed in the folder Images.

The HTML code for the slides is simply a div container, with any child objects being the slides:

Notice how you can use the HTML5 data-attribute data-plugin-slide-caption to create a caption text for each slide. These captions allow HTML and can be fully styled using css

Then to initialize the slider plugin with default settings you insert the script:


                $(function () {
                    $("#slider").excoloSlider();
                });

...and that's about all there is to it.
In the next section you can see how to configure the slider to your needs.

Configuration

You have a few options when configuring your slider.
One option is to provide the settings as a parameter when initializing the slider:


                $(function () {
                    $("#slider").excoloSlider({
                        mouseNav: false,
                        interval: 5000, // = 5 seconds
                        playReverse: true
                    });
                });

Another option is to provide the settings using the data attribute in the slide container:


                $(function () {
                    $("#slider").excoloSlider();
                });

...

Options

Option:	Default:	Description:
width	800	The width of the slider. If autoSize is set to true, then the width is used to calculate the width/height ratio.
height	530	The height of the slider. If autoSize is set to true, then the height is used to calculate the width/height ratio.
autoSize	true	When set to true, the slider expands to fill it's container, and resizes if the container changes resize - e.g. if the windows is resized or the slider is shown on a smaller screen (e.g. a mobile device). Turning this option off, will remove the responsiveness of the slider.
touchNav	true	Enables you to turn off or on, the touch navigation events. Some touch devices uses mouse events for touch gestures, so turning touchNav off might not disable touch on all devices. See option mouseNav, to solve this.
mouseNav	true	Enables you to turn off or on, the mouse navigation, disabling sliding when dragging the slider left or right. Some touch devices uses mouse events for touch gestures, so turning this off might disable touch on some devices as well.
prevnextNav	true	Enables you to turn off or on the previous/next button navigation. When on, the plugin generates the necessary html within the slider object.
prevnextAutoHide	true	Decides whether the previous/next buttons should hide whenever the mouse pointer leaves the slider area. It is recommended to turn this off for touch devices (this might be done automatically in a future version).
pagerNav	true	Enables you to turn off or on, the slide pagination. When turned on, the plugin generates a list where each element corresponds to a slide and by clicking an element, the associated slide is shown.
startSlide	1	Defines which slide to start with when the slider is initialized. If playReverse is true and startSlide is 1, then the slider starts with the last slide instead of the first.
autoPlay	true	If set to true the slider automatically starts playing the slideshow when initialized, by cycling the slides.
delay	0	Defines the delay in milliseconds (1000ms = 1 second) before the sliders starts cycling when the slideshow starts playing.
interval	3000	Defines the time in milliseconds (1000ms = 1 second) between each slide action when the slideshow is playing.
repeat	true	When set to true the slider continues with the first slide, once the last slide is reached when the slideshow is playing.
playReverse	false	When set to true the slider will slide in the opposite direction when the slideshow is playing.
hoverPause	true	If to true the slidshow will pause playing, when hovering the mouse over the slider.
captionAutoHide	false	Decides whether the HTML5 caption text should hide whenever the mouse pointer leaves the slider area. The effect is similar to the prev/next navigation autohide and they will show/hide simultaniously on hover.
animationCssTransitions	true	Defines whether to use CSS3 transitions rather than jquery animations when transitioning slides. CSS3 transitions are recommended, as they usually perform much smoother.
animationDuration	500	Defines the time in milliseconds (1000ms = 1 second) that it takes the animation to finish a transition. By lowering this the slide will appear to slide faster. This should not be larger than the interval and preferably not higher than 2000ms, unless you have a lot of slides. Higher values might introduce flickering if interval is number of slides is low.
animationTimingFunction	"linear"	Defines the CSS3 transition animation timing function. This change the appearance of the animation, e.g. the slide could be made to move slower towards the end of the animation.
prevButtonClass	"slide-prev"	Defines the CSS class for the previous button, used for styling the navigation button.
nextButtonClass	"slide-next"	Defines the CSS class for the next button, used for styling the navigation button.
prevButtonImage	"images/prev.png"	The relative path to the previous button icon.
nextButtonImage	"images/next.png"	The relative path to the next button icon.
activeSlideClass	"es-active"	Defines the CSS class of the slide currently active.
slideCaptionClass	"es-caption"	Defines the CSS class of the caption div element used for caption text within a slide.
pagerClass	"es-pager"	Defines the CSS class of the pagination ul element used for containing the page/slide links.
pagerImage	"Images/pagericon.png"	The relative path to the image used for the pager bullets. The default image is of size 16x32px and contains both the standard bullet and the hover/active bullet. The hover and active bullet effect is done by changing background location.

Examples

Default Slider

This slider is setup with default settings.

Auto Play is on
Auto Size is on
Repeat is on
Prev/next navigation buttons are on
Prev/next navigation autohide is on
Pagination is on
Touch navigation is on
Mouse navigation is on
Pause on hover is on
CSS3 transitions is on
Delay is 0ms
Slide interval is 3000ms (3s)

The beautiful photos used in these examples were used with permission from the photographer Piotr Furs.
These photos, and more, are available at his deviantArt profile, Fursik.