From bb5076c3caea155651514ef315d5d3176aad8762 Mon Sep 17 00:00:00 2001 From: traack_lcruz Date: Fri, 6 May 2016 14:58:50 -0400 Subject: [PATCH 1/2] Issue #20: mirrored items visible This fixes an issue where mirrored items would be visible in the carousel when all of the items could fit into the visible space of the carousel. The behavior has been changed as follows: * When the update() method is invoked, the mirrored items will only be appended if there are slides that will not fit into the visible area of the carousel. * If infinite scrolling and buttons are enabled, the buttons will be toggled with the "disable" class based on if there are items that do not fit into the visible area of the carousel. * If the "disable" class is applied to the buttons, it will not advance the slides. * If you resize the window, the slide you are currently on will be "moved to". --- lib/jquery.tinycarousel.js | 25 ++++++++++++++++++++----- lib/jquery.tinycarousel.min.js | 6 +++--- package.json | 2 +- tinycarousel.jquery.json | 2 +- 4 files changed, 25 insertions(+), 10 deletions(-) diff --git a/lib/jquery.tinycarousel.js b/lib/jquery.tinycarousel.js index ae9acde..4bd9382 100644 --- a/lib/jquery.tinycarousel.js +++ b/lib/jquery.tinycarousel.js @@ -128,7 +128,11 @@ self.slideCurrent = self.options.start || 0; slidesVisible = Math.ceil(viewportSize / slideSize); - $overview.append($slides.slice(0, slidesVisible).clone().addClass("mirrored")); + // If our total slides fill the entire visible space, do not add the mirrored items. + if(0 < self.slidesTotal - slidesVisible) { + $overview.append($slides.slice(0, slidesVisible).clone().addClass("mirrored")); + } + $overview.css(sizeLabel.toLowerCase(), slideSize * (self.slidesTotal + slidesVisible)); _setButtons(); @@ -143,19 +147,26 @@ function _setEvents() { if(self.options.buttons) { $prev.click(function() { - self.move(--slideIndex); + if(!$(this).hasClass("disable")) { + self.move(--slideIndex); + } return false; }); $next.click(function() { - self.move(++slideIndex); + if(!$(this).hasClass("disable")) { + self.move(++slideIndex); + } return false; }); } - $(window).resize(self.update); + $(window).resize(function() { + self.update(); + self.move(self.slideCurrent); + }); if(self.options.bullets) { $container.on("click", ".bullet", function() { @@ -239,7 +250,6 @@ } }); - _setButtons(); self.start(); return self; @@ -255,6 +265,11 @@ $next.toggleClass("disable", self.slideCurrent >= self.slidesTotal - slidesVisible); } + if(self.options.buttons && self.options.infinite) { + $prev.toggleClass("disable", 0 >= self.slidesTotal - slidesVisible); + $next.toggleClass("disable", 0 >= self.slidesTotal - slidesVisible); + } + if(self.options.bullets) { $bullets.removeClass("active"); $($bullets[self.slideCurrent]).addClass("active"); diff --git a/lib/jquery.tinycarousel.min.js b/lib/jquery.tinycarousel.min.js index 2d8dd26..74429d8 100644 --- a/lib/jquery.tinycarousel.min.js +++ b/lib/jquery.tinycarousel.min.js @@ -1,7 +1,7 @@ -/*! tinycarousel - v2.1.8 - 2015-02-22 +/*! tinycarousel - v2.1.9 - 2016-05-06 * https://baijs.com/tinycarousel * - * Copyright (c) 2015 Maarten Baijs ; + * Copyright (c) 2016 Maarten Baijs ; * Licensed under the MIT license */ -!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){function b(b,e){function f(){return i.update(),i.move(i.slideCurrent),g(),i}function g(){i.options.buttons&&(n.click(function(){return i.move(--t),!1}),m.click(function(){return i.move(++t),!1})),a(window).resize(i.update),i.options.bullets&&b.on("click",".bullet",function(){return i.move(t=+a(this).attr("data-slide")),!1})}function h(){i.options.buttons&&!i.options.infinite&&(n.toggleClass("disable",i.slideCurrent<=0),m.toggleClass("disable",i.slideCurrent>=i.slidesTotal-r)),i.options.bullets&&(o.removeClass("active"),a(o[i.slideCurrent]).addClass("active"))}this.options=a.extend({},d,e),this._defaults=d,this._name=c;var i=this,j=b.find(".viewport:first"),k=b.find(".overview:first"),l=null,m=b.find(".next:first"),n=b.find(".prev:first"),o=b.find(".bullet"),p=0,q={},r=0,s=0,t=0,u="x"===this.options.axis,v=u?"Width":"Height",w=u?"left":"top",x=null;return this.slideCurrent=0,this.slidesTotal=0,this.intervalActive=!1,this.update=function(){return k.find(".mirrored").remove(),l=k.children(),p=j[0]["offset"+v],s=l.first()["outer"+v](!0),i.slidesTotal=l.length,i.slideCurrent=i.options.start||0,r=Math.ceil(p/s),k.append(l.slice(0,r).clone().addClass("mirrored")),k.css(v.toLowerCase(),s*(i.slidesTotal+r)),h(),i},this.start=function(){return i.options.interval&&(clearTimeout(x),i.intervalActive=!0,x=setTimeout(function(){i.move(++t)},i.options.intervalTime)),i},this.stop=function(){return clearTimeout(x),i.intervalActive=!1,i},this.move=function(a){return t=isNaN(a)?i.slideCurrent:a,i.slideCurrent=t%i.slidesTotal,0>t&&(i.slideCurrent=t=i.slidesTotal-1,k.css(w,-i.slidesTotal*s)),t>i.slidesTotal&&(i.slideCurrent=t=1,k.css(w,0)),q[w]=-t*s,k.animate(q,{queue:!1,duration:i.options.animation?i.options.animationTime:0,always:function(){b.trigger("move",[l[i.slideCurrent],i.slideCurrent])}}),h(),i.start(),i},f()}var c="tinycarousel",d={start:0,axis:"x",buttons:!0,bullets:!1,interval:!1,intervalTime:3e3,animation:!0,animationTime:1e3,infinite:!0};a.fn[c]=function(d){return this.each(function(){a.data(this,"plugin_"+c)||a.data(this,"plugin_"+c,new b(a(this),d))})}}); \ No newline at end of file +!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){function b(b,e){function f(){return i.update(),i.move(i.slideCurrent),g(),i}function g(){i.options.buttons&&(n.click(function(){return a(this).hasClass("disable")||i.move(--t),!1}),m.click(function(){return a(this).hasClass("disable")||i.move(++t),!1})),a(window).resize(function(){i.update(),i.move(i.slideCurrent)}),i.options.bullets&&b.on("click",".bullet",function(){return i.move(t=+a(this).attr("data-slide")),!1})}function h(){i.options.buttons&&!i.options.infinite&&(n.toggleClass("disable",i.slideCurrent<=0),m.toggleClass("disable",i.slideCurrent>=i.slidesTotal-r)),i.options.buttons&&i.options.infinite&&(n.toggleClass("disable",0>=i.slidesTotal-r),m.toggleClass("disable",0>=i.slidesTotal-r)),i.options.bullets&&(o.removeClass("active"),a(o[i.slideCurrent]).addClass("active"))}this.options=a.extend({},d,e),this._defaults=d,this._name=c;var i=this,j=b.find(".viewport:first"),k=b.find(".overview:first"),l=null,m=b.find(".next:first"),n=b.find(".prev:first"),o=b.find(".bullet"),p=0,q={},r=0,s=0,t=0,u="x"===this.options.axis,v=u?"Width":"Height",w=u?"left":"top",x=null;return this.slideCurrent=0,this.slidesTotal=0,this.intervalActive=!1,this.update=function(){return k.find(".mirrored").remove(),l=k.children(),p=j[0]["offset"+v],s=l.first()["outer"+v](!0),i.slidesTotal=l.length,i.slideCurrent=i.options.start||0,r=Math.ceil(p/s),0t&&(i.slideCurrent=t=i.slidesTotal-1,k.css(w,-i.slidesTotal*s)),t>i.slidesTotal&&(i.slideCurrent=t=1,k.css(w,0)),q[w]=-t*s,k.animate(q,{queue:!1,duration:i.options.animation?i.options.animationTime:0,always:function(){b.trigger("move",[l[i.slideCurrent],i.slideCurrent])}}),i.start(),i},f()}var c="tinycarousel",d={start:0,axis:"x",buttons:!0,bullets:!1,interval:!1,intervalTime:3e3,animation:!0,animationTime:1e3,infinite:!0};a.fn[c]=function(d){return this.each(function(){a.data(this,"plugin_"+c)||a.data(this,"plugin_"+c,new b(a(this),d))})}}); \ No newline at end of file diff --git a/package.json b/package.json index fd1d409..76e4238 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tinycarousel", - "version": "2.1.8", + "version": "2.1.9", "description": "A lightweight cross browser jQuery based infinite carousel", "homepage": "https://baijs.com/tinycarousel", "main": "lib/jquery.tinycarousel.js", diff --git a/tinycarousel.jquery.json b/tinycarousel.jquery.json index e358952..abfadde 100644 --- a/tinycarousel.jquery.json +++ b/tinycarousel.jquery.json @@ -1,7 +1,7 @@ { "name": "tinycarousel", "title": "Tiny Carousel", - "version": "2.1.8", + "version": "2.1.9", "description": "A lightweight responsive infinite carousel.", "homepage": "http://www.baijs.com/tinycarousel", "repository": { From 57bf5927883090f19be5f75e8884496b9b281212 Mon Sep 17 00:00:00 2001 From: traack_lcruz Date: Fri, 6 May 2016 16:01:45 -0400 Subject: [PATCH 2/2] Issue #20: mirrored items visible * Updating behavior of "selected slide" to move to the first slide in the list if all the slides fit the visible area of the carousel. --- lib/jquery.tinycarousel.js | 4 ++++ lib/jquery.tinycarousel.min.js | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/lib/jquery.tinycarousel.js b/lib/jquery.tinycarousel.js index 4bd9382..382ee6f 100644 --- a/lib/jquery.tinycarousel.js +++ b/lib/jquery.tinycarousel.js @@ -229,6 +229,10 @@ $overview.css(posiLabel, -(self.slidesTotal) * slideSize); } + if(self.options.infinite && 0 >= self.slidesTotal - slidesVisible) { + self.slideCurrent = slideIndex = 0; + } + if(slideIndex > self.slidesTotal) { self.slideCurrent = slideIndex = 1; $overview.css(posiLabel, 0); diff --git a/lib/jquery.tinycarousel.min.js b/lib/jquery.tinycarousel.min.js index 74429d8..81fcbc8 100644 --- a/lib/jquery.tinycarousel.min.js +++ b/lib/jquery.tinycarousel.min.js @@ -4,4 +4,4 @@ * Copyright (c) 2016 Maarten Baijs ; * Licensed under the MIT license */ -!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){function b(b,e){function f(){return i.update(),i.move(i.slideCurrent),g(),i}function g(){i.options.buttons&&(n.click(function(){return a(this).hasClass("disable")||i.move(--t),!1}),m.click(function(){return a(this).hasClass("disable")||i.move(++t),!1})),a(window).resize(function(){i.update(),i.move(i.slideCurrent)}),i.options.bullets&&b.on("click",".bullet",function(){return i.move(t=+a(this).attr("data-slide")),!1})}function h(){i.options.buttons&&!i.options.infinite&&(n.toggleClass("disable",i.slideCurrent<=0),m.toggleClass("disable",i.slideCurrent>=i.slidesTotal-r)),i.options.buttons&&i.options.infinite&&(n.toggleClass("disable",0>=i.slidesTotal-r),m.toggleClass("disable",0>=i.slidesTotal-r)),i.options.bullets&&(o.removeClass("active"),a(o[i.slideCurrent]).addClass("active"))}this.options=a.extend({},d,e),this._defaults=d,this._name=c;var i=this,j=b.find(".viewport:first"),k=b.find(".overview:first"),l=null,m=b.find(".next:first"),n=b.find(".prev:first"),o=b.find(".bullet"),p=0,q={},r=0,s=0,t=0,u="x"===this.options.axis,v=u?"Width":"Height",w=u?"left":"top",x=null;return this.slideCurrent=0,this.slidesTotal=0,this.intervalActive=!1,this.update=function(){return k.find(".mirrored").remove(),l=k.children(),p=j[0]["offset"+v],s=l.first()["outer"+v](!0),i.slidesTotal=l.length,i.slideCurrent=i.options.start||0,r=Math.ceil(p/s),0t&&(i.slideCurrent=t=i.slidesTotal-1,k.css(w,-i.slidesTotal*s)),t>i.slidesTotal&&(i.slideCurrent=t=1,k.css(w,0)),q[w]=-t*s,k.animate(q,{queue:!1,duration:i.options.animation?i.options.animationTime:0,always:function(){b.trigger("move",[l[i.slideCurrent],i.slideCurrent])}}),i.start(),i},f()}var c="tinycarousel",d={start:0,axis:"x",buttons:!0,bullets:!1,interval:!1,intervalTime:3e3,animation:!0,animationTime:1e3,infinite:!0};a.fn[c]=function(d){return this.each(function(){a.data(this,"plugin_"+c)||a.data(this,"plugin_"+c,new b(a(this),d))})}}); \ No newline at end of file +!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?module.exports=a(require("jquery")):a(jQuery)}(function(a){function b(b,e){function f(){return i.update(),i.move(i.slideCurrent),g(),i}function g(){i.options.buttons&&(n.click(function(){return a(this).hasClass("disable")||i.move(--t),!1}),m.click(function(){return a(this).hasClass("disable")||i.move(++t),!1})),a(window).resize(function(){i.update(),i.move(i.slideCurrent)}),i.options.bullets&&b.on("click",".bullet",function(){return i.move(t=+a(this).attr("data-slide")),!1})}function h(){i.options.buttons&&!i.options.infinite&&(n.toggleClass("disable",i.slideCurrent<=0),m.toggleClass("disable",i.slideCurrent>=i.slidesTotal-r)),i.options.buttons&&i.options.infinite&&(n.toggleClass("disable",0>=i.slidesTotal-r),m.toggleClass("disable",0>=i.slidesTotal-r)),i.options.bullets&&(o.removeClass("active"),a(o[i.slideCurrent]).addClass("active"))}this.options=a.extend({},d,e),this._defaults=d,this._name=c;var i=this,j=b.find(".viewport:first"),k=b.find(".overview:first"),l=null,m=b.find(".next:first"),n=b.find(".prev:first"),o=b.find(".bullet"),p=0,q={},r=0,s=0,t=0,u="x"===this.options.axis,v=u?"Width":"Height",w=u?"left":"top",x=null;return this.slideCurrent=0,this.slidesTotal=0,this.intervalActive=!1,this.update=function(){return k.find(".mirrored").remove(),l=k.children(),p=j[0]["offset"+v],s=l.first()["outer"+v](!0),i.slidesTotal=l.length,i.slideCurrent=i.options.start||0,r=Math.ceil(p/s),0t&&(i.slideCurrent=t=i.slidesTotal-1,k.css(w,-i.slidesTotal*s)),i.options.infinite&&0>=i.slidesTotal-r&&(i.slideCurrent=t=0),t>i.slidesTotal&&(i.slideCurrent=t=1,k.css(w,0)),q[w]=-t*s,k.animate(q,{queue:!1,duration:i.options.animation?i.options.animationTime:0,always:function(){b.trigger("move",[l[i.slideCurrent],i.slideCurrent])}}),i.start(),i},f()}var c="tinycarousel",d={start:0,axis:"x",buttons:!0,bullets:!1,interval:!1,intervalTime:3e3,animation:!0,animationTime:1e3,infinite:!0};a.fn[c]=function(d){return this.each(function(){a.data(this,"plugin_"+c)||a.data(this,"plugin_"+c,new b(a(this),d))})}}); \ No newline at end of file