Prrple Slider

By Prrple

View online examples

Prrple Slider is a lightweight jQuery slider, first built partly as a learning excercise, and partly to enable tapping into desired features that weren't easily accessible from other open source sliders at the time. Initially intended only for bespoke internal projects, in 2015 an open source repo was finally started, and the slider has evolved and matured since then.

Getting Started

Include prrple.slider.js and prrple.slider.css in your document (found in the "src" folder of the repo). You'll also need jQuery, and if you want touch functionality, you'll need the TouchSwipe plugin.

Then, include the necessary HTML markup. In the latest versions, navigation arrows and dots are automatically generated, but you can use the options to disable this auto-generation and place these in the markup wherever you want within the .slider element.

<div id="mySlider" class="slider"> 	<div class="slider_area"> 		<div class="slides"> 			<div class="slide"> 				Slide 1 			</div> 			<div class="slide"> 				Slide 2 			</div> 			<div class="slide"> 				Slide 3 			</div> 			<div class="slide"> 				Slide 4 			</div> 		</div> 	</div> </div>

Then, initiate the slider with javascript.

$('#mySlider').prrpleSlider();

You can pass in any options when initiating. For a full list of up-to-date options, and their default values, check inside the latest prrple.slider.js file.

$('#mySlider').prrpleSlider({ 	transition: 'slide', 	transitionTime: 500, 	autoPlay: true, 	callback: function(){} });

Methods

There are several methods you can use on an initiated slider...

Update

Update the slider by passing in new options.

$('#mySlider').prrpleSliderUpdate(options);

GoTo

Go to a specific slide. You can also pass skip=true to skip the animation.

$('#mySlider').prrpleSliderGoTo(goTo,skip);

Left

Slide to the left.

$('#mySlider').prrpleSliderLeft();

Right

Slide to the right.

$('#mySlider').prrpleSliderRight();

Pause

Pause an autoplaying slider.

$('#mySlider').prrpleSliderPause();

Play

Start autoplaying the slider.

$('#mySlider').prrpleSliderPlay();

Resize

Trigger a slider resize. In the latest versions, this should happen automatically on browser window resize, but it's here in case you need to use it at other times.

$('#mySlider').prrpleSliderResize();

GetCurrent

Returns the current slide number.

$('#mySlider').prrpleSliderGetCurrent();

Remove

Completely removes the slider, all bound events and classes, and restores your HTML back to the way it was (hopefully).

$('#mySlider').prrpleSliderRemove();