Skip to content

Commit e290eca

Browse files
author
Vipul Kapoor
committed
Merge branch 'release/v0.1.1'
2 parents a6422c4 + 797f219 commit e290eca

4 files changed

Lines changed: 232 additions & 90 deletions

File tree

‎README.md‎

Lines changed: 76 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,77 @@
11
# partialViewSlider
2-
jQuery slider that shows part of adjacent slides to the left and right
2+
An extremely lightweight (8kb minified) jQuery slider that shows part of adjacent slides to the left and right.
3+
4+
## Features
5+
* Lightweight and Fast
6+
* Responsive
7+
* Touch ready
8+
* Multiple modes (Partial View, Perspective, Regular)
9+
* Adjustable center and side widths
10+
11+
## Getting Started
12+
Include the required files
13+
```
14+
<link rel="stylesheet" type="text/css" href="dist/partialviewslider.min.css">
15+
<script src="src/jquery-3.3.1.min.js"></script>
16+
<script src="dist/partialviewslider.min.js"></script>
17+
```
18+
Add some html
19+
```
20+
<ul id="partial-view">
21+
<li>
22+
<img src="src/img/img1.jpeg" />
23+
</li>
24+
<li>
25+
<img src="src/img/img2.jpeg" />
26+
</li>
27+
<li>
28+
<img src="src/img/img3.jpg" />
29+
</li>
30+
</ul>
31+
```
32+
Initialize the plugin after including above files
33+
```
34+
<script>
35+
$(document).ready(function(){
36+
$('#partial-view').partialViewSlider();
37+
});
38+
</script>
39+
```
40+
## Result
41+
![Preview](https://github.com/VeeK727/partialViewSlider/blob/master/src/img/preview.jpg "Result")
42+
43+
## Options
44+
| Name | Type | Default | Descriptions |
45+
| ----------------- |---------| --------| ------------- |
46+
| width | int | 70 | Width of center item in percentage. Set to 100% for a regular slider |
47+
| controls | boolean | true | Whether to display arrow controls |
48+
| controlsPosition | string | inside | inside: display arrows over the slides; outside: contract slides to make room for arrows on the outside; neighbors: push arrows out of the container and off the slides |
49+
| backdrop | boolean | true | Whether to show dark bands over adjacent slides |
50+
| auto | boolean | true | Whether the slides move automatically at set intervals |
51+
| transitionSpeed | int | 400 | time (ms) it takes to transition to another slide |
52+
| delay | int | 4000 | time (ms) between a slide is transitioned |
53+
| pauseOnHover | boolean | true | Whether autoplay can be paused when slider is hovered |
54+
| keyboard | boolean | true | Whether slider can be controled with keyboard left/right arrow keys |
55+
| perspective | boolean | false | Enable this to make adjoining slides smaller giving a perspective carousel look |
56+
| prevHtml | string | \<i class="material-icons">chevron_left\</i> | Html for previous slide button |
57+
| nextHtml | string | \<i class="material-icons">chevron_right\</i> | Html for next slide button |
58+
59+
## Events
60+
| Name | Description |
61+
| ----------- | ------------- |
62+
| onLoad | Executed when slider is initialized. The initialized element is returned as one parameter |
63+
| onSlideEnd | Executed when each slide finishes transition. The initialized element is returned as one parameter |
64+
65+
## Methods
66+
| Name | Description |
67+
| --------- | --------------------- |
68+
| prev | Go to previous slide |
69+
| next | Go to next slide |
70+
| play | Start autoplay |
71+
| pause | Stop autoplay |
72+
73+
Example:
74+
```
75+
var partialView = $('#partial-view').partialViewSlider();
76+
partialView.prev(); // Go to previous slide
77+
```

‎dist/partialviewslider.js‎

Lines changed: 129 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
/*
22
PartialViewSLider: https://github.com/VeeK727/partialViewSlider
3+
Version: 0.1.1
34
Author: Vipul Kapoor (@MrVipulKapoor)
45
Licenced under: MIT License
56
@@ -27,18 +28,18 @@ SOFTWARE.
2728
;(function ($, window, doucment, undefined) {
2829
var pluginName = 'partialViewSlider',
2930
defaults = {
30-
auto: false,
31-
delay: 4000,
31+
width: 70,
3232
controls: true,
3333
controlsPosition: 'inside', //inside, outside, neighbors
34-
prevHtml: '<i class="material-icons">chevron_left</i>',
35-
nextHtml: '<i class="material-icons">chevron_right</i>',
36-
width: 70,
37-
transitionSpeed: 400,
3834
backdrop: true,
39-
perspective: false,
35+
auto: true,
36+
transitionSpeed: 400,
37+
delay: 4000,
4038
pauseOnHover: true,
4139
keyboard: true,
40+
perspective: false,
41+
prevHtml: '<i class="material-icons">chevron_left</i>',
42+
nextHtml: '<i class="material-icons">chevron_right</i>',
4243
onLoad: function() {},
4344
onSlideEnd : function() {}
4445
};
@@ -53,6 +54,77 @@ SOFTWARE.
5354
this.init();
5455
}
5556

57+
function calculateNumbers(self){
58+
var el = $(self.element);
59+
60+
self.slides = el.find('li');
61+
self.numElements = self.slides.length,
62+
self.numSlides = self.numElements-4,
63+
self.wrapperWidth = $(self.wrapper).width(),
64+
self.slideWidth = self.wrapperWidth*(self.options.width)/100,
65+
self.sideWidth = self.wrapperWidth*((100 - self.options.width)/2)/100;
66+
el.width(self.numElements*self.slideWidth);
67+
$(self.slides).width(self.slideWidth);
68+
69+
self.index = 0;
70+
self.slideMovement = self.wrapperWidth*self.options.width/100;
71+
self.firstMovement = self.currentPosition = -(self.slideWidth-self.sideWidth+self.slideWidth);
72+
el.css({
73+
'-webkit-transform': 'translateX('+(self.firstMovement)+'px)',
74+
'transform': 'translateX('+(self.firstMovement)+'px)'
75+
});
76+
$(self.slides[2]).addClass('active');
77+
78+
el.siblings('.partialViewSlider-backdrop').css('width', self.sideWidth);
79+
}
80+
81+
function moveSlider(self, direction){
82+
var el = $(self.element);
83+
84+
if(direction == 'forward'){
85+
self.index++;
86+
self.currentPosition -= self.slideWidth;
87+
} else if(direction == 'backward'){
88+
self.index--;
89+
self.currentPosition += self.slideWidth;
90+
}
91+
$(self.slides[self.index+2]).addClass('active').siblings().removeClass('active');
92+
el.css({
93+
'-webkit-transform': 'translateX('+self.currentPosition+'px)',
94+
'transform': 'translateX('+self.currentPosition+'px)'
95+
});
96+
97+
setTimeout(function() {
98+
if(self.index > self.numSlides-1){
99+
self.index = 0;
100+
self.currentPosition = self.firstMovement;
101+
var loop = true;
102+
} else if(self.index < 0){
103+
self.index = self.numSlides-1;
104+
self.currentPosition -= self.numSlides*self.slideWidth;
105+
var loop = true
106+
} else {
107+
var loop = false;
108+
}
109+
if(loop){
110+
$(self.slides).css('transition-duration', '0ms');
111+
$(self.slides[self.index+2]).addClass('active');
112+
el.css({
113+
'transition-duration': '0ms',
114+
'-webkit-transform': 'translateX('+self.currentPosition+'px)',
115+
'transform': 'translateX('+self.currentPosition+'px)'
116+
});
117+
setTimeout(function() {
118+
el.css('transition-duration', self.options.transitionSpeed+'ms');
119+
$(self.slides).css('transition-duration', self.options.transitionSpeed+'ms');
120+
121+
}, 20);
122+
}
123+
124+
self.options.onSlideEnd.call(self.element);
125+
}, self.options.transitionSpeed);
126+
}
127+
56128
$.extend( Plugin.prototype, {
57129
init: function() {
58130
var self, el;
@@ -89,7 +161,7 @@ SOFTWARE.
89161
$(this.wrapper).append('<div class="partialViewSlider-backdrop partialViewSlider-right"></div>');
90162
}
91163

92-
self.calculateNumbers();
164+
calculateNumbers(this);
93165

94166
setTimeout(function() {
95167
el.css('transition-duration', self.options.transitionSpeed+'ms');
@@ -98,7 +170,7 @@ SOFTWARE.
98170

99171
if(this.options.auto){
100172
self.looper = setInterval(function(){
101-
self.moveSlider('forward');
173+
moveSlider(self, 'forward');
102174
}, this.options.delay);
103175

104176
if(this.options.pauseOnHover){
@@ -107,29 +179,29 @@ SOFTWARE.
107179
});
108180
$(self.wrapper).on('mouseleave', function(){
109181
self.looper = setInterval(function(){
110-
self.moveSlider('forward');
182+
moveSlider(self, 'forward');
111183
}, self.options.delay);
112184
});
113185
}
114186
}
115187

116188
$(this.outerWrapper).on('click', '.partialViewSlider-next', function(e){
117189
e.preventDefault();
118-
self.moveSlider('forward');
190+
moveSlider(self, 'forward');
119191
});
120192

121193
$(this.outerWrapper).on('click', '.partialViewSlider-prev', function(e){
122194
e.preventDefault();
123-
self.moveSlider('backward');
195+
moveSlider(self, 'backward');
124196
});
125197

126198
if(this.options.keyboard){
127199
$(document).on('keyup', function(e){
128200
if(!$(':focus').is('input, textarea')) {
129201
if (e.keyCode === 37) {
130-
self.moveSlider('backward');
202+
moveSlider(self, 'backward');
131203
} else if (e.keyCode === 39) {
132-
self.moveSlider('forward');
204+
moveSlider(self, 'forward');
133205
}
134206
}
135207
});
@@ -139,92 +211,61 @@ SOFTWARE.
139211
$(window).on('resize orientationchange', function(){
140212
clearTimeout(resize);
141213
resize = setTimeout(function() {
142-
self.calculateNumbers();
214+
calculateNumbers(self);
143215
}, 500);
144216
});
145217

146-
this.options.onLoad.call(el);
147-
},
148-
calculateNumbers: function(){
149-
var el = $(this.element);
150-
151-
this.slides = el.find('li');
152-
this.numElements = this.slides.length,
153-
this.numSlides = this.numElements-4,
154-
this.wrapperWidth = $(this.wrapper).width(),
155-
this.slideWidth = this.wrapperWidth*(this.options.width)/100,
156-
this.sideWidth = this.wrapperWidth*((100 - this.options.width)/2)/100;
157-
el.width(this.numElements*this.slideWidth);
158-
$(this.slides).width(this.slideWidth);
159-
160-
this.index = 0;
161-
this.slideMovement = this.wrapperWidth*this.options.width/100;
162-
this.firstMovement = this.currentPosition = -(this.slideWidth-this.sideWidth+this.slideWidth);
163-
el.css({
164-
'-webkit-transform': 'translateX('+(this.firstMovement)+'px)',
165-
'transform': 'translateX('+(this.firstMovement)+'px)'
166-
});
167-
$(this.slides[2]).addClass('active');
218+
document.addEventListener('touchstart', handleTouchStart, false);
219+
document.addEventListener('touchmove', handleTouchMove, false);
220+
221+
var xDown = null;
222+
var yDown = null;
223+
224+
function getTouches(evt) {
225+
return evt.touches || // browser API
226+
evt.originalEvent.touches; // jQuery
227+
}
228+
229+
function handleTouchStart(evt) {
230+
xDown = getTouches(evt)[0].clientX;
231+
yDown = getTouches(evt)[0].clientY;
232+
};
233+
234+
function handleTouchMove(evt) {
235+
if(!xDown || !yDown){
236+
return;
237+
}
238+
239+
var xUp = getTouches(evt)[0].clientX;
240+
var yUp = getTouches(evt)[0].clientY;
241+
var xDiff = xDown - xUp;
242+
var yDiff = yDown - yUp;
243+
244+
if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
245+
if ( xDiff < 0 ) {
246+
moveSlider(self, 'backward');
247+
} else {
248+
moveSlider(self, 'forward');
249+
}
250+
}
251+
/* reset values */
252+
xDown = null;
253+
yDown = null;
254+
};
168255

