From dc525f3ac7667d310a2b4afed7290a0ceb8770f2 Mon Sep 17 00:00:00 2001 From: Abhishek Satre Date: Wed, 26 Jul 2017 21:13:15 +0530 Subject: [PATCH] Carousel pager(Current Slide indicator) functionality added --- responsiveCarousel.js | 73 ++++++++++++++++++++++++++++++++++++++- responsiveCarousel.min.js | 2 +- 2 files changed, 73 insertions(+), 2 deletions(-) diff --git a/responsiveCarousel.js b/responsiveCarousel.js index 4080af2..7fc36ca 100644 --- a/responsiveCarousel.js +++ b/responsiveCarousel.js @@ -8,6 +8,7 @@ "use strict"; $.fn.carousel = function(args){ var defaults, obj; + defaults = { infinite : true, visible : 1, @@ -21,8 +22,13 @@ itemClassActive : 'crsl-active', imageWideClass : 'wide-image', // Use to build grid system - carousel : false - carousel : true + carousel : true, + pager : false, + pagerId : $(this).data('pager'), + pagerClassActive : 'crsl-pager-active' }; + + return $(this).each( function(){ // Set Object obj = $(this); @@ -65,6 +71,7 @@ if( defaults.carousel ) $(obj).find('.crsl-item:first-child').addClass(defaults.itemClassActive); + // Move last element to begin for infinite carousel if( defaults.carousel && defaults.infinite && ( defaults.visible < defaults.total ) ) $(obj).find('.crsl-item:first-child').before( $('.crsl-item:last-child', obj) ); @@ -88,9 +95,26 @@ // Init AutoRotate obj.initRotate(); + //Show pagers + if(defaults.pager){ + obj.loadpagers(); + $("#"+defaults.pagerId).find('.crsl-pager-item:first-child').addClass(defaults.pagerClassActive); + } + + // Trigger Clicks obj.triggerNavs(); + + + }; + + obj.loadpagers = function(){ + var pager_item = ""; + for(var i=0; i < defaults.total; i++){ + pager_item = pager_item + ""; + } + $("#"+defaults.pagerId).append(pager_item); }; obj.testPreload= function(){ @@ -152,6 +176,8 @@ obj.wrapWidth = $(obj).outerWidth(); $(obj).find('.crsl-wrap').css({ width: obj.wrapWidth+defaults.itemMargin+'px' }); $('#'+defaults.navigation).hide(); + if(defaults.pager){ $('#'+defaults.pagerId).hide();} + } $(obj).find('.crsl-item').css({ width: defaults.itemWidth+'px', marginRight : defaults.itemMargin+'px' }); @@ -164,8 +190,10 @@ if( defaults.visible >= defaults.total ){ defaults.autoRotate = false; $('#'+defaults.navigation).hide(); + if(defaults.pager){ $('#'+defaults.pagerId).hide();} } else { $('#'+defaults.navigation).show(); + if(defaults.pager){ $('#'+defaults.pagerId).show();} } } }; @@ -220,6 +248,11 @@ obj.preventAnimateEvent(); // Active obj.itemActive = $(obj).find('.crsl-item.'+defaults.itemClassActive); + + if(defaults.pager){ + obj.pagerActive = $("#"+defaults.pagerId).find('.crsl-pager-item.'+defaults.pagerClassActive); + } + return true; }; @@ -235,6 +268,10 @@ obj.preventAnimateEvent(); // Active obj.itemActive = $(obj).find('.crsl-item.'+defaults.itemClassActive); + + if(defaults.pager){ + obj.pagerActive = $(obj).find(".crsl-pager-item."+defaults.pagerClassActive); + } obj.next(); return true; }; @@ -255,6 +292,17 @@ obj.wrapMargin = defaults.infinite ? obj.wrapMarginDefault + $(obj.itemActive).outerWidth(true) : obj.wrapMargin + $(obj.itemActive).outerWidth(true); var prevItemIndex = $(obj.itemActive).index(); var newItemActive = $(obj.itemActive).prev('.crsl-item'); + + if(defaults.pager){ + var prevpagerIndex = $(obj.pagerActive).index(); + var newpagerActive; + if(prevpagerIndex == 0){ + newpagerActive = $("#"+defaults.pagerId).find('.crsl-pager-item').last(); + }else{ + newpagerActive = $(obj.pagerActive).prev('.crsl-pager-item'); + } + } + var action = 'previous'; // Trigger Begin Carousel Move $(obj).trigger('beginCarousel', [defaults, obj, action]); @@ -265,6 +313,12 @@ // Active $(obj.itemActive).removeClass(defaults.itemClassActive); $(newItemActive).addClass(defaults.itemClassActive); + + if(defaults.pager){ + $(obj.pagerActive).removeClass(defaults.pagerClassActive); + $(newpagerActive).addClass(defaults.pagerClassActive); + } + if( defaults.infinite ){ $(this).css({ marginLeft: obj.wrapMarginDefault }).find('.crsl-item:first-child').before( $('.crsl-item:last-child', obj) ); } else { @@ -283,6 +337,17 @@ obj.wrapMargin = defaults.infinite ? obj.wrapMarginDefault - $(obj.itemActive).outerWidth(true) : obj.wrapMargin - $(obj.itemActive).outerWidth(true); var nextItemIndex = $(obj.itemActive).index(); var newItemActive = $(obj.itemActive).next('.crsl-item'); + + if(defaults.pager){ + var nextpagerIndex = $(obj.pagerActive).index(); + var newpagerActive; + if(nextpagerIndex != defaults.total - 1){ + newpagerActive = $(obj.pagerActive).next('.crsl-pager-item'); + }else{ + newpagerActive = $("#"+defaults.pagerId).find('.crsl-pager-item').first(); + } + } + var action = 'next'; // Trigger Begin Carousel Move $(obj).trigger('beginCarousel', [defaults, obj, action]); @@ -293,6 +358,12 @@ // Active $(obj.itemActive).removeClass(defaults.itemClassActive); $(newItemActive).addClass(defaults.itemClassActive); + + if(defaults.pager){ + $(obj.pagerActive).removeClass(defaults.pagerClassActive); + $(newpagerActive).addClass(defaults.pagerClassActive); + } + if( defaults.infinite ){ $(this).css({ marginLeft: obj.wrapMarginDefault }).find('.crsl-item:last-child').after( $('.crsl-item:first-child', obj) ); } else { diff --git a/responsiveCarousel.min.js b/responsiveCarousel.min.js index bcd82d2..a4d0cf0 100644 --- a/responsiveCarousel.min.js +++ b/responsiveCarousel.min.js @@ -4,4 +4,4 @@ * Copyright (c) 2013 Basilio C‡ceres ; * Licensed under the MIT license */ -(function(e){"use strict";e.fn.carousel=function(t){var n,r;n={infinite:true,visible:1,speed:"fast",overflow:false,autoRotate:false,navigation:e(this).data("navigation"),itemMinWidth:0,itemEqualHeight:false,itemMargin:0,itemClassActive:"crsl-active",imageWideClass:"wide-image",carousel:true};return e(this).each(function(){r=e(this);if(e.isEmptyObject(t)===false)e.extend(n,t);if(e.isEmptyObject(e(r).data("crsl"))===false)e.extend(n,e(r).data("crsl"));n.isTouch="ontouchstart"in document.documentElement||navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)?true:false;r.init=function(){n.total=e(r).find(".crsl-item").length;n.itemWidth=e(r).outerWidth();n.visibleDefault=n.visible;n.swipeDistance=null;n.swipeMinDistance=100;n.startCoords={};n.endCoords={};e(r).css({width:"100%"});e(r).find(".crsl-item").css({position:"relative","float":"left",overflow:"hidden",height:"auto"});e(r).find("."+n.imageWideClass).each(function(){e(this).css({display:"block",width:"100%",height:"auto"})});e(r).find(".crsl-item iframe").attr({width:"100%"});if(n.carousel)e(r).find(".crsl-item:first-child").addClass(n.itemClassActive);if(n.carousel&&n.infinite&&n.visible0){var t=e(r).find("img").length,i=1;e(r).find("img").each(function(){r.preloadImage(this,i,t);i++})}else{e(r).trigger("loadedCarousel",[n,r])}};r.preloadImage=function(t,i,s){var o=new Image,u={};u.src=e(t).attr("src")!==undefined?t.src:"";u.alt=e(t).attr("alt")!==undefined?t.alt:"";e(o).attr(u);e(o).on("load",function(){if(i===1)e(r).trigger("loadingImagesCarousel",[n,r]);if(i===s)e(r).trigger("loadedImagesCarousel",[n,r])})};r.config=function(){n.itemWidth=Math.floor((e(r).outerWidth()-n.itemMargin*(n.visibleDefault-1))/n.visibleDefault);if(n.itemWidth<=n.itemMinWidth){n.visible=Math.floor((e(r).outerWidth()-n.itemMargin*(n.visible-1))/n.itemMinWidth)===1?Math.floor(e(r).outerWidth()/n.itemMinWidth):Math.floor((e(r).outerWidth()-n.itemMargin)/n.itemMinWidth);n.visible=n.visible<1?1:n.visible;n.itemWidth=n.visible===1?Math.floor(e(r).outerWidth()):Math.floor((e(r).outerWidth()-n.itemMargin*(n.visible-1))/n.visible)}else{n.visible=n.visibleDefault}if(n.carousel){r.wrapWidth=Math.floor((n.itemWidth+n.itemMargin)*n.total);r.wrapMargin=r.wrapMarginDefault=n.infinite&&n.visible=n.total){n.autoRotate=false;e("#"+n.navigation).hide()}else{e("#"+n.navigation).show()}}};r.equalHeights=function(){if(n.itemEqualHeight!==false){var t=0;e(r).find(".crsl-item").each(function(){e(this).css({height:"auto"});if(e(this).outerHeight()>t){t=e(this).outerHeight()}});e(r).find(".crsl-item").css({height:t+"px"})}return true};r.initRotate=function(){if(n.autoRotate!==false){r.rotateTime=window.setInterval(function(){r.rotate()},n.autoRotate)}};r.triggerNavs=function(){e("#"+n.navigation).delegate(".previous, .next","click",function(t){t.preventDefault();r.prepareExecute();if(e(this).hasClass("previous")&&r.testPrevious(r.itemActive)){r.previous()}else if(e(this).hasClass("next")&&r.testNext()){r.next()}else{return}})};r.prepareExecute=function(){if(n.autoRotate){clearInterval(r.rotateTime)}r.preventAnimateEvent();r.itemActive=e(r).find(".crsl-item."+n.itemClassActive);return true};r.preventAnimateEvent=function(){if(e(r).find(".crsl-wrap:animated").length>0){return false}};r.rotate=function(){r.preventAnimateEvent();r.itemActive=e(r).find(".crsl-item."+n.itemClassActive);r.next();return true};r.testPrevious=function(t){return e(".crsl-wrap",r).find(".crsl-item").index(t)>0};r.testNext=function(){return!n.infinite&&r.wrapWidth>=(n.itemWidth+n.itemMargin)*(n.visible+1)-r.wrapMargin||n.infinite};r.previous=function(){r.wrapMargin=n.infinite?r.wrapMarginDefault+e(r.itemActive).outerWidth(true):r.wrapMargin+e(r.itemActive).outerWidth(true);var t=e(r.itemActive).index();var i=e(r.itemActive).prev(".crsl-item");var s="previous";e(r).trigger("beginCarousel",[n,r,s]);e(r).find(".crsl-wrap").animate({marginLeft:r.wrapMargin+"px"},n.speed,function(){e(r.itemActive).removeClass(n.itemClassActive);e(i).addClass(n.itemClassActive);if(n.infinite){e(this).css({marginLeft:r.wrapMarginDefault}).find(".crsl-item:first-child").before(e(".crsl-item:last-child",r))}else{if(r.testPrevious(i)===false)e("#"+n.navigation).find(".previous").addClass("previous-inactive");if(r.testNext())e("#"+n.navigation).find(".next").removeClass("next-inactive")}e(this).trigger("endCarousel",[n,r,s])})};r.next=function(){r.wrapMargin=n.infinite?r.wrapMarginDefault-e(r.itemActive).outerWidth(true):r.wrapMargin-e(r.itemActive).outerWidth(true);var t=e(r.itemActive).index();var i=e(r.itemActive).next(".crsl-item");var s="next";e(r).trigger("beginCarousel",[n,r,s]);e(r).find(".crsl-wrap").animate({marginLeft:r.wrapMargin+"px"},n.speed,function(){e(r.itemActive).removeClass(n.itemClassActive);e(i).addClass(n.itemClassActive);if(n.infinite){e(this).css({marginLeft:r.wrapMarginDefault}).find(".crsl-item:last-child").after(e(".crsl-item:first-child",r))}else{if(r.testPrevious(i))e("#"+n.navigation).find(".previous").removeClass("previous-inactive");if(r.testNext()===false)e("#"+n.navigation).find(".next").addClass("next-inactive")}e(this).trigger("endCarousel",[n,r,s])})};var i=false,s;e(window).on("mouseleave",function(t){if(t.target)s=t.target;else if(t.srcElement)s=t.srcElement;if(e(r).attr("id")&&e(s).parents(".crsl-items").attr("id")===e(r).attr("id")||e(s).parents(".crsl-items").data("navigation")===e(r).data("navigation")){i=true}else{i=false}return false});e(window).on("keydown",function(e){if(i===true){if(e.keyCode===37){r.prepareExecute();r.previous()}else if(e.keyCode===39){r.prepareExecute();r.next()}}return});if(n.isTouch){e(r).on("touchstart",function(t){e(r).addClass("touching");n.startCoords=t.originalEvent.targetTouches[0];n.endCoords=t.originalEvent.targetTouches[0];e(".touching").on("touchmove",function(e){n.endCoords=e.originalEvent.targetTouches[0];if(Math.abs(parseInt(n.endCoords.pageX-n.startCoords.pageX,10))>Math.abs(parseInt(n.endCoords.pageY-n.startCoords.pageY,10))){e.preventDefault();e.stopPropagation()}})}).on("touchend",function(t){n.swipeDistance=n.endCoords.pageX-n.startCoords.pageX;if(n.swipeDistance>=n.swipeMinDistance){r.previous();t.preventDefault();t.stopPropagation();}else if(n.swipeDistance<=-n.swipeMinDistance){r.next();t.preventDefault();t.stopPropagation();}e(".touching").off("touchmove").removeClass("touching")})}e(r).on("loadedCarousel loadedImagesCarousel",function(){r.equalHeights()});e(window).on("carouselResizeEnd",function(){if(n.itemWidth!==e(r).outerWidth())r.config()});e(window).ready(function(){e(r).trigger("prepareCarousel",[n,r]);r.init();e(window).on("resize",function(){if(this.carouselResizeTo)clearTimeout(this.carouselResizeTo);this.carouselResizeTo=setTimeout(function(){e(this).trigger("carouselResizeEnd")},10)})});e(window).load(function(){r.testPreload();r.config()})})}})(jQuery) \ No newline at end of file +!function(e){"use strict";e.fn.carousel=function(i){var t,a;return t={infinite:!0,visible:1,speed:"fast",overflow:!1,autoRotate:!1,navigation:e(this).data("navigation"),itemMinWidth:0,itemEqualHeight:!1,itemMargin:0,itemClassActive:"crsl-active",imageWideClass:"wide-image",carousel:!0,pager:!1,pagerId:e(this).data("pager"),pagerClassActive:"crsl-pager-active"},e(this).each(function(){a=e(this),e.isEmptyObject(i)===!1&&e.extend(t,i),e.isEmptyObject(e(a).data("crsl"))===!1&&e.extend(t,e(a).data("crsl")),t.isTouch="ontouchstart"in document.documentElement||navigator.userAgent.match(/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile/i)?!0:!1,a.init=function(){t.total=e(a).find(".crsl-item").length,t.itemWidth=e(a).outerWidth(),t.visibleDefault=t.visible,t.swipeDistance=null,t.swipeMinDistance=100,t.startCoords={},t.endCoords={},e(a).css({width:"100%"}),e(a).find(".crsl-item").css({position:"relative","float":"left",overflow:"hidden",height:"auto"}),e(a).find("."+t.imageWideClass).each(function(){e(this).css({display:"block",width:"100%",height:"auto"})}),e(a).find(".crsl-item iframe").attr({width:"100%"}),t.carousel&&e(a).find(".crsl-item:first-child").addClass(t.itemClassActive),t.carousel&&t.infinite&&t.visible";e("#"+t.pagerId).append(i)},a.testPreload=function(){if(e(a).find("img").length>0){var i=e(a).find("img").length,r=1;e(a).find("img").each(function(){a.preloadImage(this,r,i),r++})}else e(a).trigger("loadedCarousel",[t,a])},a.preloadImage=function(i,r,n){var s=new Image,o={};o.src=void 0!==e(i).attr("src")?i.src:"",o.alt=void 0!==e(i).attr("alt")?i.alt:"",e(s).attr(o),e(s).on("load",function(){1===r&&e(a).trigger("loadingImagesCarousel",[t,a]),r===n&&e(a).trigger("loadedImagesCarousel",[t,a])})},a.config=function(){t.itemWidth=Math.floor((e(a).outerWidth()-t.itemMargin*(t.visibleDefault-1))/t.visibleDefault),t.itemWidth<=t.itemMinWidth?(t.visible=1===Math.floor((e(a).outerWidth()-t.itemMargin*(t.visible-1))/t.itemMinWidth)?Math.floor(e(a).outerWidth()/t.itemMinWidth):Math.floor((e(a).outerWidth()-t.itemMargin)/t.itemMinWidth),t.visible=t.visible<1?1:t.visible,t.itemWidth=1===t.visible?Math.floor(e(a).outerWidth()):Math.floor((e(a).outerWidth()-t.itemMargin*(t.visible-1))/t.visible)):t.visible=t.visibleDefault,t.carousel?(a.wrapWidth=Math.floor((t.itemWidth+t.itemMargin)*t.total),a.wrapMargin=a.wrapMarginDefault=t.infinite&&t.visible=t.total?(t.autoRotate=!1,e("#"+t.navigation).hide(),t.pager&&e("#"+t.pagerId).hide()):(e("#"+t.navigation).show(),t.pager&&e("#"+t.pagerId).show()))},a.equalHeights=function(){if(t.itemEqualHeight!==!1){var i=0;e(a).find(".crsl-item").each(function(){e(this).css({height:"auto"}),e(this).outerHeight()>i&&(i=e(this).outerHeight())}),e(a).find(".crsl-item").css({height:i+"px"})}return!0},a.initRotate=function(){t.autoRotate!==!1&&(a.rotateTime=window.setInterval(function(){a.rotate()},t.autoRotate))},a.triggerNavs=function(){e("#"+t.navigation).delegate(".previous, .next","click",function(i){if(i.preventDefault(),a.prepareExecute(),e(this).hasClass("previous")&&a.testPrevious(a.itemActive))a.previous();else{if(!e(this).hasClass("next")||!a.testNext())return;a.next()}})},a.prepareExecute=function(){return t.autoRotate&&clearInterval(a.rotateTime),a.preventAnimateEvent(),a.itemActive=e(a).find(".crsl-item."+t.itemClassActive),t.pager&&(a.pagerActive=e("#"+t.pagerId).find(".crsl-pager-item."+t.pagerClassActive)),!0},a.preventAnimateEvent=function(){return e(a).find(".crsl-wrap:animated").length>0?!1:void 0},a.rotate=function(){return a.preventAnimateEvent(),a.itemActive=e(a).find(".crsl-item."+t.itemClassActive),t.pager&&(a.pagerActive=e(a).find(".crsl-pager-item."+t.pagerClassActive)),a.next(),!0},a.testPrevious=function(i){return e(".crsl-wrap",a).find(".crsl-item").index(i)>0},a.testNext=function(){return!t.infinite&&a.wrapWidth>=(t.itemWidth+t.itemMargin)*(t.visible+1)-a.wrapMargin||t.infinite},a.previous=function(){a.wrapMargin=t.infinite?a.wrapMarginDefault+e(a.itemActive).outerWidth(!0):a.wrapMargin+e(a.itemActive).outerWidth(!0);var i=(e(a.itemActive).index(),e(a.itemActive).prev(".crsl-item"));if(t.pager){var r,n=e(a.pagerActive).index();r=0==n?e("#"+t.pagerId).find(".crsl-pager-item").last():e(a.pagerActive).prev(".crsl-pager-item")}var s="previous";e(a).trigger("beginCarousel",[t,a,s]),e(a).find(".crsl-wrap").animate({marginLeft:a.wrapMargin+"px"},t.speed,function(){e(a.itemActive).removeClass(t.itemClassActive),e(i).addClass(t.itemClassActive),t.pager&&(e(a.pagerActive).removeClass(t.pagerClassActive),e(r).addClass(t.pagerClassActive)),t.infinite?e(this).css({marginLeft:a.wrapMarginDefault}).find(".crsl-item:first-child").before(e(".crsl-item:last-child",a)):(a.testPrevious(i)===!1&&e("#"+t.navigation).find(".previous").addClass("previous-inactive"),a.testNext()&&e("#"+t.navigation).find(".next").removeClass("next-inactive")),e(this).trigger("endCarousel",[t,a,s])})},a.next=function(){a.wrapMargin=t.infinite?a.wrapMarginDefault-e(a.itemActive).outerWidth(!0):a.wrapMargin-e(a.itemActive).outerWidth(!0);var i=(e(a.itemActive).index(),e(a.itemActive).next(".crsl-item"));if(t.pager){var r,n=e(a.pagerActive).index();r=n!=t.total-1?e(a.pagerActive).next(".crsl-pager-item"):e("#"+t.pagerId).find(".crsl-pager-item").first()}var s="next";e(a).trigger("beginCarousel",[t,a,s]),e(a).find(".crsl-wrap").animate({marginLeft:a.wrapMargin+"px"},t.speed,function(){e(a.itemActive).removeClass(t.itemClassActive),e(i).addClass(t.itemClassActive),t.pager&&(e(a.pagerActive).removeClass(t.pagerClassActive),e(r).addClass(t.pagerClassActive)),t.infinite?e(this).css({marginLeft:a.wrapMarginDefault}).find(".crsl-item:last-child").after(e(".crsl-item:first-child",a)):(a.testPrevious(i)&&e("#"+t.navigation).find(".previous").removeClass("previous-inactive"),a.testNext()===!1&&e("#"+t.navigation).find(".next").addClass("next-inactive")),e(this).trigger("endCarousel",[t,a,s])})};var r,n=!1;e(window).on("mouseleave",function(i){return i.target?r=i.target:i.srcElement&&(r=i.srcElement),n=e(a).attr("id")&&e(r).parents(".crsl-items").attr("id")===e(a).attr("id")||e(r).parents(".crsl-items").data("navigation")===e(a).data("navigation")?!0:!1,!1}),e(window).on("keydown",function(e){n===!0&&(37===e.keyCode?(a.prepareExecute(),a.previous()):39===e.keyCode&&(a.prepareExecute(),a.next()))}),t.isTouch&&e(a).on("touchstart",function(i){e(a).addClass("touching"),t.startCoords.pageX=t.endCoords.pageX=i.originalEvent.targetTouches[0].pageX,t.startCoords.pageY=t.endCoords.pageY=i.originalEvent.targetTouches[0].pageY,e(".touching").on("touchmove",function(e){t.endCoords.pageX=e.originalEvent.targetTouches[0].pageX,t.endCoords.pageY=e.originalEvent.targetTouches[0].pageY,Math.abs(parseInt(t.endCoords.pageX-t.startCoords.pageX,10))>Math.abs(parseInt(t.endCoords.pageY-t.startCoords.pageY,10))&&(e.preventDefault(),e.stopPropagation())})}).on("touchend",function(i){t.swipeDistance=t.endCoords.pageX-t.startCoords.pageX,t.swipeDistance>=t.swipeMinDistance?(a.prepareExecute(),a.previous(),i.preventDefault(),i.stopPropagation()):t.swipeDistance<=-t.swipeMinDistance&&(a.prepareExecute(),a.next(),i.preventDefault(),i.stopPropagation()),e(".touching").off("touchmove").removeClass("touching")}),e(a).on("loadedCarousel loadedImagesCarousel",function(){a.equalHeights()}),e(window).on("carouselResizeEnd",function(){t.itemWidth!==e(a).outerWidth()&&a.config()}),e(window).ready(function(){e(a).trigger("prepareCarousel",[t,a]),a.init(),e(window).on("resize",function(){this.carouselResizeTo&&clearTimeout(this.carouselResizeTo),this.carouselResizeTo=setTimeout(function(){e(this).trigger("carouselResizeEnd")},10)})}),e(window).load(function(){a.testPreload(),a.config()})})}}(jQuery); \ No newline at end of file