Skip to content

Commit

Permalink
Version 1.6.0
Browse files Browse the repository at this point in the history 
 - Added `rewind` option

 - Added `resizeLock` option to prevent cut-off
   slides on window resizing

 - Dot pagination now avoids starting on half slides

 - Paging controls only rebuilt when necessary

 - Support for fractional slides when `slidesToShow`
   is set to `auto` via the `exactWidth` option

 - Arrows are properly unbound when disabled via
   responsive settings
  • Loading branch information
@NickPiscitelli
NickPiscitelli committed Nov 18, 2018
1 parent cbd191b commit fc718eb
Show file tree
Hide file tree
Showing 8 changed files with 271 additions and 146 deletions.
32 changes: 27 additions & 5 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Glider.js

A fast, light-weight, dependency free, responsive, native scrolling list with paging controls. (2.3kb gzipped!)
A fast, light-weight, dependency free, responsive, accessible, extendable, native scrolling list with paging controls, methods and events. (< 2.5kb gzipped!)

Demos and full documentation available on Github Pages: https://nickpiscitelli.github.io/Glider.js/

Expand Down Expand Up @@ -41,14 +41,33 @@ Glider.js Initialization w/ full options:

```javascript
new Glider(document.querySelector('.glider'), {

// `auto` allows automatic responsive
// width calculations
slidesToShow: 'auto',
slidesToScroll: 'auto',
itemWidth: 150,

// should have been named `itemMinWidth`
// slides grow to fit the container viewport
// ignored unless `slidesToShow` is set to `auto`
itemWidth: undefined,

// if true, slides wont be resized to fit viewport
// requires `itemWidth` to be set
// * this may cause fractional slides
exactWidth: false,

// speed aggravator - higher is slower
duration: .5,
dots: '.glider-dots',

// dot container element or selector
dots: 'CSS Selector',

// arrow container elements or selector
arrows: {
prev: '.glider-prev',
next: '.glider-next'
prev: 'CSS Selector',
// may also pass element directly
next: document.querySelector('CSS Selector')
},

// allow mouse dragging
Expand All @@ -72,6 +91,9 @@ new Glider(document.querySelector('.glider'), {
// if too low, it might interrupt normal scrolling
scrollLockDelay: 150,

// Force centering slide after resize event
resizeLock: true,

// Glider.js breakpoints are mobile-first
// be conscious of your ordering
responsive: [
Expand Down
34 changes: 21 additions & 13 deletions docs/assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3771,6 +3771,7 @@ input, select, textarea {
position: absolute;
outline: none;
position: absolute;
padding: 2px 2px 2px 3px;
background: none;
width: 51px;
z-index: 2;
Expand All @@ -3790,6 +3791,9 @@ input, select, textarea {
#main .glider-prev:focus, #main .glider-next:focus {
color: #8cc9f0;
}
#main .glider-prev:focus-visible i, #main .glider-next:focus-visible i {
border: 1px dashed #666;
}
.multiple .glider-prev, .multiple .glider-next {
font-size: 20px;
top: 37%;
Expand Down Expand Up @@ -3828,23 +3832,27 @@ input, select, textarea {
}
.glider-dot {
background: none;
border: 0;
padding: 0;
outline: none;
display: block;
cursor: pointer;
color: #ccc;
border-radius: 99px;
background: #ccc;
width: 12px;
height: 12px;
margin: 7px;
padding: 0;
border: 0;
border: 0;
padding: 0;
outline: none;
display: block;
cursor: pointer;
color: #ccc;
border-radius: 99px;
background: #ccc;
width: 12px;
height: 12px;
margin: 7px;
padding: 0;
border: 0;
}
.glider-dot:hover, .glider-dot:focus {
background: #8cc9f0;
}
.glider-dot:focus-visible {
border: 1px dashed #000;
padding: 2px;
}
.glider-dot.active {
background: #a89cc8;
}
Expand Down
62 changes: 44 additions & 18 deletions docs/assets/js/glider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
\___//_//_/ \_,_/ \__//_/ (_)__/ //___/
|___/
Version: 1.5.4
Version: 1.6.0
Author: Nick Piscitelli (pickykneee)
Website: https://nickpiscitelli.com
Documentation: http://nickpiscitelli.github.io/Glider.js
Expand Down Expand Up @@ -36,6 +36,7 @@
_.opt = Object.assign({}, {
slidesToScroll: 1,
slidesToShow: 1,
resizeLock: true,
duration: .5,
// easeInQuad
easing: function (x, t, b, c, d) {
Expand All @@ -44,7 +45,7 @@
}, settings);

// set defaults
_.aIndex = _.page = _.slide = 0;
_.animate_id = _.page = _.slide = 0;
_.arrows = {};

// preserve original options to
Expand All @@ -59,7 +60,7 @@
_.track.appendChild(_.ele.children[0])
}

// calculate list dimensions
// start glider
_.init();

// set events
Expand Down Expand Up @@ -89,14 +90,18 @@
var breakpointChanged = _.settingsBreakpoint();
if (!paging) paging = breakpointChanged;

if (_.opt.slidesToShow === 'auto'){
_.opt.slidesToShow = Math.floor(_.containerWidth / _.opt.itemWidth);
if (_.opt.slidesToShow === 'auto' || _.opt._autoSlide){
var slideCount = _.containerWidth / _.opt.itemWidth;

_.opt._autoSlide = _.opt.slidesToShow = _.opt.exactWidth ?
slideCount : Math.floor(slideCount);
}
if (_.opt.slidesToScroll === 'auto'){
_.opt.slidesToScroll = _.opt.slidesToShow;
_.opt.slidesToScroll = Math.floor(_.opt.slidesToShow);
}

_.itemWidth = _.containerWidth / _.opt.slidesToShow;
_.itemWidth = _.opt.exactWidth ?
_.opt.itemWidth : _.containerWidth / _.opt.slidesToShow;

// set slide dimensions
[].forEach.call(_.slides, function(__){
Expand All @@ -109,14 +114,16 @@
_.track.style.width = width + 'px';
_.trackWidth = width;

// rebuild paging controls when settings changed
if (!refresh || paging){
_.opt.resizeLock && _.scrollTo(_.slide * _.itemWidth, 0);

if (breakpointChanged || paging){
_.bindArrows();
_.buildDots();
_.updateControls();
_.bindDrag();
}

_.updateControls();

_.emit(refresh ? 'refresh ' : 'loaded')
};

Expand Down Expand Up @@ -172,7 +179,13 @@

gliderPrototype.bindArrows = function(){
var _ = this;
if (!_.opt.arrows) return
if (!_.opt.arrows) {
Object.keys(_.arrows).forEach(function(direction){
var element = _.arrows[direction];
_.event(element, 'remove', { click: element._func })
});
return;
}
['prev','next'].forEach(function(direction){
var arrow = _.opt.arrows[direction]
if (arrow){
Expand All @@ -198,8 +211,10 @@

var disableArrows = _.containerWidth >= _.trackWidth;

if (_.arrows.prev) _.arrows.prev.classList.toggle('disabled', _.ele.scrollLeft <= 0 || disableArrows)
if (_.arrows.next) _.arrows.next.classList.toggle('disabled', _.ele.scrollLeft + _.containerWidth >= Math.floor(_.trackWidth) || disableArrows)
if (!_.opt.rewind){
if (_.arrows.prev) _.arrows.prev.classList.toggle('disabled', _.ele.scrollLeft <= 0 || disableArrows)
if (_.arrows.next) _.arrows.next.classList.toggle('disabled', _.ele.scrollLeft + _.containerWidth >= Math.floor(_.trackWidth) || disableArrows)
}

_.slide = Math.round(_.ele.scrollLeft / _.itemWidth);
_.page = Math.round(_.ele.scrollLeft / _.containerWidth);
Expand All @@ -210,9 +225,10 @@
extraMiddle = 0;
}

// the last page may be less than one half of a normal page width so
// the page is rounded down. when at the end, force the page to turn
if (_.ele.scrollLeft + _.containerWidth >= Math.floor(_.trackWidth)){
_.page = _.dots ? _.dots.children.length - 1 : 0;
_.slide = _.slides.length - _.opt.slidesToShow;
}

[].forEach.call(_.slides,function(slide,index){
Expand Down Expand Up @@ -265,10 +281,11 @@
if(e) e.preventDefault();

var _ = this, originalSlide = slide;
_.aIndex++;
++_.animate_id;

if (dot === true) {
slide = slide * _.containerWidth
slide = Math.round(slide / _.itemWidth) * _.itemWidth
} else {
if (typeof slide === 'string') {
var backwards = slide === 'prev';
Expand All @@ -283,8 +300,16 @@
if (backwards) slide -= _.opt.slidesToScroll;
else slide += _.opt.slidesToScroll;

if (_.opt.rewind){
var scrollLeft = _.ele.scrollLeft;
slide = backwards && !scrollLeft ? _.slides.length :
!backwards && scrollLeft + _.containerWidth >= Math.floor(_.trackWidth) ?
0 : slide;
}
}

slide = Math.max(Math.min(slide, _.slides.length), 0)

_.slide = slide;
slide = _.itemWidth * slide
}
Expand Down Expand Up @@ -320,20 +345,21 @@
}
}
// set back to defaults in case they were overriden
var breakpointChanged = _.breakpoint !== 0;
_.opt = Object.assign({}, _._opt);
_.breakpoint = 0;
return false;
return breakpointChanged;
}

gliderPrototype.scrollTo = function(scrollTarget, scrollDuration, callback) {
var
_ = this,
start = new Date().getTime(),
animateIndex = _.aIndex,
animateIndex = _.animate_id,
animate = function(){
var now = (new Date().getTime() - start);
_.ele.scrollLeft = _.ele.scrollLeft + (scrollTarget - _.ele.scrollLeft) * _.opt.easing(0, now, 0, 1, scrollDuration);
if(now < scrollDuration && animateIndex == _.aIndex){
if(now < scrollDuration && animateIndex == _.animate_id){
window.requestAnimationFrame(animate);
} else {
_.ele.scrollLeft = scrollTarget
Expand Down
Loading

0 comments on commit fc718eb

Please sign in to comment.