17 |
18 |
19 |
20 |
25 |
26 |
27 |
28 |
29 |
--------------------------------------------------------------------------------
/sample/style.css:
--------------------------------------------------------------------------------
1 | @font-face{
2 | font-family:'op-sans';
3 | src:url('opensans.ttf') format('truetype'),
4 | src:url('opensans.woff') format('woff');
5 | }
6 | body{
7 | font-family:'op-sans',sans-serif;
8 | }
9 | /*Pocha slider main Presentation*/
10 |
11 |
12 | /*pocha slider sample css*/
13 | .slidercontainer{
14 | position:relative;
15 | width:100%;
16 | text-align:center;
17 | margin-top:150px;
18 | }
19 | .slide{
20 | position:absolute;
21 | transition:all 1s;
22 | font-size:100px;
23 | width:100%;
24 | text-align:center;
25 | }
26 | .pochaslider-active{
27 | opacity:1;
28 | transform:scale(1);
29 | }
30 | .pochaslider-next{
31 | transform:scale(0);
32 | opacity:0;
33 | }
34 | .pochaslider-passed{
35 | transform:scale(3);
36 | opacity:0;
37 | }
38 | .pochaslider-idle{
39 | opacity:0;
40 | }
--------------------------------------------------------------------------------
/pochaslider.min.js:
--------------------------------------------------------------------------------
1 | !function(s){s.fn.extend({pochaSlider:function(a){a||(a={});var e=s(this);a.autoPlay||0==a.autoPlay||(a.autoPlay=!0);var l=!a.autoPlay,t=a.idleClass||"pochaslider-idle";if(a.pauseOnHover||0==a.pauseOnHover||(a.pauseOnHover=!1),e.addClass(t),e.length>1){a.activeClass||(a.activeClass="pochaslider-active"),a.nextClass||(a.nextClass="pochaslider-next"),a.passedClass||(a.passedClass="pochaslider-passed");var d="."+a.activeClass,o="."+a.nextClass,C="."+a.passedClass,n=!1;s(e[0]).addClass(a.activeClass).removeClass(t),s(e[1]).addClass(a.nextClass).removeClass(t),s(e[e.length-1]).addClass(a.passedClass).removeClass(t);var i=function(r){if(!n){e.filter(C).addClass(t).removeClass(a.passedClass),e.filter(d).removeClass(a.activeClass).addClass(a.passedClass);var v=e.index(s(o));v+1>e.length-1?v=0:v+=1,e.filter(o).addClass(a.activeClass).removeClass(a.nextClass),s(e[v]).addClass(a.nextClass).removeClass(t)}var u=s(e.filter(d)[0]).data("stay")||a.delay||1e3;"-1"==u&&(l=!0),r||l||setTimeout(i,u)},r=function(){var l=e.filter(d),n=e.filter(o),i=e.filter(C),r=e.index(i)-1>=0?e.index(i)-1:e.length-1;s(e[r]).removeClass(t).addClass(a.passedClass),l.removeClass(a.activeClass).addClass(a.nextClass),n.removeClass(a.nextClass).addClass(t),i.addClass(a.activeClass).removeClass(a.passedClass)},v=s(e.filter(d)[0]).data("stay")||a.delay||1e3;!l&&setTimeout(i,v);var u=function(l){if(!(l=0))return!1;var n=s(e[l]),i=l+1=0?l-1:e.length-1,u=s(e[v]);s(d).removeClass(a.activeClass).addClass(t),s(o).removeClass(a.nextClass).addClass(t),s(C).removeClass(a.passedClass).addClass(t),n.addClass(a.activeClass).removeClass(t),r.addClass(a.nextClass).removeClass(t),u.addClass(a.passedClass).removeClass(t)}}s(document).keydown(function(s){a.keyboardNavigation&&1==a.keyboardNavigation&&(39==s.keyCode||32==s.keyCode?(s.preventDefault(),i(1)):37==s.keyCode&&(s.preventDefault(),r()))}),e.mouseenter(function(s){s.stopImmediatePropagation(),a.pauseOnHover&&1==a.autoPlay&&(n=!0)}).mouseleave(function(s){s.stopImmediatePropagation(),a.pauseOnHover&&1==a.autoPlay&&(n=!1)});var c={next:function(){i(1)},previous:function(){r()},stop:function(){l=!0},pause:function(){n=!0},goTo:function(s){u(s)},play:function(){l&&(l=!1,i()),n&&(n=!1)}};return c}})}(jQuery);
2 |
--------------------------------------------------------------------------------
/pochaslider.js:
--------------------------------------------------------------------------------
1 | // Pocha Slider : where things are beyond simple
2 | (function($){$.fn.extend({
3 | pochaSlider : function(params){
4 | if(!params)
5 | params = {};
6 | var elements = $(this);
7 | params.autoPlay || (params.autoPlay==false) || (params.autoPlay = true);
8 | var stopped = !params.autoPlay;
9 | // console.log(stopped);
10 | var idle = params.idleClass || 'pochaslider-idle';
11 | params.pauseOnHover || (params.pauseOnHover == false) || (params.pauseOnHover = false);
12 | elements.addClass(idle);
13 | if(elements.length>1){
14 | params.activeClass || (params.activeClass = 'pochaslider-active');
15 | params.nextClass || (params.nextClass = 'pochaslider-next');
16 | params.passedClass || (params.passedClass = 'pochaslider-passed');
17 | var active = "."+params.activeClass;
18 | var next = "." + params.nextClass;
19 | var passed = "." + params.passedClass;
20 | var paused = false;
21 | $(elements[0]).addClass(params.activeClass).removeClass(idle);
22 | $(elements[1]).addClass(params.nextClass).removeClass(idle);
23 | $(elements[elements.length-1]).addClass(params.passedClass).removeClass(idle);
24 | var gotoNextSlide = function(state){
25 | if(!paused){
26 | //Step 0: set last passed item as idle
27 | elements.filter(passed).addClass(idle).removeClass(params.passedClass);
28 | //step 1: change active to passed
29 | elements.filter(active).removeClass(params.activeClass).addClass(params.passedClass);
30 | //Step 2: Set up what's gonna come next
31 | var nxtindex = elements.index($(next));
32 | if(nxtindex+1>elements.length-1){
33 | nxtindex = 0
34 | }
35 | else{
36 | nxtindex = nxtindex+1;
37 | }
38 | //Step 3: set the next item as active
39 | elements.filter(next).addClass(params.activeClass).removeClass(params.nextClass);
40 | //Step 4: set up the next item
41 | $(elements[nxtindex]).addClass(params.nextClass).removeClass(idle);
42 | //see if the element has custom delay
43 | }
44 | var delay = $(elements.filter(active)[0]).data('stay') || params.delay || 1000; //default 1s
45 | // console.log(delay);
46 | (delay == "-1") && (stopped = true); // if delay is -1, stop the slideshow
47 | state || stopped || setTimeout(gotoNextSlide,delay);
48 |
49 | }
50 | var gotoPreviousSlide = function(){
51 | var actv = elements.filter(active);
52 | var nextc = elements.filter(next);
53 | var passd = elements.filter(passed);
54 | var psdnxt = (elements.index(passd)-1>=0)?(elements.index(passd)-1):(elements.length-1);
55 | // console.log(actv);
56 | // console.log(nextc);
57 | // console.log(passd);
58 | // console.log(psdnxt);
59 | $(elements[psdnxt]).removeClass(idle).addClass(params.passedClass);
60 | actv.removeClass(params.activeClass).addClass(params.nextClass);
61 | nextc.removeClass(params.nextClass).addClass(idle);
62 | passd.addClass(params.activeClass).removeClass(params.passedClass);
63 | }
64 | var delay = $(elements.filter(active)[0]).data('stay') || params.delay || 1000;
65 | !stopped && setTimeout(gotoNextSlide,delay);
66 | //gotoSlide implimentation
67 | var gotoSlide = function(index){
68 | if(index=0){ //valid index
69 | var actel = $(elements[index]);
70 | var nxtindx = ((index+1)=0)?(index-1):(elements.length-1);
73 | var prevel = $(elements[preindx]);
74 | //make everything idle
75 | $(active).removeClass(params.activeClass).addClass(idle);
76 | $(next).removeClass(params.nextClass).addClass(idle);
77 | $(passed).removeClass(params.passedClass).addClass(idle);
78 | actel.addClass(params.activeClass).removeClass(idle);
79 | nxtel.addClass(params.nextClass).removeClass(idle);
80 | prevel.addClass(params.passedClass).removeClass(idle);
81 | }
82 | else{
83 | return false;
84 | }
85 | }
86 | }
87 |
88 | //keyboard navigation
89 | $(document).keydown(function(e){
90 | if(params.keyboardNavigation && params.keyboardNavigation == true){
91 | if(e.keyCode == 39 || e.keyCode == 32){ // space or keyboardnext
92 | //next Slide
93 | e.preventDefault();
94 | gotoNextSlide(1);
95 | }
96 | else if(e.keyCode == 37){ // keyboardprevious
97 | //previous slide
98 | e.preventDefault();
99 | gotoPreviousSlide();
100 | }
101 | }
102 | });
103 | //Pause on hover
104 | elements.mouseenter(function(e){
105 | //stop the animation if necessary
106 | e.stopImmediatePropagation();
107 | params.pauseOnHover && (params.autoPlay ==true) && (paused = true); //get the stopped flag to true
108 | }).mouseleave(function(e){
109 | //replay the animation if required
110 | e.stopImmediatePropagation();
111 | params.pauseOnHover && (params.autoPlay ==true) && (paused = false);
112 | });
113 | var slideControl = {
114 | next : function(){gotoNextSlide(1)},
115 | previous : function(){gotoPreviousSlide()},
116 | stop : function(){stopped=true},
117 | pause : function(){paused=true},
118 | goTo : function(index){gotoSlide(index)},
119 | play : function(){if(stopped){stopped=false;gotoNextSlide()};if(paused){paused=false}}
120 | };
121 | return slideControl;
122 | }
123 | })})(jQuery);
124 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # jQuery Pocha Slider : A highly customizable multipurpose Slider / Presentation framework
4 | ###### A new slider for everyone
5 | ****
6 |
7 | ##### yet another slider? Check out [This demo](http://theanam.github.io/pochaslider) to find out why.
8 |
9 | ### Features:
10 |
11 | * pure css3 transition based effects
12 | * Per element timing
13 | * Per element effect
14 | * Easily customizable
15 | * keyboard navigation
16 | * Presentation mode (can be used as presentation framework as well)
17 | * Responsive on demand
18 | * takes five minute to learn and start working
19 | * Small codebase, easily customizable
20 | * Lets you use your Existing CSS skills.
21 |
22 | ### How it works
23 |
24 | **pocha slider** is a one file slider. there's only one file : `pochaslider.js` or you can use `pochaslider.min.js` , as It's a jQuery plugin, you must have jQuery included as well.
25 |
26 | PochaSlider works with a simple principle, every element in pocha slider has four states:
27 |
28 | * idle state (when the element is not anywhere in the context)
29 | * active state (when the element is in focus)
30 | * next state (when the element will be in active state in the next iteration)
31 | * passed state (when the element just passsed active state in the last iteration)
32 |
33 | so, so every element goes through the following cycle:
34 |
35 | __*idle - next - active - passed - idle*__
36 |
37 | if you take a look at the list **below**, you'll understand how it works in the list:
38 |
39 | if we assume active element is 'A', next element is 'N' and passed element is 'P' and idle elements are 'I' then the first iteration is,
40 | ####`ANIIP`
41 | the second iteration would be :
42 | ####`PANII`
43 | so, the P became I and N became A, the A became P
44 | and the third iteration would be:
45 | ####`IPANI`
46 | and so on...
47 | okay not if you still don't get it, you'll understand from the sample code below.
48 |
49 | ### Sample Implementation
50 |
51 | Our objective is to *create a simple text effect, every single item will zoom in hold for one second, and then burst out (zoom in and vanish). we also want the __fourth__ item to stay a little bit longer, 2 seconds instead of 1.* Let's create it.
52 |
53 | So, we need to create the markup first:
54 | ````html
55 |
56 |
Pocha
57 |
Slider
58 |
Is
59 |
Really
60 |
Awesome
61 |
62 | ````
63 | so, the first thing you learned about Pocha slider is, you can specify per element staying time by passing the element a data attribute `data-stay`, this takes value in milleseconds. so 2000 = 2 seconds.
64 |
65 | > if `data-stay` is `-1` , then the slider will stop at that slide. and you can then play it again with the `play()` method.
66 |
67 | and the second thing to notice that, you need to have the same class (or something you can use to select them all with jQuery).
68 |
69 | okay, now you need to add some magic to it with CSS3, that's where all the effects would be. Write the CSS below:
70 |
71 | ````css
72 | .slidercontainer{
73 | position:relative; /*because elements inside would be position:absolute*/
74 | }
75 | .slide{
76 | position:absolute; /*stack all the slides one over another*/
77 | transition:all 1s; /*this makes things animated, note the 1s, it's the animation duration*/
78 | font-size:100px; /*you know you can ignore it*/
79 | }
80 |
81 |
82 | .pochaslider-active{ /*style for the active state*/
83 | opacity:1;
84 | transform:scale(1);
85 | }
86 | .pochaslider-next{
87 | /*style before the active state, more like getting ready for transition to active state*/
88 | transform:scale(0);
89 | opacity:0;
90 | }
91 | .pochaslider-passed{
92 | /*style after the active state has passed passed, or simply the end point of exit animation*/
93 | transform:scale(3);
94 | opacity:0;
95 | }
96 | .pochaslider-idle{
97 | /*style for the idle state, something that won't interrupt the overall look, may be different as well*/
98 | opacity:0;
99 | }
100 | ````
101 |
102 | Now that the stylesheet is ready, you need to add **jQuery** and **pochaslider.min.js** in your document. Let's do it.
103 | ````html
104 |
105 |
106 | ````
107 | now there's only one step left, initializing the slider, that's also simple:
108 | ````html
109 |
115 | ````
116 | yay! you have done it! if you've successfully followed all the instructions, you'll get something like [this](http://demo.anam.co/pochaslider1)
117 |
118 | #### Options :
119 |
120 | Options are passed using a **JSON** object, that may include these following properties.
121 |
122 | ##### delay (number) :
123 | Specifies the time each element will stay (in milleseconds). default : `1000` (1 Second)
124 | ##### activeClass (String) :
125 | the CSS class added to the element at active state. default : `pochaslider-active`
126 | ##### nextClass (String) :
127 | the CSS class added to the element to be active in the next sequence (the next slide).useful for determining the initial state of animation before coming in. default : `pochaslider-next`
128 | ##### passedClass (String) :
129 | the CSS class added to the element that was active in the last iteration. useful to determinte behavior how elements will go away. default : `pochaslider-passed`
130 | ##### idleClass (String) :
131 | The CSS class added to any other element that's not active, passed or next. can be useful to hide the rest of the slides. default : `pochaslider-idle`
132 | ##### autoPlay (boolean) :
133 | if set true, the slides will change automatically. default : `true`
134 | ##### keyboardNavigation (boolean) :
135 | if set true, the slides can be changed using the keyboard, button ←→ and spacebar . default : `false`
136 | ##### pauseOnHover (boolean) :
137 | if set true, autoplay will pause if the user has autoplay enabled. default : `false`
138 |
139 | #### Controlling the behavior at runtime :
140 | One thing to notice that pochaSlider doesn't return the same jQuery object. It returns a control object instead. So, you can't do something like `$('.slide').pochaSlider().hide();` but yeah, who wants to hide a brand new initialized slider (lol) . but the control object that it retuens, is useful to control the overall behavior of the slider. to get the control object, assign it to a variable like this :
141 |
142 | ````js
143 | var slider = $('.slide').pochaSlider();
144 | //do something with the slider object, for example: pause it.
145 | slider.pause() // pause the animation
146 | ````
147 | control functions are :
148 |
149 | ##### play() :
150 | plays a stopped or paused slideshow.
151 | ##### pause() :
152 | pauses a slideshow. (Immediately stops the animations).
153 | ##### stop() :
154 | stops the animation after the last animation is complete.
155 | ##### next() :
156 | go to the next Slide
157 | ##### previous() :
158 | go to the previous Slide
159 | ##### goTo(index) :
160 | go to the slide with given index (starting from 0)
161 | ###Footnote
162 |
163 | * The name came from a Bangla word 'pocha' that means rotten/bad .
164 | * pocha slider is still under active development, contributors welcome.
165 | * This project is released under the [MIT License](http://opensource.org/licenses/MIT)
166 | * You can share your creations with pocha slider by tweeting [@mranam](http://twitter.com/mranam) and I'll include them here.
167 | * You can request features with the issue tracker of this repository.
168 | * Pocha Slider is developed and maintained by [Anam Ahmed](http://anam.co)
169 | * Logo credit: [Ahmad Firoz](https://www.behance.net/ahmadfiroz)
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
178 |
179 |
180 |
181 |
182 |
183 |
184 |
185 |
186 |
187 |
188 |
--------------------------------------------------------------------------------