169-
el.siblings('.partialViewSlider-backdrop').css('width', this.sideWidth);
170-
},
171-
moveSlider: function(direction){
172-
var self = this;
173-
var el = $(this.element);
174-
175-
if(direction == 'forward'){
176-
this.index++;
177-
this.currentPosition -= this.slideWidth;
178-
} else if(direction == 'backward'){
179-
this.index--;
180-
this.currentPosition += this.slideWidth;
181-
}
182-
$(this.slides[this.index+2]).addClass('active').siblings().removeClass('active');
183-
el.css({
184-
'-webkit-transform': 'translateX('+this.currentPosition+'px)',
185-
'transform': 'translateX('+this.currentPosition+'px)'
186-
});
187-
188-
setTimeout(function() {
189-
if(self.index > self.numSlides-1){
190-
self.index = 0;
191-
self.currentPosition = self.firstMovement;
192-
var loop = true;
193-
} else if(self.index < 0){
194-
self.index = self.numSlides-1;
195-
self.currentPosition -= self.numSlides*self.slideWidth;
196-
var loop = true
197-
} else {
198-
var loop = false;
199-
}
200-
if(loop){
201-
$(self.slides).css('transition-duration', '0ms');
202-
$(self.slides[self.index+2]).addClass('active');
203-
el.css({
204-
'transition-duration': '0ms',
205-
'-webkit-transform': 'translateX('+self.currentPosition+'px)',
206-
'transform': 'translateX('+self.currentPosition+'px)'
207-
});
208-
setTimeout(function() {
209-
el.css('transition-duration', self.options.transitionSpeed+'ms');
210-
$(self.slides).css('transition-duration', self.options.transitionSpeed+'ms');
211-
212-
}, 20);
213-
}
214-
215-
self.options.onSlideEnd.call(self.element);
216-
}, this.options.transitionSpeed);
256+
this.options.onLoad.call(el);
217257
},
218258
prev: function(){
219-
this.moveSlider('backward');
259+
moveSlider(this, 'backward');
220260
},
221261
next: function(){
222-
this.moveSlider('forward');
262+
moveSlider(this, 'forward');
223263
},
224264
play: function(){
225265
var self = this;
266+
clearInterval(this.looper);
226267
this.looper = setInterval(function(){
227-
self.moveSlider('forward');
268+
moveSlider(self, 'forward');
228269
}, self.options.delay);
229270
},
230271
pause: function(){

0 commit comments

Comments
 (0)