This time I will share jQuery Plugin and tutorial about Touch-enabled jQuery Carousel Slider Plugin with jQuery – Prrple Slider, hope it will help you in programming stack.
| File Size: | 113 KB |
|---|---|
| Views Total: | 9361 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Prrple Slider is a jQuery plugin for creating a simple yet feature-rich carousel slider that features responsive layout, touch events, custom animations and infinite looping.
More features:
- Horizontal or vertical mode
- slide or fade animations
- Autoplay.
- Cross browser.
- Auto resize slider on browser resize
- Callback functions
- Easing effects. (Requires jQuery easing plugin)
How to use it:
1. Include the jQuery Prrple Slider’s CSS file in the head section, which will provide the basic styles for your sliders.
1 |
<link href="prrple.slider.css" rel="stylesheet"> |
2. Include jQuery library and the jQuery Prrple Slider’s plugin when needed.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
2 |
<script src="prrple.slider.js"></script> |
3. Include the jQuery touchSwipe plugin that will provide the touch gestures support for your sliders.
1 |
<script src="jquery.touchSwipe.min.js"></script> |
4. The markup structure for the slider. The plugin currently supports any type of html elements like text, DIVs, images and many more.
01 |
<div class="slider"> |
02 |
<div class="slider_area"> |
03 |
<div class="slides"> |
04 |
<div class="slide"> |
05 |
<div class="slidetitle">1</div> |
06 |
</div> |
07 |
<div class="slide"> |
08 |
<div class="slidetitle">2</div> |
09 |
</div> |
10 |
<div class="slide"> |
11 |
<div class="slidetitle">3</div> |
12 |
</div> |
13 |
</div> |
14 |
</div> |
15 |
<div class="slider_nav"></div> |
16 |
<a class="slide_left">Left</a> |
17 |
<a class="slide_right">Right</a> |
18 |
</div> |
5. Initialize the plugin with default options to create a basic slider.
1 |
$('.slider').prrpleSlider(); |
6. Customize your slider with the following options.
001 |
$('.slider').prrpleSlider({ |
002 |
003 |
// define slider area element |
004 |
el_slider_area: '.slider_area', |
005 |
006 |
// define slides element |
007 |
el_slides: '.slides', |
008 |
009 |
// define slide elements |
010 |
el_slide: '.slide', |
011 |
012 |
// define left arrow element |
013 |
el_left: '.slide_left', |
014 |
015 |
// define right arrow element |
016 |
el_right: '.slide_right', |
017 |
018 |
// define nav dot wrapper |
019 |
el_dotwrap: '.slider_dotwrap', |
020 |
021 |
// define nav dots |
022 |
el_dot: '.slider_dot', |
023 |
024 |
// define arrow wrapper |
025 |
el_controls: '.slider_controls', |
026 |
027 |
// define play button |
028 |
el_play: '.slider_play', |
029 |
030 |
// define pause button |
031 |
el_pause: '.slider_pause', |
032 |
|
033 |
// define specific width |
034 |
width: null, |
035 |
036 |
// define specific height |
037 |
height: null, |
038 |
039 |
// spacing between slides |
040 |
spacing: 0, |
041 |
042 |
// how many slides in viewport |
043 |
multiple: 1, |
044 |
045 |
// enable swiping? |
046 |
swiping: true, |
047 |
048 |
// use rich swiping? |
049 |
richSwiping: true, |
050 |
|
051 |
// horizontal or vertical |
052 |
direction: 'horizontal', |
053 |
054 |
// fade or slide |
055 |
transition: 'fade', |
056 |
057 |
// how long to change slides |
058 |
transitionTime: 500, |
059 |
060 |
// requires jquery easing plugin |
061 |
easing: 'swing', |
062 |
063 |
// whether or not to infinitely loop the slider |
064 |
loop: false, |
065 |
066 |
// whether or not a looping slider should seamlessly rotate |
067 |
loopSeamless: true, |
068 |
069 |
// use css transforms? |
070 |
csstransforms: false, |
071 |
|
072 |
// play slider automatically? |
073 |
autoPlay: false, |
074 |
075 |
// how often to automatically switch between slides |
source : jquery.net
