JavaScript HTML CSS
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Prrple Slider

By Alex Bimpson @ 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 class="slide">
				Slide 2
			<div class="slide">
				Slide 3
			<div class="slide">
				Slide 4

Then, initiate the slider with javascript.


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.

	transition: 'slide',
	transitionTime: 500,
	autoPlay: true,
	callback: function(){}


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


Update the slider by passing in new options.



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



Slide to the left.



Slide to the right.



Pause an autoplaying slider.



Start autoplaying the slider.



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.



Returns the current slide number.



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