Skip to content

Commit

Permalink
Adding "infinite" option... Improved handlers for autoplay intervals...
Browse files Browse the repository at this point in the history
  • Loading branch information
@9bitStudios
9bitStudios committed May 29, 2016
1 parent d38cb93 commit bbd7541
Show file tree
Hide file tree
Showing 3 changed files with 100 additions and 30 deletions.
3 changes: 1 addition & 2 deletions css/style.css
View file
Expand Up @@ -56,7 +56,6 @@ display:none;
line-height:0px;
}
.nbs-flexisel-item img {
width: 100%;
max-width: 100%;
cursor: pointer;
position: relative;
Expand All @@ -75,7 +74,7 @@ display:none;
position: absolute;
cursor: pointer;
z-index: 4;
top:50%;
top:40%;
background: rgba(0,0,0,0.5);
color: #fff;
}
Expand Down
5 changes: 3 additions & 2 deletions index.html
View file
Expand Up @@ -27,7 +27,7 @@ <h1>Flexisel</h1>

<div class="clearout"></div>

<p>You can also change the number of items shown depending on the screen width!</p>
<p>You can also change the number of items shown depending on the screen width and you can set whether you want the slider to be infinite or not.</p>

<ul id="flexiselDemo2">
<li><img src="images/logo-adidas.png" /></li>
Expand All @@ -39,7 +39,7 @@ <h1>Flexisel</h1>

<div class="clearout"></div>

<p>Other options include autoplay, animation speed when scrolling right and left, initial number of visible items, and more!</p>
<p>Other options include autoplay, number of items to scroll, animation speed when scrolling right and left, initial number of visible items, and more!</p>

<ul id="flexiselDemo3">
<li><img src="images/1.jpg" /></li>
Expand All @@ -56,6 +56,7 @@ <h1>Flexisel</h1>
visibleItems: 4,
itemsToScroll: 3,
animationSpeed: 200,
infinite: false,
autoPlay: {
enable: false,
interval: 5000,
Expand Down
122 changes: 96 additions & 26 deletions js/jquery.flexisel.js
View file
Expand Up @@ -17,6 +17,7 @@
visibleItems: 4,
itemsToScroll: 3,
animationSpeed: 400,
infinite: true,
autoPlay: {
enable: false,
interval: 5000,
Expand Down Expand Up @@ -49,10 +50,12 @@
var settings = $.extend(defaults, options);
var itemsWidth;
var canNavigate = true;
var itemCount;
var itemsVisible = settings.visibleItems;
var itemsToScroll = settings.itemsToScroll;
var responsivePoints = [];
var resizeTimeout;
var autoPlayInterval;

/******************************
Public Methods
Expand All @@ -79,10 +82,12 @@
responsivePoints.sort(function(a, b) { return a.changePoint - b.changePoint; });
var childSet = object.children();
itemsWidth = methods.getCurrentItemWidth();
itemCount = childSet.length;
childSet.width(itemsWidth);
object.css({ 'left': -itemsWidth * (itemsVisible + 1) });
object.fadeIn();
object.fadeIn();
$(window).trigger('resize');

},

/******************************
Expand All @@ -95,11 +100,14 @@
object.wrap("<div class='nbs-flexisel-container'><div class='nbs-flexisel-inner'></div></div>");
object.find("li").addClass("nbs-flexisel-item");
$("<div class='nbs-flexisel-nav-left'></div><div class='nbs-flexisel-nav-right'></div>").insertAfter(object);
var childSet = object.children();
var cloneContentBefore = childSet.clone();
var cloneContentAfter = childSet.clone();
object.prepend(cloneContentBefore);
object.append(cloneContentAfter);

if(settings.infinite) {
var childSet = object.children();
var cloneContentBefore = childSet.clone();
var cloneContentAfter = childSet.clone();
object.prepend(cloneContentBefore);
object.append(cloneContentAfter);
}

},

Expand All @@ -118,9 +126,16 @@
methods.calculateDisplay();
itemsWidth = methods.getCurrentItemWidth();
childSet.width(itemsWidth);
object.css({
'left': -itemsWidth * Math.floor(childSet.length / 2)
});

if(settings.infinite) {
object.css({
'left': -itemsWidth * Math.floor(childSet.length / 2)
});
} else {
object.css({
'left': 0
});
}
}, 100);

});
Expand All @@ -134,13 +149,9 @@
});

if(settings.autoPlay.enable) {

setInterval(function() {
if (canNavigate) {
methods.scroll(false);
}
}, settings.autoPlay.interval);


methods.setAutoplayInterval();

if (settings.autoPlay.pauseOnHover === true) {
object.on({
mouseenter : function() {
Expand Down Expand Up @@ -201,17 +212,46 @@
canNavigate = false;
itemsWidth = methods.getCurrentItemWidth();

object.animate({
'left' : reverse ? "+=" + itemsWidth * itemsToScroll : "-=" + itemsWidth * itemsToScroll
}, settings.animationSpeed, function() {
canNavigate = true;
if(reverse) {
methods.offsetItemsToBeginning(itemsToScroll);
if(settings.autoPlay.enable) {
clearInterval(autoPlayInterval);
}

if(!settings.infinite) {

var scrollDistance = itemsWidth * itemsToScroll;

if(reverse) {
object.animate({
'left': methods.calculateNonInfiniteLeftScroll(scrollDistance)
});

} else {
methods.offsetItemsToEnd(itemsToScroll);
object.animate({
'left': methods.calculateNonInfiniteRightScroll(scrollDistance)
});
}
methods.offsetSliderPosition(reverse);
});

canNavigate = true;

} else {
object.animate({
'left' : reverse ? "+=" + itemsWidth * itemsToScroll : "-=" + itemsWidth * itemsToScroll
}, settings.animationSpeed, function() {
canNavigate = true;

if(reverse) {
methods.offsetItemsToBeginning(itemsToScroll);
} else {
methods.offsetItemsToEnd(itemsToScroll);
}
methods.offsetSliderPosition(reverse);

});
}

if(settings.autoPlay.enable) {
methods.setAutoplayInterval();
}

}
},
Expand Down Expand Up @@ -286,7 +326,37 @@
object.css({
'left': left
});
}
},

getOffsetPosition: function() {
return parseInt(object.css('left').replace('px', ''));
},

calculateNonInfiniteLeftScroll: function(toScroll) {
if(methods.getOffsetPosition() + toScroll >= 0) {
return 0;
} else {
return methods.getOffsetPosition() + toScroll;
}
},

calculateNonInfiniteRightScroll: function(toScroll){
var negativeOffsetLimit = (itemCount * itemsWidth) - (itemsVisible * itemsWidth);

if(methods.getOffsetPosition() - toScroll <= -negativeOffsetLimit) {
return -negativeOffsetLimit;
} else {
return methods.getOffsetPosition() - toScroll;
}
},

setAutoplayInterval: function(){
autoPlayInterval = setInterval(function() {
if (canNavigate) {
methods.scroll(false);
}
}, settings.autoPlay.interval);
}

};

Expand Down

0 comments on commit bbd7541

Please sign in to comment.