├── .gitignore ├── Gruntfile.js ├── assets ├── css │ ├── demo.css │ ├── responsive.css │ └── sangarSlider.css ├── js │ ├── imagesloaded.min.js │ ├── jquery.js │ ├── jquery.touchSwipe.min.js │ ├── jquery.velocity.min.js │ ├── sangarSlider.js │ └── sangarSlider │ │ ├── sangarBaseClass.js │ │ ├── sangarBeforeAfter.js │ │ ├── sangarLock.js │ │ ├── sangarResetSlider.js │ │ ├── sangarResponsiveClass.js │ │ ├── sangarSetupBulletNav.js │ │ ├── sangarSetupLayout.js │ │ ├── sangarSetupNavigation.js │ │ ├── sangarSetupSwipeTouch.js │ │ ├── sangarSetupTimer.js │ │ ├── sangarShift.js │ │ ├── sangarSizeAndScale.js │ │ ├── sangarTextbox.js │ │ └── sangarVideo.js └── themes │ ├── dark-big │ ├── dark-big.css │ └── images │ │ ├── down-arrow.png │ │ ├── left-arrow.png │ │ ├── right-arrow.png │ │ └── up-arrow.png │ ├── dark │ ├── dark.css │ └── images │ │ ├── down-arrow.png │ │ ├── left-arrow.png │ │ ├── right-arrow.png │ │ └── up-arrow.png │ ├── default-big │ ├── default-big.css │ └── images │ │ ├── down-arrow.png │ │ ├── left-arrow.png │ │ ├── right-arrow.png │ │ └── up-arrow.png │ ├── default │ ├── default.css │ └── images │ │ ├── down-arrow.png │ │ ├── left-arrow.png │ │ ├── right-arrow.png │ │ └── up-arrow.png │ ├── light-big │ ├── images │ │ ├── down-arrow.png │ │ ├── left-arrow.png │ │ ├── right-arrow.png │ │ └── up-arrow.png │ └── light-big.css │ └── light │ ├── images │ ├── down-arrow.png │ ├── left-arrow.png │ ├── right-arrow.png │ └── up-arrow.png │ └── light.css ├── bower.json ├── demo ├── images │ ├── background.png │ ├── slide-1.jpg │ ├── slide-2.jpg │ ├── slide-3.jpg │ ├── slide-4.jpg │ ├── slide-5.jpg │ └── thumb │ │ ├── thumb-slide-1.jpg │ │ ├── thumb-slide-2.jpg │ │ ├── thumb-slide-3.jpg │ │ ├── thumb-slide-4.jpg │ │ └── thumb-slide-5.jpg ├── index.html ├── sample-api-button.html ├── sample-carousel.html ├── sample-image-pagination.html ├── sample-standart-pagination-fade.html ├── sample-standart-pagination-vertical.html ├── sample-standart-pagination-with-number.html ├── sample-standart-pagination.html ├── sample-text-pagination-vertical.html ├── sample-text-pagination.html ├── sample-textbox-outside.html ├── sample-textbox.html ├── sample-video-all.html ├── sample-video-html5.html └── sample-video-vimeo-youtube.html ├── dist ├── css │ ├── responsive.css │ └── sangarSlider.css ├── js │ ├── sangarSlider.js │ └── sangarSlider.min.js ├── lib │ ├── imagesloaded.min.js │ ├── jquery.js │ └── jquery.touchSwipe.min.js └── themes │ ├── dark-big │ ├── dark-big.css │ └── images │ │ ├── down-arrow.png │ │ ├── left-arrow.png │ │ ├── right-arrow.png │ │ └── up-arrow.png │ ├── dark │ ├── dark.css │ └── images │ │ ├── down-arrow.png │ │ ├── left-arrow.png │ │ ├── right-arrow.png │ │ └── up-arrow.png │ ├── default-big │ ├── default-big.css │ └── images │ │ ├── down-arrow.png │ │ ├── left-arrow.png │ │ ├── right-arrow.png │ │ └── up-arrow.png │ ├── default │ ├── default.css │ └── images │ │ ├── down-arrow.png │ │ ├── left-arrow.png │ │ ├── right-arrow.png │ │ └── up-arrow.png │ ├── light-big │ ├── images │ │ ├── down-arrow.png │ │ ├── left-arrow.png │ │ ├── right-arrow.png │ │ └── up-arrow.png │ └── light-big.css │ └── light │ ├── images │ ├── down-arrow.png │ ├── left-arrow.png │ ├── right-arrow.png │ └── up-arrow.png │ └── light.css ├── package.json └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore these so they're not stored in source control 2 | node_modules 3 | composer.phar 4 | vendor/ 5 | composer.lock -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function(grunt) { 2 | 3 | // Project configuration. 4 | grunt.initConfig({ 5 | pkg: grunt.file.readJSON('package.json'), 6 | concat: { 7 | options: { 8 | separator: "\n\n/* Sangar Slider Class */\n", //add a new line after each file 9 | banner: "", 10 | footer: "" 11 | }, 12 | js: { 13 | // the files to concatenate 14 | src: [ 15 | 'assets/js/sangarSlider.js', 16 | 'assets/js/sangarSlider/*.js' 17 | ], 18 | dest: 'dist/js/<%= pkg.name %>.js' 19 | } 20 | }, 21 | copy: { 22 | lib: { 23 | files: [{ 24 | expand: true, 25 | cwd: 'assets/js/', 26 | src: ['jquery.js','imagesloaded.min.js','jquery.touchSwipe.min.js'], 27 | dest: 'dist/lib/' 28 | }] 29 | }, 30 | css: { 31 | files: [{ 32 | expand: true, 33 | cwd: 'assets/css/', 34 | src: ['sangarSlider.css','responsive.css'], 35 | dest: 'dist/css/' 36 | }] 37 | }, 38 | themes: { 39 | files: [{ 40 | expand: true, 41 | cwd: 'assets/themes/', 42 | src: ['**'], 43 | dest: 'dist/themes/' 44 | }] 45 | } 46 | }, 47 | uglify: { 48 | options: { 49 | banner: "// Sangar Slider - 2014 Tonjoo \n" 50 | }, 51 | build: { 52 | src: "dist/js/<%= pkg.name %>.js", 53 | dest: "dist/js/<%= pkg.name %>.min.js" 54 | } 55 | } 56 | }); 57 | 58 | grunt.loadNpmTasks('grunt-contrib-concat'); 59 | grunt.loadNpmTasks('grunt-contrib-copy'); 60 | grunt.loadNpmTasks('grunt-contrib-uglify'); 61 | 62 | // When developing the plugin, use the concat version. So all code are readable 63 | grunt.registerTask('dev-watch', ['concat']); 64 | 65 | // Distribution version 66 | grunt.registerTask('build', ['concat', 'copy', 'uglify']); 67 | }; -------------------------------------------------------------------------------- /assets/css/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | width: 100%; 3 | margin: 0px; 4 | padding: 0px; 5 | -webkit-transform: translate3d(0, 0, 0); 6 | font-family: sans-serif; 7 | } 8 | 9 | a { 10 | color: black; 11 | text-decoration: none; 12 | } 13 | 14 | a:hover { 15 | text-decoration: underline; 16 | } 17 | 18 | .exPagination.active { 19 | color: red; 20 | } 21 | 22 | .header { 23 | margin-bottom: 40px; 24 | margin: 20px; 25 | } 26 | 27 | .header h2 { 28 | margin-bottom: 10px; 29 | } 30 | 31 | .header a { 32 | color: #356D84; 33 | } 34 | 35 | .header ul { 36 | padding-left: 0px; 37 | } 38 | 39 | .header ul li { 40 | list-style:none; 41 | display: inline; 42 | } -------------------------------------------------------------------------------- /assets/css/responsive.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Small Responsive class 3 | */ 4 | .sangar-slideshow-container .sangar-wrapper.sangar-responsive-mobile-small .sangar-caption .sangar-caption-text{ 5 | /* do small style here */ 6 | } 7 | 8 | 9 | /** 10 | * Medium Responsive class 11 | */ 12 | .sangar-slideshow-container .sangar-wrapper.sangar-responsive-mobile-medium{ 13 | /* do medium style here */ 14 | } -------------------------------------------------------------------------------- /assets/js/imagesloaded.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * imagesLoaded PACKAGED v3.1.8 3 | * JavaScript is all like "You images are done yet or what?" 4 | * MIT License 5 | */ 6 | 7 | (function(){function e(){}function t(e,t){for(var n=e.length;n--;)if(e[n].listener===t)return n;return-1}function n(e){return function(){return this[e].apply(this,arguments)}}var i=e.prototype,r=this,o=r.EventEmitter;i.getListeners=function(e){var t,n,i=this._getEvents();if("object"==typeof e){t={};for(n in i)i.hasOwnProperty(n)&&e.test(n)&&(t[n]=i[n])}else t=i[e]||(i[e]=[]);return t},i.flattenListeners=function(e){var t,n=[];for(t=0;e.length>t;t+=1)n.push(e[t].listener);return n},i.getListenersAsObject=function(e){var t,n=this.getListeners(e);return n instanceof Array&&(t={},t[e]=n),t||n},i.addListener=function(e,n){var i,r=this.getListenersAsObject(e),o="object"==typeof n;for(i in r)r.hasOwnProperty(i)&&-1===t(r[i],n)&&r[i].push(o?n:{listener:n,once:!1});return this},i.on=n("addListener"),i.addOnceListener=function(e,t){return this.addListener(e,{listener:t,once:!0})},i.once=n("addOnceListener"),i.defineEvent=function(e){return this.getListeners(e),this},i.defineEvents=function(e){for(var t=0;e.length>t;t+=1)this.defineEvent(e[t]);return this},i.removeListener=function(e,n){var i,r,o=this.getListenersAsObject(e);for(r in o)o.hasOwnProperty(r)&&(i=t(o[r],n),-1!==i&&o[r].splice(i,1));return this},i.off=n("removeListener"),i.addListeners=function(e,t){return this.manipulateListeners(!1,e,t)},i.removeListeners=function(e,t){return this.manipulateListeners(!0,e,t)},i.manipulateListeners=function(e,t,n){var i,r,o=e?this.removeListener:this.addListener,s=e?this.removeListeners:this.addListeners;if("object"!=typeof t||t instanceof RegExp)for(i=n.length;i--;)o.call(this,t,n[i]);else for(i in t)t.hasOwnProperty(i)&&(r=t[i])&&("function"==typeof r?o.call(this,i,r):s.call(this,i,r));return this},i.removeEvent=function(e){var t,n=typeof e,i=this._getEvents();if("string"===n)delete i[e];else if("object"===n)for(t in i)i.hasOwnProperty(t)&&e.test(t)&&delete i[t];else delete this._events;return this},i.removeAllListeners=n("removeEvent"),i.emitEvent=function(e,t){var n,i,r,o,s=this.getListenersAsObject(e);for(r in s)if(s.hasOwnProperty(r))for(i=s[r].length;i--;)n=s[r][i],n.once===!0&&this.removeListener(e,n.listener),o=n.listener.apply(this,t||[]),o===this._getOnceReturnValue()&&this.removeListener(e,n.listener);return this},i.trigger=n("emitEvent"),i.emit=function(e){var t=Array.prototype.slice.call(arguments,1);return this.emitEvent(e,t)},i.setOnceReturnValue=function(e){return this._onceReturnValue=e,this},i._getOnceReturnValue=function(){return this.hasOwnProperty("_onceReturnValue")?this._onceReturnValue:!0},i._getEvents=function(){return this._events||(this._events={})},e.noConflict=function(){return r.EventEmitter=o,e},"function"==typeof define&&define.amd?define("eventEmitter/EventEmitter",[],function(){return e}):"object"==typeof module&&module.exports?module.exports=e:this.EventEmitter=e}).call(this),function(e){function t(t){var n=e.event;return n.target=n.target||n.srcElement||t,n}var n=document.documentElement,i=function(){};n.addEventListener?i=function(e,t,n){e.addEventListener(t,n,!1)}:n.attachEvent&&(i=function(e,n,i){e[n+i]=i.handleEvent?function(){var n=t(e);i.handleEvent.call(i,n)}:function(){var n=t(e);i.call(e,n)},e.attachEvent("on"+n,e[n+i])});var r=function(){};n.removeEventListener?r=function(e,t,n){e.removeEventListener(t,n,!1)}:n.detachEvent&&(r=function(e,t,n){e.detachEvent("on"+t,e[t+n]);try{delete e[t+n]}catch(i){e[t+n]=void 0}});var o={bind:i,unbind:r};"function"==typeof define&&define.amd?define("eventie/eventie",o):e.eventie=o}(this),function(e,t){"function"==typeof define&&define.amd?define(["eventEmitter/EventEmitter","eventie/eventie"],function(n,i){return t(e,n,i)}):"object"==typeof exports?module.exports=t(e,require("wolfy87-eventemitter"),require("eventie")):e.imagesLoaded=t(e,e.EventEmitter,e.eventie)}(window,function(e,t,n){function i(e,t){for(var n in t)e[n]=t[n];return e}function r(e){return"[object Array]"===d.call(e)}function o(e){var t=[];if(r(e))t=e;else if("number"==typeof e.length)for(var n=0,i=e.length;i>n;n++)t.push(e[n]);else t.push(e);return t}function s(e,t,n){if(!(this instanceof s))return new s(e,t);"string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=o(e),this.options=i({},this.options),"function"==typeof t?n=t:i(this.options,t),n&&this.on("always",n),this.getImages(),a&&(this.jqDeferred=new a.Deferred);var r=this;setTimeout(function(){r.check()})}function f(e){this.img=e}function c(e){this.src=e,v[e]=this}var a=e.jQuery,u=e.console,h=u!==void 0,d=Object.prototype.toString;s.prototype=new t,s.prototype.options={},s.prototype.getImages=function(){this.images=[];for(var e=0,t=this.elements.length;t>e;e++){var n=this.elements[e];"IMG"===n.nodeName&&this.addImage(n);var i=n.nodeType;if(i&&(1===i||9===i||11===i))for(var r=n.querySelectorAll("img"),o=0,s=r.length;s>o;o++){var f=r[o];this.addImage(f)}}},s.prototype.addImage=function(e){var t=new f(e);this.images.push(t)},s.prototype.check=function(){function e(e,r){return t.options.debug&&h&&u.log("confirm",e,r),t.progress(e),n++,n===i&&t.complete(),!0}var t=this,n=0,i=this.images.length;if(this.hasAnyBroken=!1,!i)return this.complete(),void 0;for(var r=0;i>r;r++){var o=this.images[r];o.on("confirm",e),o.check()}},s.prototype.progress=function(e){this.hasAnyBroken=this.hasAnyBroken||!e.isLoaded;var t=this;setTimeout(function(){t.emit("progress",t,e),t.jqDeferred&&t.jqDeferred.notify&&t.jqDeferred.notify(t,e)})},s.prototype.complete=function(){var e=this.hasAnyBroken?"fail":"done";this.isComplete=!0;var t=this;setTimeout(function(){if(t.emit(e,t),t.emit("always",t),t.jqDeferred){var n=t.hasAnyBroken?"reject":"resolve";t.jqDeferred[n](t)}})},a&&(a.fn.imagesLoaded=function(e,t){var n=new s(this,e,t);return n.jqDeferred.promise(a(this))}),f.prototype=new t,f.prototype.check=function(){var e=v[this.img.src]||new c(this.img.src);if(e.isConfirmed)return this.confirm(e.isLoaded,"cached was confirmed"),void 0;if(this.img.complete&&void 0!==this.img.naturalWidth)return this.confirm(0!==this.img.naturalWidth,"naturalWidth"),void 0;var t=this;e.on("confirm",function(e,n){return t.confirm(e.isLoaded,n),!0}),e.check()},f.prototype.confirm=function(e,t){this.isLoaded=e,this.emit("confirm",this,t)};var v={};return c.prototype=new t,c.prototype.check=function(){if(!this.isChecked){var e=new Image;n.bind(e,"load",this),n.bind(e,"error",this),e.src=this.src,this.isChecked=!0}},c.prototype.handleEvent=function(e){var t="on"+e.type;this[t]&&this[t](e)},c.prototype.onload=function(e){this.confirm(!0,"onload"),this.unbindProxyEvents(e)},c.prototype.onerror=function(e){this.confirm(!1,"onerror"),this.unbindProxyEvents(e)},c.prototype.confirm=function(e,t){this.isConfirmed=!0,this.isLoaded=e,this.emit("confirm",this,t)},c.prototype.unbindProxyEvents=function(e){n.unbind(e.target,"load",this),n.unbind(e.target,"error",this)},s}); -------------------------------------------------------------------------------- /assets/js/sangarSlider/sangarBeforeAfter.js: -------------------------------------------------------------------------------- 1 | var sangarBeforeAfter; 2 | 3 | ;(function($) { 4 | 5 | sangarBeforeAfter = function(base, opt) { 6 | 7 | /** 8 | * Function: onInit 9 | */ 10 | base.onInit = function() 11 | { 12 | opt.onInit(); 13 | } 14 | 15 | 16 | /** 17 | * Function: onReset 18 | */ 19 | base.onReset = function() 20 | { 21 | base.setupSizeAndCalculateHeightWidth(); // setup size after scaling 22 | base.setCurrentSlide(true); // reset current slide 23 | base.setupCarousel() // if opt.carousel is true 24 | base.initOutsideTextboxDimension(); // set outside container dimension 25 | base.playVideo(); // play video on first slide if exist 26 | base.setTimerWidth(); // reset timer width 27 | base.setBulletPosition() // reset bullet position 28 | base.setOutsideTextbox(); // set outside textbox if it defined 29 | base.resizeEmContent(); // resize text box font and padding size 30 | base.setActiveExternalPagination() // set class active to external pagination 31 | 32 | opt.onReset(base.sangarWidth,base.sangarHeight); 33 | } 34 | 35 | 36 | /** 37 | * Function: beforeLoading 38 | */ 39 | base.beforeLoading = function() 40 | { 41 | opt.beforeLoading(); 42 | } 43 | 44 | 45 | /** 46 | * Function: afterLoading 47 | */ 48 | base.afterLoading = function() 49 | { 50 | base.animateContent(true); // animate content if contentAnimation is true 51 | base.startTimer(); 52 | 53 | opt.afterLoading(); 54 | 55 | // carousel blur effect 56 | if(opt.carousel) 57 | { 58 | base.doBlur(base.$sangarWrapper.find('.sangar-content'),0.3); 59 | } 60 | } 61 | 62 | 63 | /** 64 | * Function: beforeSlideChange 65 | */ 66 | base.beforeSlideChange = function() 67 | { 68 | opt.beforeChange(base.activeSlide); 69 | } 70 | 71 | 72 | /** 73 | * Function: afterSlideChange 74 | */ 75 | base.afterSlideChange = function() 76 | { 77 | base.playVideo(); // play current video if exist 78 | base.setOutsideTextbox(); // set outside textbox if it defined 79 | base.setActiveExternalPagination(); // set class active to external pagination 80 | base.animateContent(); // animate content if contentAnimation is true 81 | 82 | opt.afterChange(base.activeSlide); 83 | } 84 | } 85 | 86 | })(jQuery); -------------------------------------------------------------------------------- /assets/js/sangarSlider/sangarLock.js: -------------------------------------------------------------------------------- 1 | var sangarLock; 2 | 3 | ;(function($) { 4 | 5 | sangarLock = function(base, opt) { 6 | 7 | /** 8 | * Function: unlock 9 | */ 10 | base.unlock = function() 11 | { 12 | base.locked = false; 13 | } 14 | 15 | /** 16 | * Function: lock 17 | */ 18 | base.lock = function() 19 | { 20 | base.locked = true; 21 | } 22 | 23 | /** 24 | * Function: stopSliderLock 25 | */ 26 | base.stopSliderLock = function() 27 | { 28 | if (!opt.timer || opt.timer == 'false') { 29 | return false; 30 | } else { 31 | base.timerRunning = false; 32 | clearInterval(base.clock); 33 | clearTimeout(base.resumeClock); 34 | 35 | base.pauseTimerAnimation(); 36 | } 37 | } 38 | 39 | /** 40 | * Function: resetAndUnlock 41 | */ 42 | base.resetAndUnlock = function() 43 | { 44 | base.unlock(); 45 | base.afterSlideChange(); 46 | 47 | // Fade: put prevActiveSlide to z-index 1 after end of translation 48 | if (opt.animation == "fade") 49 | { 50 | base.$slides 51 | .eq(base.prevActiveSlide) 52 | .css({ 53 | "z-index": 1 54 | }); 55 | } 56 | } 57 | } 58 | 59 | })(jQuery); -------------------------------------------------------------------------------- /assets/js/sangarSlider/sangarResetSlider.js: -------------------------------------------------------------------------------- 1 | var sangarResetSlider; 2 | 3 | ;(function($) { 4 | 5 | sangarResetSlider = function(base, opt) { 6 | 7 | /** 8 | * Function: resetSlider 9 | */ 10 | base.resetSlider = function() 11 | { 12 | var slide_action; 13 | base.doLoading(); // do loading 14 | 15 | // setupSizeAndCalculateHeightWidth before scaling 16 | base.setupSizeAndCalculateHeightWidth(); 17 | 18 | base.doResponsiveClass(); // apply responsive class 19 | base.activeSlide = 0; // reset active slide 20 | base.countSlide = 0; // reset active slide 21 | base.bulletObj.setActiveBullet(); // reset active bullets 22 | base.setNavPosition() // reset navigation position after resize 23 | 24 | // Continous & rollback reset attributes 25 | if(opt.continousSliding) 26 | { 27 | // continous sliding 28 | base.$slideWrapper.children().children().width(base.sangarWidth); 29 | base.$slideWrapper.children().children().height(base.sangarHeight); 30 | 31 | base.setupScaleImage(base.$slideWrapper.children().children().children('img')); 32 | base.setupScaleIframe(base.$slideWrapper.children().children().children('iframe')); 33 | 34 | base.activeSlideContinous = 0; 35 | base.continous_count_position = 0; 36 | base.activeGroup = 2; 37 | } 38 | else 39 | { 40 | // non continous sliding 41 | base.$slides.width(base.sangarWidth); 42 | base.$slides.height(base.sangarHeight); 43 | 44 | base.setupScaleImage(base.$slides.children('img')); 45 | base.setupScaleIframe(base.$slides.children('iframe')); 46 | 47 | slide_action = 0; 48 | } 49 | 50 | // animation based reset attributes 51 | if(opt.animation == "horizontal-slide") 52 | { 53 | if(opt.continousSliding) 54 | { 55 | var slideWrapper = base.$slideWrapper.children('.slideWrapperInside'); 56 | var slide = slideWrapper.children('.sangar-content'); 57 | var slideWrapperWidth = slide.width() * base.numberSlides; 58 | 59 | slideWrapper.css({ 60 | 'width': slideWrapperWidth + 'px' 61 | }); 62 | 63 | base.$slideWrapper.children('.slideWrapperInside.swi1st').css('margin-left','-' + slideWrapperWidth + 'px'); 64 | base.$slideWrapper.children('.slideWrapperInside.swi2nd').css('margin-left','0px'); 65 | base.$slideWrapper.children('.slideWrapperInside.swi3rd').css('margin-left',slideWrapperWidth + 'px'); 66 | 67 | base.$slideWrapper.css('-' + base.vendorPrefix + '-transform', ''); 68 | } 69 | else 70 | { 71 | var slideWrapper = base.$slideWrapper; 72 | var slide = slideWrapper.children('.sangar-content'); 73 | var slideWrapperWidth = slide.width() * base.numberSlides; 74 | 75 | slideWrapper.css({ 76 | 'width': slideWrapperWidth + 'px' 77 | }); 78 | 79 | base.$slideWrapper.css('-' + base.vendorPrefix + '-transform', ''); 80 | } 81 | } 82 | else if(opt.animation == "vertical-slide") 83 | { 84 | if(opt.continousSliding) 85 | { 86 | var slideWrapper = base.$slideWrapper.children('.slideWrapperInside'); 87 | var slide = slideWrapper.children('.sangar-content'); 88 | var slideWrapperHeight = slide.height() * base.numberSlides; 89 | 90 | slideWrapper.css({ 91 | 'height': slideWrapperHeight + 'px' 92 | }); 93 | 94 | base.$slideWrapper.children('.slideWrapperInside.swi1st').css('margin-top','-' + slideWrapperHeight + 'px'); 95 | base.$slideWrapper.children('.slideWrapperInside.swi2nd').css('margin-top','0px'); 96 | base.$slideWrapper.children('.slideWrapperInside.swi3rd').css('margin-top',slideWrapperHeight + 'px'); 97 | 98 | base.$slideWrapper.css('-' + base.vendorPrefix + '-transform', ''); 99 | base.$slideWrapper.css('top', '0px'); 100 | } 101 | else 102 | { 103 | var slideWrapper = base.$slideWrapper; 104 | var slide = slideWrapper.children('.sangar-content'); 105 | var slideWrapperHeight = slide.height() * base.numberSlides; 106 | 107 | slideWrapper.css({ 108 | 'height': slideWrapperHeight + 'px' 109 | }); 110 | 111 | base.$slideWrapper.css('-' + base.vendorPrefix + '-transform', ''); 112 | base.$slideWrapper.css('top', '0px'); 113 | } 114 | } 115 | else if(opt.animation == "fade") 116 | { 117 | base.$slideWrapper.css({"width": base.sangarWidth + "px", "height": base.sangarHeight + "px"}); 118 | 119 | base.$slides.css({ 120 | "z-index": 1 121 | }); 122 | 123 | base.$slides.eq(base.activeSlide).css({"z-index": 3}); 124 | } 125 | 126 | // reset slide pagination 127 | if(opt.pagination == 'content-horizontal' || opt.pagination == 'content-vertical') 128 | { 129 | base.bulletObj.generateSlideBullet(); 130 | base.bulletObj.slideBullet('first'); 131 | base.shift(0); 132 | } 133 | 134 | base.onReset(); // Run functions after slide init and reset 135 | } 136 | } 137 | 138 | })(jQuery); -------------------------------------------------------------------------------- /assets/js/sangarSlider/sangarResponsiveClass.js: -------------------------------------------------------------------------------- 1 | var sangarResponsiveClass; 2 | 3 | ;(function($) { 4 | 5 | sangarResponsiveClass = function(base, opt) { 6 | 7 | /** 8 | * Function: doResponsiveClass 9 | */ 10 | base.doResponsiveClass = function() 11 | { 12 | /** 13 | * Resposive Class 14 | * - sangar-responsive-mobile-small (width <= 369) 15 | * - sangar-responsive-mobile-medium (width <= 499 && width <= sangarWidth) 16 | * - sangar-responsive-full 17 | */ 18 | 19 | if(370 <= base.sangarWidth && base.sangarWidth <= 499) { 20 | doResponsiveClassStart('sangar-responsive-mobile-medium') 21 | } 22 | else if(369 >= base.sangarWidth ) { 23 | doResponsiveClassStart('sangar-responsive-mobile-small') 24 | } 25 | else { 26 | // Desktop Mode 27 | doResponsiveClassStart('sangar-responsive-full') 28 | } 29 | 30 | function doResponsiveClassStart(responsiveClass){ 31 | // if it is the first run dont do animation 32 | if(base.firstRun) 33 | { 34 | base.firstRun = false 35 | base.$sangarWrapper.attr('class','sangar-wrapper ' + opt.themeClass) 36 | base.$sangarWrapper.addClass(responsiveClass) 37 | return 38 | } 39 | 40 | if(base.old_responsive_class == responsiveClass) return 41 | 42 | base.old_responsive_class = responsiveClass 43 | 44 | base.$sangarWrapper.addClass(responsiveClass) 45 | } 46 | } 47 | } 48 | 49 | })(jQuery); -------------------------------------------------------------------------------- /assets/js/sangarSlider/sangarSetupLayout.js: -------------------------------------------------------------------------------- 1 | var sangarSetupLayout; 2 | 3 | ;(function($) { 4 | 5 | sangarSetupLayout = function(base, opt) { 6 | 7 | /** 8 | * Function: setupLayout 9 | */ 10 | base.setupLayout = function() 11 | { 12 | /** 13 | * Force change option value 14 | */ 15 | setupOptions(opt); 16 | function setupOptions(opt) 17 | { 18 | if(opt.carousel) 19 | { 20 | opt.animation = 'horizontal-slide'; 21 | opt.continousSliding = true; 22 | opt.directionalNav = 'show'; 23 | } 24 | 25 | if(opt.animation == 'fade') 26 | { 27 | opt.continousSliding = false; 28 | } 29 | } 30 | 31 | // general layout 32 | base.calculateHeightWidth(); 33 | 34 | if(opt.animation == "horizontal-slide") 35 | { 36 | base.$slides.css({ 37 | "position": "relative", 38 | "float": "left", 39 | "display": "block", 40 | "width": base.sangarWidth + "px", 41 | "height": + "100%" 42 | }); 43 | 44 | if(opt.continousSliding) 45 | { 46 | slideWrapperInside1st = '
' + base.$slideWrapper.html() + '
'; 47 | slideWrapperInside2nd = '
' + base.$slideWrapper.html() + '
'; 48 | slideWrapperInside3rd = '
' + base.$slideWrapper.html() + '
'; 49 | base.$slideWrapper.html(slideWrapperInside1st + slideWrapperInside2nd + slideWrapperInside3rd); 50 | } 51 | else 52 | { 53 | base.$slideWrapper.css({"width": base.sangarWidth * base.numberSlides + "px", "height": base.sangarHeight + "px"}); 54 | } 55 | } 56 | else if(opt.animation == "vertical-slide") 57 | { 58 | base.$slides.css({ 59 | "position": "relative", 60 | "display": "block", 61 | "overflow": "hidden", 62 | "width": base.sangarWidth + "px", 63 | "height": base.sangarHeight + "px" 64 | }); 65 | 66 | if(opt.continousSliding) 67 | { 68 | slideWrapperInside1st = '
' + base.$slideWrapper.html() + '
'; 69 | slideWrapperInside2nd = '
' + base.$slideWrapper.html() + '
'; 70 | slideWrapperInside3rd = '
' + base.$slideWrapper.html() + '
'; 71 | base.$slideWrapper.html(slideWrapperInside1st + slideWrapperInside2nd + slideWrapperInside3rd); 72 | } 73 | else 74 | { 75 | base.$slideWrapper.css({"width": base.sangarWidth + "px", "height": base.sangarHeight * base.numberSlides + "px"}); 76 | } 77 | } 78 | else if(opt.animation == "fade") 79 | { 80 | base.$slides.css({ 81 | "opacity": 0, 82 | "z-index": 1 83 | }); 84 | 85 | base.$slides.eq(base.activeSlide).css({ 86 | "z-index": 3, 87 | "opacity": 1 88 | }); 89 | 90 | base.$slideWrapper.css({"width": base.sangarWidth + "px", "height": base.sangarHeight + "px"}); 91 | } 92 | 93 | // set background 94 | base.$sangar.css('background-color', opt.background); 95 | 96 | // init isRunning 97 | base.isRunning = false; 98 | 99 | // set current slide 100 | if(opt.continousSliding) 101 | { 102 | base.$currentSlide = base.$slideWrapper.children('.slideWrapperInside.swi2nd').children().eq(0); 103 | } 104 | else 105 | { 106 | base.$currentSlide = base.$slideWrapper.children().eq(0); 107 | } 108 | 109 | base.$slideWrapper.css('left', '0px'); 110 | } 111 | 112 | 113 | /** 114 | * Function: setupCarousel 115 | */ 116 | base.setupCarousel = function() 117 | { 118 | if(! opt.carousel) return; 119 | 120 | var left = (100 - opt.carouselWidth) / 2; 121 | left = base.originalSangarWidth * left / 100; 122 | 123 | base.$slideWrapper.css('left', left + 'px'); 124 | 125 | // navigation 126 | var btn = base.$sangarWrapper.children('div.sangar-slider-nav').children('span'); 127 | 128 | btn.css({ 129 | 'top': '0px', 130 | 'margin-top': '0px', 131 | 'background': 'none', 132 | 'width': left + 'px', 133 | 'height': base.sangarHeight + 'px' 134 | }); 135 | 136 | // blur 137 | base.doBlur(false,false,opt.carouselOpacity); 138 | base.doBlur('.swi2nd',0,1); 139 | } 140 | 141 | 142 | /** 143 | * Function: doBlur 144 | */ 145 | base.doBlur = function(parentClass,childNumber,valueBlur) 146 | { 147 | var transition = '-' + base.vendorPrefix + '-transition'; 148 | 149 | if(!parentClass && !childNumber) 150 | { 151 | base.$slideWrapper.children().children() 152 | .css({ 153 | 'opacity': valueBlur, 154 | 'filter': 'alpha(opacity=' + valueBlur*100 + ')', 155 | transition: 'opacity ' + opt.animationSpeed + 'ms ease-in-out' 156 | }); 157 | } 158 | else 159 | { 160 | base.$slideWrapper.children(parentClass).children().eq(childNumber) 161 | .css({ 162 | 'opacity': valueBlur, 163 | 'filter': 'alpha(opacity=' + valueBlur*100 + ')', 164 | transition: 'opacity ' + opt.animationSpeed + 'ms ease-in-out' 165 | }); 166 | } 167 | } 168 | } 169 | 170 | })(jQuery); -------------------------------------------------------------------------------- /assets/js/sangarSlider/sangarSetupNavigation.js: -------------------------------------------------------------------------------- 1 | var sangarSetupNavigation; 2 | 3 | ;(function($) { 4 | 5 | sangarSetupNavigation = function(base, opt) { 6 | 7 | var btnTop; 8 | 9 | /** 10 | * Function: setupDirectionalNav 11 | */ 12 | base.setupDirectionalNav = function() 13 | { 14 | if (opt.directionalNav != 'none') 15 | { 16 | if (opt.directionalNav == "false") { 17 | return false; 18 | } 19 | 20 | if(opt.animation == "vertical-slide") 21 | { 22 | var arrow_right = 'down'; 23 | var arrow_left = 'up'; 24 | } 25 | else 26 | { 27 | var arrow_right = 'right'; 28 | var arrow_left = 'left'; 29 | } 30 | 31 | var directionalNavHTML = '
'; 32 | base.$sangarWrapper.append(directionalNavHTML); 33 | var leftBtn = base.$sangarWrapper.children('div.sangar-slider-nav').children('span.sangar-arrow-' + arrow_left), 34 | rightBtn = base.$sangarWrapper.children('div.sangar-slider-nav').children('span.sangar-arrow-' + arrow_right); 35 | leftBtn.click(function () { 36 | base.stopSliderLock(); 37 | base.shift("prev"); 38 | }); 39 | rightBtn.click(function () { 40 | base.stopSliderLock(); 41 | base.shift("next") 42 | }); 43 | 44 | /** 45 | * autohide behaviour 46 | */ 47 | if(opt.directionalNav == 'autohide') 48 | { 49 | var btn = base.$sangarWrapper.children('div.sangar-slider-nav').children('span'); 50 | var btnAnimateSpeed = 300; 51 | 52 | btn.css("opacity", opt.directionalNavHideOpacity); 53 | 54 | base.$sangarWrapper.mouseenter(function(){ 55 | 56 | btn.stop( true, true ); 57 | 58 | btn.animate({ 59 | "opacity": opt.directionalNavShowOpacity 60 | }, btnAnimateSpeed); 61 | }); 62 | base.$sangarWrapper.mouseleave(function(){ 63 | 64 | btn.stop( true, true ); 65 | 66 | btn.animate({ 67 | "opacity": opt.directionalNavHideOpacity 68 | }, btnAnimateSpeed); 69 | }); 70 | } 71 | } 72 | } 73 | 74 | 75 | /** 76 | * Function: setNavPosition 77 | */ 78 | base.setNavPosition = function() 79 | { 80 | if(opt.directionalNav == 'none') return; 81 | 82 | var btn = base.$sangarWrapper.children('div.sangar-slider-nav').children('span'); 83 | 84 | if(opt.animation == "vertical-slide") 85 | { 86 | var downBtn = base.$sangarWrapper.children('div.sangar-slider-nav').children('span.sangar-arrow-down'); 87 | var downBtnBottom = downBtn.css('bottom').slice(0,-2); 88 | 89 | if(opt.pagination == 'content-horizontal') 90 | { 91 | var pagination = base.$pagination 92 | var bottom = parseInt(pagination.outerHeight()) + parseInt(downBtnBottom); 93 | } 94 | 95 | // down nav arrow 96 | downBtn.css('bottom', bottom + 'px'); 97 | btn.css('left', ((base.sangarWidth / 2) - (btn.width() / 2)) + 'px'); 98 | } 99 | else 100 | { 101 | var downRight = base.$sangarWrapper.children('div.sangar-slider-nav').children('span.sangar-arrow-right'); 102 | 103 | // pagination content-vertical 104 | if(opt.pagination == 'content-vertical') 105 | { 106 | downRight.css({ 107 | 'right': opt.paginationContentWidth + 'px' 108 | }) 109 | } 110 | 111 | btnTop = ((base.sangarHeight / 2) - (btn.height() / 2)) + 'px'; 112 | 113 | btn.css({ 114 | 'top': btnTop 115 | }) 116 | } 117 | } 118 | } 119 | 120 | })(jQuery); -------------------------------------------------------------------------------- /assets/js/sangarSlider/sangarSetupSwipeTouch.js: -------------------------------------------------------------------------------- 1 | var sangarSetupSwipeTouch; 2 | 3 | ;(function($) { 4 | 5 | sangarSetupSwipeTouch = function(base, opt) { 6 | 7 | /** 8 | * Function: setupSwipeTouch 9 | */ 10 | base.setupSwipeTouch = function() 11 | { 12 | var IMG_WIDTH = opt.animation == "horizontal-slide" ? base.sangarWidth : base.sangarHeight; 13 | var currentImg = opt.continousSliding ? base.activeSlideContinous : base.activeSlide; 14 | var maxImages = base.numberSlides; 15 | var speed = opt.animationSpeed; 16 | var lastPosition = 0; 17 | var imgs; 18 | 19 | var swipeOptions = { 20 | triggerOnTouchEnd: true, 21 | triggerOnTouchLeave: true, 22 | swipeStatus: swipeStatus, 23 | allowPageScroll: "vertical", 24 | threshold: 300, 25 | excludedElements: "label, button, input, select, textarea, .noSwipe", // enable link (a) 26 | 27 | tap:function(event, target) { 28 | var href = $(target).attr('href'); 29 | var hrefTarget = $(target).attr('target'); 30 | 31 | if(href && href != "") 32 | { 33 | // link (a) can go if on tap mode 34 | if(hrefTarget && hrefTarget == "_blank") { 35 | window.open(href,'_blank'); 36 | } 37 | else { 38 | window.location.href = href; 39 | } 40 | } 41 | 42 | return false; 43 | } 44 | }; 45 | 46 | $(function () { 47 | imgs = opt.continousSliding ? base.$slideWrapper.children().children() : base.$slides; 48 | 49 | // prevent link (a) to go 50 | imgs.children('a').click(function(){ 51 | return false; 52 | }) 53 | 54 | imgs.swipe(swipeOptions); 55 | }); 56 | 57 | 58 | /** 59 | * Catch each phase of the swipe. 60 | * move : we drag the div 61 | * cancel : we animate back to where we were 62 | * end : we animate to the next image 63 | */ 64 | 65 | function swipeStatus(event, phase, direction, distance) 66 | { 67 | // reset width and currentImg in case slideshow have been resized 68 | IMG_WIDTH = opt.animation == "horizontal-slide" ? base.sangarWidth : base.sangarHeight; 69 | currentImg = opt.continousSliding ? base.activeSlideContinous : base.activeSlide; 70 | 71 | var curImgPosition = IMG_WIDTH * currentImg; 72 | 73 | if (phase == "start") 74 | { 75 | var slideWrapperPos = base.getTranslatePosition(base.$slideWrapper[0]); 76 | 77 | if(base.css3support()) 78 | { 79 | var lastestPosition = opt.animation == "horizontal-slide" ? slideWrapperPos.translateX : slideWrapperPos.translateY; 80 | } 81 | else 82 | { 83 | var lastestPosition = opt.animation == "horizontal-slide" ? base.$slideWrapper.css('left') : base.$slideWrapper.css('top'); 84 | lastestPosition = lastestPosition.slice(0,-2); 85 | } 86 | 87 | lastPosition = parseInt(lastestPosition) * -1; 88 | } 89 | else if (phase == "move") 90 | { 91 | var duration = 0; 92 | 93 | if(opt.animation == "horizontal-slide") 94 | { 95 | if (direction == "left") 96 | { 97 | var pos = lastPosition < curImgPosition ? lastPosition : curImgPosition; 98 | 99 | scrollImages(pos + distance, duration); 100 | } 101 | else if (direction == "right") 102 | { 103 | var pos = lastPosition > curImgPosition ? lastPosition : curImgPosition; 104 | 105 | scrollImages(pos - distance, duration); 106 | } 107 | } 108 | else if(opt.animation == "vertical-slide") 109 | { 110 | if (direction == "up") 111 | { 112 | var pos = lastPosition < curImgPosition ? lastPosition : curImgPosition; 113 | 114 | scrollImages(pos + distance, duration); 115 | } 116 | else if (direction == "down") 117 | { 118 | var pos = lastPosition > curImgPosition ? lastPosition : curImgPosition; 119 | 120 | scrollImages(pos - distance, duration); 121 | } 122 | } 123 | } 124 | else if (phase == "cancel") 125 | { 126 | scrollImages(IMG_WIDTH * currentImg, speed); 127 | } 128 | else if (phase == "end") 129 | { 130 | if (direction == "right" || direction == "down") 131 | { 132 | previousImage(); 133 | } 134 | else if (direction == "left" || direction == "up") 135 | { 136 | nextImage(); 137 | } 138 | 139 | lastestPosition = base.$slideWrapper.position(); 140 | lastestPosition = lastestPosition['left'] * -1; 141 | } 142 | } 143 | 144 | function previousImage() { 145 | if(opt.continousSliding) 146 | { 147 | currentImg = currentImg - 1; 148 | doShiftAndSwipeScroll('prev','prev'); 149 | } 150 | else 151 | { 152 | currentImg = Math.max(currentImg - 1, 0); 153 | doShiftAndSwipeScroll(currentImg,'prev'); 154 | } 155 | } 156 | 157 | function nextImage() { 158 | if(opt.continousSliding) 159 | { 160 | currentImg = currentImg + 1; 161 | doShiftAndSwipeScroll('next','next'); 162 | } 163 | else 164 | { 165 | currentImg = Math.min(currentImg + 1, maxImages - 1); 166 | doShiftAndSwipeScroll(currentImg,'next'); 167 | } 168 | } 169 | 170 | function doShiftAndSwipeScroll(direction,arrow) 171 | { 172 | if(! opt.continousSliding && base.activeSlide == (base.numberSlides-1) && arrow == 'next') 173 | { 174 | var slideAction = IMG_WIDTH * (base.numberSlides-1) * -1; 175 | 176 | scrollBackImages(slideAction); 177 | } 178 | else if(! opt.continousSliding && base.activeSlide == 0 && arrow == 'prev') 179 | { 180 | scrollBackImages(0); 181 | } 182 | else 183 | { 184 | base.shift(direction); 185 | } 186 | } 187 | 188 | function scrollBackImages(slideAction) 189 | { 190 | var duration = 500; 191 | 192 | // horizontal or vertical 193 | if(opt.animation == "horizontal-slide") 194 | { 195 | transform_css3 = 'translate3d('+ slideAction +'px, 0, 0)'; 196 | transform_js = {"left": slideAction + 'px'}; 197 | } 198 | else if(opt.animation == "vertical-slide") 199 | { 200 | transform_css3 = 'translate3d(0, '+ slideAction +'px, 0)'; 201 | transform_js = {"top": slideAction + 'px'}; 202 | } 203 | 204 | if(base.css3support()) 205 | { 206 | // Get the properties to transition 207 | var properties = {}; 208 | properties[ '-' + base.vendorPrefix + '-transition-duration' ] = duration + 'ms'; 209 | properties[ '-' + base.vendorPrefix + '-transform' ] = transform_css3; 210 | 211 | // Do the CSS3 transition 212 | base.$slideWrapper.css(properties); 213 | } 214 | else 215 | { 216 | base.$slideWrapper 217 | .animate(transform_js, duration); 218 | } 219 | } 220 | 221 | /** 222 | * Manually update the position of the imgs on drag 223 | */ 224 | function scrollImages(distance, duration) 225 | { 226 | var slideAction = (distance < 0 ? "" : "-") + Math.abs(distance).toString(); 227 | var transform_css3, transform_js; 228 | 229 | if(opt.animation == "horizontal-slide") 230 | { 231 | transform_css3 = 'translate3d('+ slideAction +'px, 0, 0)'; 232 | transform_js = {"left": slideAction + 'px'}; 233 | } 234 | else if(opt.animation == "vertical-slide") 235 | { 236 | transform_css3 = 'translate3d(0, '+ slideAction +'px, 0)'; 237 | transform_js = {"top": slideAction + 'px'}; 238 | } 239 | 240 | 241 | if(base.css3support()) 242 | { 243 | // Get the properties to transition 244 | var properties = {}; 245 | properties[ '-' + base.vendorPrefix + '-transition-duration' ] = duration + 'ms'; 246 | properties[ '-' + base.vendorPrefix + '-transform' ] = transform_css3; 247 | 248 | // Do the CSS3 transition 249 | base.$slideWrapper.css(properties); 250 | } 251 | else 252 | { 253 | base.$slideWrapper.animate(transform_js, duration); 254 | } 255 | } 256 | } 257 | } 258 | 259 | })(jQuery); -------------------------------------------------------------------------------- /assets/js/sangarSlider/sangarSetupTimer.js: -------------------------------------------------------------------------------- 1 | var sangarSetupTimer; 2 | 3 | ;(function($) { 4 | 5 | sangarSetupTimer = function(base, opt) { 6 | 7 | /** 8 | * Function: setupTimer 9 | */ 10 | base.setupTimer = function() 11 | { 12 | var timerHTML = '
'; 13 | 14 | base.$sangarWrapper.append(timerHTML); 15 | } 16 | 17 | base.startTimer = function() 18 | { 19 | //Timer Execution 20 | function startClock() 21 | { 22 | if (!opt.timer || opt.timer == 'false') 23 | { 24 | return false; 25 | } 26 | else 27 | { 28 | // stop current if exist 29 | if(base.clock) base.stopSliderLock(); 30 | 31 | // start new 32 | base.pauseTimerAnimation(true); 33 | base.doTimerAnimation(); 34 | 35 | base.clock = setInterval(function(e) 36 | { 37 | base.shift("next"); 38 | 39 | base.pauseTimerAnimation(true); 40 | 41 | setTimeout(function() { 42 | startClock(); 43 | }, opt.animationSpeed); 44 | 45 | }, opt.advanceSpeed); 46 | } 47 | } 48 | 49 | function resumeClock() 50 | { 51 | var diffTime = getPausedInterval(); 52 | 53 | base.pauseTimerAnimation(); 54 | base.doTimerAnimation(diffTime); 55 | 56 | base.resumeClock = setTimeout(function() 57 | { 58 | base.shift("next"); 59 | 60 | base.pauseTimerAnimation(true); 61 | 62 | setTimeout(function() { 63 | startClock(); 64 | }, opt.animationSpeed); 65 | 66 | }, diffTime); 67 | } 68 | 69 | function getPausedInterval() 70 | { 71 | var timer = base.$sangarWrapper.children('div.sangar-timer'); 72 | var currentWidth = timer.children('div.sangar-timer-mask').width(); 73 | var wrapperWidth = base.$sangarWrapper.width(); 74 | 75 | var percentDiff = (currentWidth / wrapperWidth) * 100; 76 | 77 | var diffTime = opt.advanceSpeed - (opt.advanceSpeed * percentDiff) / 100; 78 | 79 | return diffTime; 80 | } 81 | 82 | // Timer Setup 83 | if (opt.timer && ! base.clock) 84 | { 85 | var timer = base.$sangarWrapper.children('div.sangar-timer'); 86 | 87 | if (timer.length != 0) 88 | { 89 | startClock(); 90 | 91 | if (opt.startClockOnMouseOut) { 92 | var outTimer; 93 | base.$sangarWrapper.mouseleave(function () { 94 | 95 | outTimer = setTimeout(function () { 96 | if (!base.timerRunning) { 97 | resumeClock(); 98 | } 99 | }, opt.startClockOnMouseOutAfter) 100 | }) 101 | base.$sangarWrapper.mouseenter(function () { 102 | clearTimeout(outTimer); 103 | }) 104 | } 105 | } 106 | 107 | // Pause Timer on hover 108 | if (opt.pauseOnHover) { 109 | base.$sangarWrapper.mouseenter(function () { 110 | base.stopSliderLock(); 111 | }); 112 | } 113 | } 114 | } 115 | 116 | /** 117 | * Function: doTimerAnimation 118 | */ 119 | base.doTimerAnimation = function(timeSpeed) 120 | { 121 | timeSpeed = timeSpeed ? timeSpeed : opt.advanceSpeed; 122 | 123 | if(base.css3support()) 124 | { 125 | enableTransition(); 126 | doAnimate(timeSpeed); 127 | } 128 | 129 | /** 130 | * functions 131 | */ 132 | function enableTransition() 133 | { 134 | var timer = base.$sangarWrapper.children('div.sangar-timer'); 135 | 136 | timer.children('div.sangar-timer-mask')[0].offsetHeight; // Trigger a reflow, flushing the CSS changes 137 | timer.children('div.sangar-timer-mask').removeClass('notransition'); // Re-enable transitions 138 | } 139 | 140 | function doAnimate(timeSpeed) 141 | { 142 | var timer = base.$sangarWrapper.children('div.sangar-timer'); 143 | 144 | timer.children('div.sangar-timer-mask') 145 | .css({ 146 | 'width': '100%', 147 | 'transition': 'width ' + timeSpeed + 'ms linear' 148 | }); 149 | } 150 | } 151 | 152 | /** 153 | * Function: pauseTimerAnimation 154 | */ 155 | base.pauseTimerAnimation = function(reset) 156 | { 157 | var timer = base.$sangarWrapper.children('div.sangar-timer'); 158 | var currentWidth = timer.children('div.sangar-timer-mask').width(); 159 | 160 | if(reset) currentWidth = 0; 161 | 162 | if(base.css3support()) 163 | { 164 | timer.children('div.sangar-timer-mask') 165 | .addClass('notransition') 166 | .css({ 167 | 'width': currentWidth + 'px' 168 | }); 169 | } 170 | } 171 | 172 | /** 173 | * Function: setTimerWidth 174 | */ 175 | base.setTimerWidth = function() 176 | { 177 | var timer = base.$sangarWrapper.children('div.sangar-timer'); 178 | 179 | timer.width(base.sangarWidth); 180 | } 181 | } 182 | 183 | })(jQuery); -------------------------------------------------------------------------------- /assets/js/sangarSlider/sangarSizeAndScale.js: -------------------------------------------------------------------------------- 1 | var sangarSizeAndScale; 2 | 3 | ;(function($) { 4 | 5 | sangarSizeAndScale = function(base, opt) { 6 | 7 | /** 8 | * Function: setupScaleImage 9 | */ 10 | base.setupScaleImage = function(imageDom) 11 | { 12 | // if carousel 13 | // if(opt.carousel) var sliderWidth = base.sangarWidth * opt.carouselWidth / 100; 14 | // else var sliderWidth = base.sangarWidth; 15 | var sliderWidth = base.sangarWidth; 16 | 17 | // scaleImage 18 | if(opt.scaleImage) 19 | { 20 | imageDom.each(function(index){ 21 | 22 | var width = sliderWidth; 23 | var height = base.getImgHeight(width,index,imageDom.length); 24 | var slideHeight = $(this).parent().height(); 25 | 26 | if(base.sangarHeight > height) 27 | { 28 | 29 | 30 | var curImgWidth = base.getImgWidth(base.sangarHeight,index,imageDom.length); 31 | var curDiffWidth = (curImgWidth - sliderWidth) * -1; 32 | 33 | $(this).css({ 34 | 'height': base.sangarHeight + 'px', 35 | 'width': curImgWidth + 'px', 36 | 'max-height': base.sangarHeight + 'px', 37 | 'max-width': curImgWidth + 'px', 38 | 'margin-left': curDiffWidth / 2 + 'px' 39 | }) 40 | 41 | // neutralize 42 | $(this).css({ 43 | 'margin-top': '' 44 | }) 45 | } 46 | else 47 | { 48 | var diff = base.sangarHeight - height; 49 | 50 | if(opt.imageVerticalAlign == 'top') { 51 | $(this).css('margin-top', '0px'); 52 | } 53 | else if(opt.imageVerticalAlign == 'bottom') { 54 | $(this).css('margin-top', diff + 'px'); 55 | } 56 | else { 57 | $(this).css('margin-top', (diff / 2) + 'px'); 58 | } 59 | 60 | $(this).css({ 61 | 'width': width + 'px', 62 | 'max-width': width + 'px' 63 | }) 64 | 65 | // neutralize 66 | $(this).css({ 67 | 'height': 'auto', 68 | 'max-height':'none', 69 | 'margin-left': '' 70 | }) 71 | } 72 | 73 | // width 74 | $(this).parent().width(width); 75 | }) 76 | } 77 | else 78 | { 79 | var padding = 10; 80 | var curImgHeight = base.sangarHeight - (padding * 2); 81 | var curParWidth = imageDom.parent().width(); 82 | var curParHeight = imageDom.parent().height(); 83 | 84 | // image 85 | imageDom.css({ 86 | 'border-radius': '3px' 87 | }); 88 | 89 | // parent 90 | imageDom.parent().css({ 91 | 'padding': padding + 'px', 92 | 'width': (curParWidth - padding * 2) + 'px', 93 | 'height': (curParHeight - padding * 2) + 'px' 94 | }); 95 | 96 | // container 97 | var contWidth = sliderWidth - (padding * 2); 98 | var contHeight = base.sangarHeight - (padding * 2); 99 | 100 | // horizontal center align 101 | imageDom.each(function(index){ 102 | var width = base.getImgWidth(curImgHeight,index,imageDom.length); 103 | var diff = contWidth - width; 104 | 105 | if(diff > 0) 106 | { 107 | $(this).css({ 108 | 'margin-left': (diff / 2) + 'px', 109 | 'margin-top': '0px', 110 | 'height': curImgHeight + 'px' 111 | }); 112 | } 113 | else 114 | { 115 | var width = sliderWidth; 116 | var height = base.getImgHeight(width,index,imageDom.length); 117 | var diff = contHeight - height; 118 | 119 | $(this).css({ 120 | 'margin-left': '0px', 121 | 'margin-top': (diff / 2) + 'px', 122 | 'height': height + 'px' 123 | }); 124 | } 125 | }) 126 | } 127 | } 128 | 129 | /** 130 | * Function: setupScaleIframe 131 | */ 132 | base.setupScaleIframe = function(iframeDom) 133 | { 134 | iframeDom.each(function(index){ 135 | $(this).width(base.sangarWidth); 136 | $(this).height(base.sangarHeight); 137 | }); 138 | } 139 | } 140 | 141 | })(jQuery); -------------------------------------------------------------------------------- /assets/js/sangarSlider/sangarTextbox.js: -------------------------------------------------------------------------------- 1 | var sangarTextbox; 2 | 3 | ;(function($) { 4 | 5 | sangarTextbox = function(base, opt) { 6 | 7 | var textboxContent = [], 8 | arrTextboxHeight = [], 9 | textboxHeight, 10 | pagination, 11 | paginationBottom, 12 | isSetPaginationBottom = false; 13 | 14 | /** 15 | * Function: initOutsideTextbox 16 | */ 17 | base.initOutsideTextbox = function() 18 | { 19 | if(! opt.textboxOutside) return; 20 | 21 | base.$el.css('background',opt.background); // set background to root element 22 | 23 | base.$sangarWrapper.append('
'); 24 | base.$outsideTextbox = base.$sangarWrapper.children('.sangar-outside-textbox'); 25 | 26 | base.$slides.each(function (index,slide) { 27 | var textbox = $(this).find('.sangar-textbox-inner'); 28 | 29 | if(textbox.length > 0) 30 | { 31 | textbox.children('.sangar-textbox-content') 32 | .attr('class','sangar-textbox-content') 33 | .removeAttr('style') 34 | .css({ 35 | 'box-sizing': 'border-box', 36 | 'background': 'none' 37 | }); 38 | 39 | textboxContent[index] = textbox.html(); 40 | 41 | $(this).children('.sangar-textbox').remove(); 42 | } 43 | else 44 | { 45 | textboxContent[index] = false; 46 | } 47 | }); 48 | } 49 | 50 | 51 | /** 52 | * Function: initOutsideTextboxHeight 53 | */ 54 | base.initOutsideTextboxDimension = function() 55 | { 56 | if(! opt.textboxOutside) return; 57 | 58 | base.$slides.each(function (index,slide) { 59 | base.$outsideTextbox.html(textboxContent[index]); 60 | var activeTextboxContent = base.$outsideTextbox.children('.sangar-textbox-content'); 61 | 62 | arrTextboxHeight[index] = activeTextboxContent.outerHeight(); 63 | }); 64 | 65 | base.$outsideTextbox.html(''); // set to empty 66 | textboxHeight = Math.max.apply(Math,arrTextboxHeight); // get max height 67 | 68 | // apply bullet pagination position 69 | if(! isSetPaginationBottom) setPaginationBottom(); 70 | 71 | if(opt.pagination == 'bullet') 72 | { 73 | pagination.css({ 74 | 'bottom': parseInt(paginationBottom) + parseInt(textboxHeight) + 'px' 75 | }); 76 | } 77 | else if(opt.pagination == 'content-horizontal') 78 | { 79 | textboxHeight = textboxHeight + parseInt(paginationBottom); 80 | } 81 | 82 | // apply size 83 | base.$el.height(base.sangarHeight + textboxHeight); 84 | base.$sangarWrapper.height(base.sangarHeight + textboxHeight); 85 | 86 | // function setPaginationBottom 87 | function setPaginationBottom() 88 | { 89 | isSetPaginationBottom = true; 90 | 91 | // get paginationBottom 92 | if(opt.pagination == 'bullet') 93 | { 94 | pagination = base.$pagination.parent(); 95 | paginationBottom = pagination.css('bottom').slice(0,-2); 96 | } 97 | else if(opt.pagination == 'content-horizontal') 98 | { 99 | pagination = base.$pagination; 100 | paginationBottom = pagination.outerHeight(); 101 | } 102 | } 103 | } 104 | 105 | 106 | /** 107 | * Function: setOutsideTextbox 108 | */ 109 | base.setOutsideTextbox = function() 110 | { 111 | if(! opt.textboxOutside) return; 112 | 113 | if(textboxContent[base.activeSlide]) 114 | { 115 | base.$outsideTextbox.html(textboxContent[base.activeSlide]); 116 | var activeTextboxContent = base.$outsideTextbox.children('.sangar-textbox-content'); 117 | var textboxBottom = textboxHeight - arrTextboxHeight[base.activeSlide]; 118 | 119 | activeTextboxContent.css('bottom',textboxBottom + 'px'); 120 | activeTextboxContent.hide(); // hide 121 | activeTextboxContent.fadeIn(opt.animationSpeed); // show animation 122 | } 123 | } 124 | 125 | 126 | /** 127 | * Function: resizeEmContent 128 | */ 129 | base.resizeEmContent = function() 130 | { 131 | var defaultPercent = 62.5; 132 | var newPercent = (base.originalSangarWidth / opt.width) * defaultPercent; 133 | 134 | base.$sangarWrapper.find('.sangar-textbox-content').css('font-size', newPercent + '%'); 135 | } 136 | 137 | 138 | /** 139 | * Function: animateContent 140 | */ 141 | base.animateContent = function(withDelay) 142 | { 143 | if(! opt.animateContent) return; 144 | 145 | var current = base.$currentSlide; 146 | var el = current.children('.sangar-textbox'); 147 | 148 | if(el.length <= 0) return; 149 | 150 | var enabled = el.data('anim-enable'); 151 | 152 | if(enabled.length <= 0) return; 153 | 154 | var animEl = ''; 155 | 156 | $.each(enabled,function(index,value){ 157 | animEl += value; 158 | 159 | if(index + 1 < enabled.length) 160 | { 161 | animEl += ','; 162 | } 163 | }); 164 | 165 | var animType = el.data('anim-type') ? el.data('anim-type') : 'transition.slideDownIn'; 166 | var animDuration = el.data('anim-duration') ? el.data('anim-duration') : 1000; 167 | var animStagger = el.data('anim-stagger') ? el.data('anim-stagger') : 250; 168 | 169 | // do velocity 170 | if(withDelay) 171 | { 172 | current.find(animEl).css('visibility','hidden'); 173 | 174 | setTimeout(function() { 175 | current.find(animEl).velocity(animType, { 176 | duration: animDuration, 177 | stagger: animStagger, 178 | visibility: 'visible' 179 | }); 180 | }, 1); 181 | } 182 | else 183 | { 184 | current.find(animEl).css('visibility','hidden'); 185 | current.find(animEl).velocity(animType, { 186 | delay: opt.animationSpeed, 187 | duration: animDuration, 188 | stagger: animStagger, 189 | visibility: 'visible' 190 | }); 191 | } 192 | } 193 | } 194 | })(jQuery); -------------------------------------------------------------------------------- /assets/js/sangarSlider/sangarVideo.js: -------------------------------------------------------------------------------- 1 | var sangarVideo; 2 | 3 | ;(function($) { 4 | 5 | sangarVideo = function(base, opt) { 6 | 7 | /** 8 | * Function: playVideo 9 | */ 10 | base.playVideo = function() 11 | { 12 | var video = base.$currentSlide.children('video'); 13 | 14 | if(video[0]) 15 | { 16 | base.setVideoCentered(video); 17 | video[0].load(); 18 | video[0].currentTime = 0.1; 19 | 20 | if(! base.$prevSlide) //if first slide 21 | { 22 | video[0].play(); 23 | } 24 | else 25 | { 26 | setTimeout(function() { 27 | video[0].play(); 28 | }, opt.animationSpeed); 29 | } 30 | 31 | if(opt.html5VideoNextOnEnded) 32 | { 33 | video[0].onended = function(e) { 34 | base.shift('next'); 35 | }; 36 | } 37 | else 38 | { 39 | video.attr('loop','loop'); 40 | } 41 | } 42 | 43 | // pause prev video 44 | if(base.$prevSlide) 45 | { 46 | base.pauseVideo(base.$prevSlide); 47 | } 48 | } 49 | 50 | /** 51 | * Function: pauseVideo 52 | */ 53 | base.pauseVideo = function(slide) 54 | { 55 | // html 5 video 56 | var video = slide.children('video'); 57 | 58 | if(video[0]) 59 | { 60 | setTimeout(function() { 61 | video[0].pause(); 62 | }, opt.animationSpeed); 63 | } 64 | 65 | // vimeo and youtube 66 | var iframe = slide.children('iframe'); 67 | 68 | if(iframe[0]) 69 | { 70 | setTimeout(function() { 71 | var src = iframe.attr('src'); 72 | 73 | iframe.attr('src',''); 74 | iframe.attr('src',src); 75 | }, opt.animationSpeed); 76 | } 77 | } 78 | 79 | /** 80 | * Function: setVideoCentered 81 | */ 82 | base.setVideoCentered = function(currentSlide) 83 | { 84 | var domVideo = currentSlide[0]; 85 | var attr = currentSlide.attr('centered'); 86 | 87 | if (typeof attr === typeof undefined || attr === false) 88 | { 89 | // show loading 90 | base.setLoading(base.$currentSlide,'show'); 91 | 92 | domVideo.onloadedmetadata = function() { 93 | var vidWidth = this.videoWidth; 94 | var vidHeight = this.videoHeight; 95 | 96 | var minusResize = base.sangarWidth - vidWidth; 97 | var percentMinus = (minusResize / vidWidth) * 100; 98 | var realHeight = vidHeight + (vidHeight * percentMinus / 100); 99 | realHeight = Math.round(realHeight); 100 | 101 | var margin = (realHeight - base.sangarHeight) / 2; 102 | margin = Math.round(margin); 103 | 104 | currentSlide 105 | .css('margin-top','-' + margin + 'px') 106 | .attr('realWidth',base.sangarWidth) 107 | .attr('realHeight',realHeight) 108 | .attr('centered','true'); 109 | 110 | // fadeOut loading 111 | base.setLoading(base.$currentSlide,'fadeOut'); 112 | }; 113 | } 114 | else 115 | { 116 | var vidWidth = parseInt(currentSlide.attr('realWidth')) 117 | var vidHeight = parseInt(currentSlide.attr('realHeight')); 118 | 119 | var minusResize = base.sangarWidth - vidWidth; 120 | 121 | if(minusResize < 0) minusResize * -1; 122 | 123 | var percentMinus = (minusResize / vidWidth) * 100; 124 | var realHeight = vidHeight + (vidHeight * percentMinus / 100); 125 | realHeight = Math.round(realHeight); 126 | 127 | var margin = (realHeight - base.sangarHeight) / 2; 128 | margin = Math.round(margin); 129 | 130 | currentSlide 131 | .css('margin-top','-' + margin + 'px') 132 | .attr('realWidth',base.sangarWidth) 133 | .attr('realHeight',realHeight); 134 | 135 | // force hide/fadeOut the loading element if it still there 136 | base.setLoading(base.$currentSlide,'fadeOut'); 137 | } 138 | } 139 | } 140 | })(jQuery); -------------------------------------------------------------------------------- /assets/themes/dark-big/dark-big.css: -------------------------------------------------------------------------------- 1 | /* DIRECTIONAL NAV 2 | ================================================== */ 3 | .sangar-slideshow-container > .dark-big div.sangar-slider-nav > span { 4 | width: 60px; 5 | height: 60px; 6 | } 7 | 8 | .sangar-slideshow-container > .dark-big div > span.sangar-arrow-right { 9 | background: url("images/right-arrow.png"); 10 | right: 0px; 11 | } 12 | 13 | .sangar-slideshow-container > .dark-big div > span.sangar-arrow-left { 14 | background: url("images/left-arrow.png"); 15 | left: 0px; 16 | } 17 | 18 | .sangar-slideshow-container > .dark-big div > span.sangar-arrow-down { 19 | background: url("images/down-arrow.png"); 20 | bottom: 0px; 21 | } 22 | 23 | .sangar-slideshow-container > .dark-big div > span.sangar-arrow-up { 24 | background: url("images/up-arrow.png"); 25 | top: 0px; 26 | } 27 | 28 | /* CONTENT BOX 29 | ================================================== */ 30 | .sangar-slideshow-container > .dark-big .sangar-content-wrapper .sangar-content .sangar-textbox { 31 | padding: 80px; 32 | } 33 | 34 | /* TIMER 35 | ================================================== */ 36 | .sangar-slideshow-container > .dark-big div.sangar-timer div.sangar-timer-mask { 37 | background-color: #FF5D35; 38 | } 39 | 40 | /* PAGINATION NAV 41 | ================================================== */ 42 | .sangar-slideshow-container > .dark-big .sangar-pagination-wrapper{ 43 | background: #111111; 44 | } 45 | 46 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-bullet > li { 47 | float: left; 48 | margin-left: 10px; 49 | cursor: pointer; 50 | color: #BBBBBB; 51 | width: 12px; 52 | height: 12px; 53 | overflow: hidden; 54 | padding: 0px; 55 | -webkit-border-radius: 90px; 56 | -moz-border-radius: 90px; 57 | border-radius: 90px; 58 | background-color: rgba(0, 0, 0, 0.5); 59 | border-width: 1px; 60 | border-style: solid; 61 | border-color: #000000; 62 | } 63 | 64 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-bullet > li.sangar-pagination-active { 65 | color: #616161; 66 | background: #000000; 67 | margin-left: auto; 68 | margin-right: auto; 69 | margin-left: 10px; 70 | } 71 | 72 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-bullet > li.sangar-bullet-number { 73 | padding: 8px 6px 5px 6px; 74 | border-radius: 0; 75 | font-size: 16px; 76 | color: #fff; 77 | border: 1px solid #2D2D2D; 78 | width: 18px; 79 | height: 18px; 80 | background: #4C4C4C; 81 | font-weight: bold; 82 | } 83 | 84 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-bullet > li.sangar-bullet-number.sangar-pagination-active { 85 | color: #4C4C4C; 86 | background: #D3D3D3; 87 | width: 18px; 88 | height: 18px; 89 | } 90 | 91 | /** 92 | * sangar-sangar-pagination-type-text 93 | */ 94 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-type-text.sangar-pagination-content-horizontal > li { 95 | padding: 23px 15px; 96 | font-weight: bold; 97 | text-align: center; 98 | color: #FFF; 99 | box-sizing: border-box; 100 | font-family: sans-serif; 101 | font-size: 16px; 102 | background-color: #111111; 103 | } 104 | 105 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-type-text.sangar-pagination-content-vertical > li { 106 | padding: 23px 15px; 107 | font-weight: bold; 108 | text-align: left; 109 | color: #FFF; 110 | box-sizing: border-box; 111 | font-family: sans-serif; 112 | font-size: 16px; 113 | background-color: #111111; 114 | } 115 | 116 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-type-text > li:hover { 117 | background-color: #000000; 118 | } 119 | 120 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-type-text > li.sangar-pagination-active { 121 | background-color: #FF5D35; 122 | } 123 | 124 | 125 | /** 126 | * sangar-pagination-type-image 127 | */ 128 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-type-image > li.sangar-pagination-active { 129 | background: none; 130 | } 131 | 132 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-type-image > li.sangar-pagination-active > div:before { 133 | border: 2px solid #CCCCCC; 134 | } 135 | 136 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-type-image > li:hover { 137 | background: none; 138 | } 139 | 140 | 141 | 142 | -------------------------------------------------------------------------------- /assets/themes/dark-big/images/down-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/dark-big/images/down-arrow.png -------------------------------------------------------------------------------- /assets/themes/dark-big/images/left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/dark-big/images/left-arrow.png -------------------------------------------------------------------------------- /assets/themes/dark-big/images/right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/dark-big/images/right-arrow.png -------------------------------------------------------------------------------- /assets/themes/dark-big/images/up-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/dark-big/images/up-arrow.png -------------------------------------------------------------------------------- /assets/themes/dark/dark.css: -------------------------------------------------------------------------------- 1 | /* DIRECTIONAL NAV 2 | ================================================== */ 3 | .sangar-slideshow-container > .dark div.sangar-slider-nav > span { 4 | width: 40px; 5 | height: 40px; 6 | } 7 | 8 | .sangar-slideshow-container > .dark div > span.sangar-arrow-right { 9 | background: url("images/right-arrow.png"); 10 | right: 0px; 11 | } 12 | 13 | .sangar-slideshow-container > .dark div > span.sangar-arrow-left { 14 | background: url("images/left-arrow.png"); 15 | left: 0px; 16 | } 17 | 18 | .sangar-slideshow-container > .dark div > span.sangar-arrow-down { 19 | background: url("images/down-arrow.png"); 20 | bottom: 0px; 21 | } 22 | 23 | .sangar-slideshow-container > .dark div > span.sangar-arrow-up { 24 | background: url("images/up-arrow.png"); 25 | top: 0px; 26 | } 27 | 28 | /* TIMER 29 | ================================================== */ 30 | .sangar-slideshow-container > .dark div.sangar-timer div.sangar-timer-mask { 31 | background-color: #FF5D35; 32 | } 33 | 34 | /* PAGINATION NAV 35 | ================================================== */ 36 | .sangar-slideshow-container > .dark .sangar-pagination-wrapper{ 37 | background: #111111; 38 | } 39 | 40 | .sangar-slideshow-container > .dark ul.sangar-pagination-bullet > li { 41 | float: left; 42 | margin-left: 10px; 43 | cursor: pointer; 44 | color: #BBBBBB; 45 | width: 12px; 46 | height: 12px; 47 | overflow: hidden; 48 | padding: 0px; 49 | -webkit-border-radius: 90px; 50 | -moz-border-radius: 90px; 51 | border-radius: 90px; 52 | background-color: rgba(0, 0, 0, 0.5); 53 | border-width: 1px; 54 | border-style: solid; 55 | border-color: #000000; 56 | } 57 | 58 | .sangar-slideshow-container > .dark ul.sangar-pagination-bullet > li.sangar-pagination-active { 59 | color: #616161; 60 | background: #000000; 61 | margin-left: auto; 62 | margin-right: auto; 63 | margin-left: 10px; 64 | } 65 | 66 | .sangar-slideshow-container > .dark ul.sangar-pagination-bullet > li.sangar-bullet-number { 67 | padding: 8px 6px 5px 6px; 68 | border-radius: 0; 69 | font-size: 16px; 70 | color: #fff; 71 | border: 1px solid #2D2D2D; 72 | width: 18px; 73 | height: 18px; 74 | background: #4C4C4C; 75 | font-weight: bold; 76 | } 77 | 78 | .sangar-slideshow-container > .dark ul.sangar-pagination-bullet > li.sangar-bullet-number.sangar-pagination-active { 79 | color: #4C4C4C; 80 | background: #D3D3D3; 81 | width: 18px; 82 | height: 18px; 83 | } 84 | 85 | /** 86 | * sangar-sangar-pagination-type-text 87 | */ 88 | .sangar-slideshow-container > .dark ul.sangar-pagination-type-text.sangar-pagination-content-horizontal > li { 89 | padding: 23px 15px; 90 | font-weight: bold; 91 | text-align: center; 92 | color: #FFF; 93 | box-sizing: border-box; 94 | font-family: sans-serif; 95 | font-size: 16px; 96 | background-color: #111111; 97 | } 98 | 99 | .sangar-slideshow-container > .dark ul.sangar-pagination-type-text.sangar-pagination-content-vertical > li { 100 | padding: 23px 15px; 101 | font-weight: bold; 102 | text-align: left; 103 | color: #FFF; 104 | box-sizing: border-box; 105 | font-family: sans-serif; 106 | font-size: 16px; 107 | background-color: #111111; 108 | } 109 | 110 | .sangar-slideshow-container > .dark ul.sangar-pagination-type-text > li:hover { 111 | background-color: #000000; 112 | } 113 | 114 | .sangar-slideshow-container > .dark ul.sangar-pagination-type-text > li.sangar-pagination-active { 115 | background-color: #FF5D35; 116 | } 117 | 118 | 119 | /** 120 | * sangar-pagination-type-image 121 | */ 122 | .sangar-slideshow-container > .dark ul.sangar-pagination-type-image > li.sangar-pagination-active { 123 | background: none; 124 | } 125 | 126 | .sangar-slideshow-container > .dark ul.sangar-pagination-type-image > li.sangar-pagination-active > div:before { 127 | border: 2px solid #CCCCCC; 128 | } 129 | 130 | .sangar-slideshow-container > .dark ul.sangar-pagination-type-image > li:hover { 131 | background: none; 132 | } 133 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /assets/themes/dark/images/down-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/dark/images/down-arrow.png -------------------------------------------------------------------------------- /assets/themes/dark/images/left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/dark/images/left-arrow.png -------------------------------------------------------------------------------- /assets/themes/dark/images/right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/dark/images/right-arrow.png -------------------------------------------------------------------------------- /assets/themes/dark/images/up-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/dark/images/up-arrow.png -------------------------------------------------------------------------------- /assets/themes/default-big/default-big.css: -------------------------------------------------------------------------------- 1 | /* DIRECTIONAL NAV 2 | ================================================== */ 3 | .sangar-slideshow-container > .default-big div.sangar-slider-nav > span { 4 | width: 60px; 5 | height: 60px; 6 | } 7 | 8 | .sangar-slideshow-container > .default-big div > span.sangar-arrow-right { 9 | background: url("images/right-arrow.png"); 10 | right: 0px; 11 | } 12 | 13 | .sangar-slideshow-container > .default-big div > span.sangar-arrow-left { 14 | background: url("images/left-arrow.png"); 15 | left: 0px; 16 | } 17 | 18 | .sangar-slideshow-container > .default-big div > span.sangar-arrow-down { 19 | background: url("images/down-arrow.png"); 20 | bottom: 0px; 21 | } 22 | 23 | .sangar-slideshow-container > .default-big div > span.sangar-arrow-up { 24 | background: url("images/up-arrow.png"); 25 | top: 0px; 26 | } 27 | 28 | /* CONTENT BOX 29 | ================================================== */ 30 | .sangar-slideshow-container > .default-big .sangar-content-wrapper .sangar-content .sangar-textbox { 31 | padding: 80px; 32 | } 33 | 34 | /* TIMER 35 | ================================================== */ 36 | .sangar-slideshow-container > .default-big div.sangar-timer div.sangar-timer-mask { 37 | background-color: #00C1EF; 38 | } 39 | 40 | /* PAGINATION NAV 41 | ================================================== */ 42 | .sangar-slideshow-container > .default-big .sangar-pagination-wrapper{ 43 | background: #111111; 44 | } 45 | 46 | .sangar-slideshow-container > .default-big ul.sangar-pagination-bullet > li { 47 | float: left; 48 | margin-left: 10px; 49 | cursor: pointer; 50 | color: #BBBBBB; 51 | width: 12px; 52 | height: 12px; 53 | overflow: hidden; 54 | padding: 0px; 55 | -webkit-border-radius: 90px; 56 | -moz-border-radius: 90px; 57 | border-radius: 90px; 58 | background-color: rgba(255, 255, 255, 0.5); 59 | border-width: 3px; 60 | border-style: solid; 61 | border-color: transparent; 62 | background-clip: content-box; 63 | } 64 | 65 | .sangar-slideshow-container > .default-big ul.sangar-pagination-bullet > li.sangar-pagination-active { 66 | color: #616161; 67 | background: none; 68 | margin-left: auto; 69 | margin-right: auto; 70 | margin-left: 10px; 71 | border-color: #FFFFFF; 72 | } 73 | 74 | .sangar-slideshow-container > .default-big ul.sangar-pagination-bullet > li.sangar-bullet-number { 75 | padding: 8px 6px 5px 6px; 76 | border-radius: 0; 77 | font-size: 16px; 78 | color: #fff; 79 | border: 1px solid #2D2D2D; 80 | width: 18px; 81 | height: 18px; 82 | background: #4C4C4C; 83 | font-weight: bold; 84 | } 85 | 86 | .sangar-slideshow-container > .default-big ul.sangar-pagination-bullet > li.sangar-bullet-number.sangar-pagination-active { 87 | color: #4C4C4C; 88 | background: #D3D3D3; 89 | width: 18px; 90 | height: 18px; 91 | } 92 | 93 | /** 94 | * sangar-sangar-pagination-type-text 95 | */ 96 | .sangar-slideshow-container > .default-big ul.sangar-pagination-type-text.sangar-pagination-content-horizontal > li { 97 | padding: 23px 15px; 98 | font-weight: bold; 99 | text-align: center; 100 | color: #FFF; 101 | box-sizing: border-box; 102 | font-family: sans-serif; 103 | font-size: 16px; 104 | background-color: #111111; 105 | } 106 | 107 | .sangar-slideshow-container > .default-big ul.sangar-pagination-type-text.sangar-pagination-content-vertical > li { 108 | padding: 23px 15px; 109 | font-weight: bold; 110 | text-align: left; 111 | color: #FFF; 112 | box-sizing: border-box; 113 | font-family: sans-serif; 114 | font-size: 16px; 115 | background-color: #111111; 116 | } 117 | 118 | .sangar-slideshow-container > .default-big ul.sangar-pagination-type-text > li:hover { 119 | background-color: #000000; 120 | } 121 | 122 | .sangar-slideshow-container > .default-big ul.sangar-pagination-type-text > li.sangar-pagination-active { 123 | background-color: #00AFEA; 124 | } 125 | 126 | 127 | /** 128 | * sangar-pagination-type-image 129 | */ 130 | .sangar-slideshow-container > .default-big ul.sangar-pagination-type-image > li.sangar-pagination-active { 131 | background: none; 132 | } 133 | 134 | .sangar-slideshow-container > .default-big ul.sangar-pagination-type-image > li.sangar-pagination-active > div:before { 135 | border: 2px solid #CCCCCC; 136 | } 137 | 138 | .sangar-slideshow-container > .default-big ul.sangar-pagination-type-image > li:hover { 139 | background: none; 140 | } 141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /assets/themes/default-big/images/down-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/default-big/images/down-arrow.png -------------------------------------------------------------------------------- /assets/themes/default-big/images/left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/default-big/images/left-arrow.png -------------------------------------------------------------------------------- /assets/themes/default-big/images/right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/default-big/images/right-arrow.png -------------------------------------------------------------------------------- /assets/themes/default-big/images/up-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/default-big/images/up-arrow.png -------------------------------------------------------------------------------- /assets/themes/default/default.css: -------------------------------------------------------------------------------- 1 | /* DIRECTIONAL NAV 2 | ================================================== */ 3 | .sangar-slideshow-container > .default div.sangar-slider-nav > span { 4 | width: 40px; 5 | height: 40px; 6 | } 7 | 8 | .sangar-slideshow-container > .default div > span.sangar-arrow-right { 9 | background: url("images/right-arrow.png"); 10 | right: 0px; 11 | } 12 | 13 | .sangar-slideshow-container > .default div > span.sangar-arrow-left { 14 | background: url("images/left-arrow.png"); 15 | left: 0px; 16 | } 17 | 18 | .sangar-slideshow-container > .default div > span.sangar-arrow-down { 19 | background: url("images/down-arrow.png"); 20 | bottom: 0px; 21 | } 22 | 23 | .sangar-slideshow-container > .default div > span.sangar-arrow-up { 24 | background: url("images/up-arrow.png"); 25 | top: 0px; 26 | } 27 | 28 | /* TIMER 29 | ================================================== */ 30 | .sangar-slideshow-container > .default div.sangar-timer div.sangar-timer-mask { 31 | background-color: #00C1EF; 32 | } 33 | 34 | /* PAGINATION NAV 35 | ================================================== */ 36 | .sangar-slideshow-container > .default .sangar-pagination-wrapper{ 37 | background: #111111; 38 | } 39 | 40 | .sangar-slideshow-container > .default ul.sangar-pagination-bullet > li { 41 | float: left; 42 | margin-left: 10px; 43 | cursor: pointer; 44 | color: #BBBBBB; 45 | width: 12px; 46 | height: 12px; 47 | overflow: hidden; 48 | padding: 0px; 49 | -webkit-border-radius: 90px; 50 | -moz-border-radius: 90px; 51 | border-radius: 90px; 52 | background-color: rgba(255, 255, 255, 0.5); 53 | border-width: 3px; 54 | border-style: solid; 55 | border-color: transparent; 56 | background-clip: content-box; 57 | } 58 | 59 | .sangar-slideshow-container > .default ul.sangar-pagination-bullet > li.sangar-pagination-active { 60 | color: #616161; 61 | background: none; 62 | margin-left: auto; 63 | margin-right: auto; 64 | margin-left: 10px; 65 | border-color: #FFFFFF; 66 | } 67 | 68 | .sangar-slideshow-container > .default ul.sangar-pagination-bullet > li.sangar-bullet-number { 69 | padding: 8px 6px 5px 6px; 70 | border-radius: 0; 71 | font-size: 16px; 72 | color: #fff; 73 | border: 1px solid #2D2D2D; 74 | width: 18px; 75 | height: 18px; 76 | background: #4C4C4C; 77 | font-weight: bold; 78 | } 79 | 80 | .sangar-slideshow-container > .default ul.sangar-pagination-bullet > li.sangar-bullet-number.sangar-pagination-active { 81 | color: #4C4C4C; 82 | background: #D3D3D3; 83 | width: 18px; 84 | height: 18px; 85 | } 86 | 87 | /** 88 | * sangar-sangar-pagination-type-text 89 | */ 90 | .sangar-slideshow-container > .default ul.sangar-pagination-type-text.sangar-pagination-content-horizontal > li { 91 | padding: 23px 15px; 92 | font-weight: bold; 93 | text-align: center; 94 | color: #FFF; 95 | box-sizing: border-box; 96 | font-family: sans-serif; 97 | font-size: 16px; 98 | background-color: #111111; 99 | } 100 | 101 | .sangar-slideshow-container > .default ul.sangar-pagination-type-text.sangar-pagination-content-vertical > li { 102 | padding: 23px 15px; 103 | font-weight: bold; 104 | text-align: left; 105 | color: #FFF; 106 | box-sizing: border-box; 107 | font-family: sans-serif; 108 | font-size: 16px; 109 | background-color: #111111; 110 | } 111 | 112 | .sangar-slideshow-container > .default ul.sangar-pagination-type-text > li:hover { 113 | background-color: #000000; 114 | } 115 | 116 | .sangar-slideshow-container > .default ul.sangar-pagination-type-text > li.sangar-pagination-active { 117 | background-color: #00AFEA; 118 | } 119 | 120 | 121 | /** 122 | * sangar-pagination-type-image 123 | */ 124 | .sangar-slideshow-container > .default ul.sangar-pagination-type-image > li.sangar-pagination-active { 125 | background: none; 126 | } 127 | 128 | .sangar-slideshow-container > .default ul.sangar-pagination-type-image > li.sangar-pagination-active > div:before { 129 | border: 2px solid #CCCCCC; 130 | } 131 | 132 | .sangar-slideshow-container > .default ul.sangar-pagination-type-image > li:hover { 133 | background: none; 134 | } 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /assets/themes/default/images/down-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/default/images/down-arrow.png -------------------------------------------------------------------------------- /assets/themes/default/images/left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/default/images/left-arrow.png -------------------------------------------------------------------------------- /assets/themes/default/images/right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/default/images/right-arrow.png -------------------------------------------------------------------------------- /assets/themes/default/images/up-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/default/images/up-arrow.png -------------------------------------------------------------------------------- /assets/themes/light-big/images/down-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/light-big/images/down-arrow.png -------------------------------------------------------------------------------- /assets/themes/light-big/images/left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/light-big/images/left-arrow.png -------------------------------------------------------------------------------- /assets/themes/light-big/images/right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/light-big/images/right-arrow.png -------------------------------------------------------------------------------- /assets/themes/light-big/images/up-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/light-big/images/up-arrow.png -------------------------------------------------------------------------------- /assets/themes/light-big/light-big.css: -------------------------------------------------------------------------------- 1 | /* DIRECTIONAL NAV 2 | ================================================== */ 3 | .sangar-slideshow-container > .light-big div.sangar-slider-nav > span { 4 | width: 60px; 5 | height: 60px; 6 | } 7 | 8 | .sangar-slideshow-container > .light-big div > span.sangar-arrow-right { 9 | background: url("images/right-arrow.png"); 10 | right: 0px; 11 | } 12 | 13 | .sangar-slideshow-container > .light-big div > span.sangar-arrow-left { 14 | background: url("images/left-arrow.png"); 15 | left: 0px; 16 | } 17 | 18 | .sangar-slideshow-container > .light-big div > span.sangar-arrow-down { 19 | background: url("images/down-arrow.png"); 20 | bottom: 0px; 21 | } 22 | 23 | .sangar-slideshow-container > .light-big div > span.sangar-arrow-up { 24 | background: url("images/up-arrow.png"); 25 | top: 0px; 26 | } 27 | 28 | /* CONTENT BOX 29 | ================================================== */ 30 | .sangar-slideshow-container > .light-big .sangar-content-wrapper .sangar-content .sangar-textbox { 31 | padding: 80px; 32 | } 33 | 34 | /* TIMER 35 | ================================================== */ 36 | .sangar-slideshow-container > .light-big div.sangar-timer div.sangar-timer-mask { 37 | background-color: #F5F5F5; 38 | } 39 | 40 | /* PAGINATION NAV 41 | ================================================== */ 42 | .sangar-slideshow-container > .light-big .sangar-pagination-wrapper{ 43 | background: #EDEDED; 44 | } 45 | 46 | .sangar-slideshow-container > .light-big ul.sangar-pagination-bullet > li { 47 | float: left; 48 | margin-left: 10px; 49 | cursor: pointer; 50 | color: #BBBBBB; 51 | width: 12px; 52 | height: 12px; 53 | overflow: hidden; 54 | padding: 0px; 55 | -webkit-border-radius: 90px; 56 | -moz-border-radius: 90px; 57 | border-radius: 90px; 58 | background-color: rgba(255, 255, 255, 0.5); 59 | border-width: 1px; 60 | border-style: solid; 61 | border-color: transparent; 62 | } 63 | 64 | .sangar-slideshow-container > .light-big ul.sangar-pagination-bullet > li.sangar-pagination-active { 65 | color: #616161; 66 | background: #ffffff; 67 | margin-left: auto; 68 | margin-right: auto; 69 | margin-left: 10px; 70 | border-color: #FFFFFF; 71 | } 72 | 73 | .sangar-slideshow-container > .light-big ul.sangar-pagination-bullet > li.sangar-bullet-number { 74 | padding: 8px 6px 5px 6px; 75 | border-radius: 0; 76 | font-size: 16px; 77 | color: #fff; 78 | border: 1px solid #2D2D2D; 79 | width: 18px; 80 | height: 18px; 81 | background: #4C4C4C; 82 | font-weight: bold; 83 | } 84 | 85 | .sangar-slideshow-container > .light-big ul.sangar-pagination-bullet > li.sangar-bullet-number.sangar-pagination-active { 86 | color: #4C4C4C; 87 | background: #D3D3D3; 88 | width: 18px; 89 | height: 18px; 90 | } 91 | 92 | /** 93 | * sangar-sangar-pagination-type-text 94 | */ 95 | .sangar-slideshow-container > .light-big ul.sangar-pagination-type-text.sangar-pagination-content-horizontal > li { 96 | padding: 23px 15px; 97 | font-weight: bold; 98 | text-align: center; 99 | color: #111111; 100 | box-sizing: border-box; 101 | font-family: sans-serif; 102 | font-size: 16px; 103 | background-color: #F4F4F4; 104 | border-left: 1px solid #EBEBEB; 105 | } 106 | 107 | .sangar-slideshow-container > .light-big ul.sangar-pagination-type-text.sangar-pagination-content-vertical > li { 108 | padding: 23px 15px; 109 | font-weight: bold; 110 | text-align: left; 111 | color: #111111; 112 | box-sizing: border-box; 113 | font-family: sans-serif; 114 | font-size: 16px; 115 | background-color: #F4F4F4; 116 | border-top: 1px solid #EBEBEB; 117 | } 118 | 119 | .sangar-slideshow-container > .light-big ul.sangar-pagination-type-text > li:hover { 120 | background-color: #FFFFFF; 121 | } 122 | 123 | .sangar-slideshow-container > .light-big ul.sangar-pagination-type-text > li.sangar-pagination-active { 124 | background-color: #DCDCDC; 125 | } 126 | 127 | /** 128 | * sangar-pagination-type-image 129 | */ 130 | .sangar-slideshow-container > .light-big ul.sangar-pagination-type-image > li.sangar-pagination-active { 131 | background: none; 132 | } 133 | 134 | .sangar-slideshow-container > .light-big ul.sangar-pagination-type-image > li.sangar-pagination-active > div:before { 135 | border: none; 136 | } 137 | 138 | .sangar-slideshow-container > .light-big ul.sangar-pagination-type-image > li:hover { 139 | background: none; 140 | } 141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /assets/themes/light/images/down-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/light/images/down-arrow.png -------------------------------------------------------------------------------- /assets/themes/light/images/left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/light/images/left-arrow.png -------------------------------------------------------------------------------- /assets/themes/light/images/right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/light/images/right-arrow.png -------------------------------------------------------------------------------- /assets/themes/light/images/up-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/assets/themes/light/images/up-arrow.png -------------------------------------------------------------------------------- /assets/themes/light/light.css: -------------------------------------------------------------------------------- 1 | /* DIRECTIONAL NAV 2 | ================================================== */ 3 | .sangar-slideshow-container > .light div.sangar-slider-nav > span { 4 | width: 40px; 5 | height: 40px; 6 | } 7 | 8 | .sangar-slideshow-container > .light div > span.sangar-arrow-right { 9 | background: url("images/right-arrow.png"); 10 | right: 0px; 11 | } 12 | 13 | .sangar-slideshow-container > .light div > span.sangar-arrow-left { 14 | background: url("images/left-arrow.png"); 15 | left: 0px; 16 | } 17 | 18 | .sangar-slideshow-container > .light div > span.sangar-arrow-down { 19 | background: url("images/down-arrow.png"); 20 | bottom: 0px; 21 | } 22 | 23 | .sangar-slideshow-container > .light div > span.sangar-arrow-up { 24 | background: url("images/up-arrow.png"); 25 | top: 0px; 26 | } 27 | 28 | /* TIMER 29 | ================================================== */ 30 | .sangar-slideshow-container > .light div.sangar-timer div.sangar-timer-mask { 31 | background-color: #F5F5F5; 32 | } 33 | 34 | /* PAGINATION NAV 35 | ================================================== */ 36 | .sangar-slideshow-container > .light .sangar-pagination-wrapper{ 37 | background: #EDEDED; 38 | } 39 | 40 | .sangar-slideshow-container > .light ul.sangar-pagination-bullet > li { 41 | float: left; 42 | margin-left: 10px; 43 | cursor: pointer; 44 | color: #BBBBBB; 45 | width: 12px; 46 | height: 12px; 47 | overflow: hidden; 48 | padding: 0px; 49 | -webkit-border-radius: 90px; 50 | -moz-border-radius: 90px; 51 | border-radius: 90px; 52 | background-color: rgba(255, 255, 255, 0.5); 53 | border-width: 1px; 54 | border-style: solid; 55 | border-color: transparent; 56 | } 57 | 58 | .sangar-slideshow-container > .light ul.sangar-pagination-bullet > li.sangar-pagination-active { 59 | color: #616161; 60 | background: #ffffff; 61 | margin-left: auto; 62 | margin-right: auto; 63 | margin-left: 10px; 64 | border-color: #FFFFFF; 65 | } 66 | 67 | .sangar-slideshow-container > .light ul.sangar-pagination-bullet > li.sangar-bullet-number { 68 | padding: 8px 6px 5px 6px; 69 | border-radius: 0; 70 | font-size: 16px; 71 | color: #fff; 72 | border: 1px solid #2D2D2D; 73 | width: 18px; 74 | height: 18px; 75 | background: #4C4C4C; 76 | font-weight: bold; 77 | } 78 | 79 | .sangar-slideshow-container > .light ul.sangar-pagination-bullet > li.sangar-bullet-number.sangar-pagination-active { 80 | color: #4C4C4C; 81 | background: #D3D3D3; 82 | width: 18px; 83 | height: 18px; 84 | } 85 | 86 | /** 87 | * sangar-sangar-pagination-type-text 88 | */ 89 | .sangar-slideshow-container > .light ul.sangar-pagination-type-text.sangar-pagination-content-horizontal > li { 90 | padding: 23px 15px; 91 | font-weight: bold; 92 | text-align: center; 93 | color: #333333; 94 | box-sizing: border-box; 95 | font-family: sans-serif; 96 | font-size: 16px; 97 | background-color: #F4F4F4; 98 | border-left: 1px solid #EBEBEB; 99 | } 100 | 101 | .sangar-slideshow-container > .light ul.sangar-pagination-type-text.sangar-pagination-content-vertical > li { 102 | padding: 23px 15px; 103 | font-weight: bold; 104 | text-align: left; 105 | color: #333333; 106 | box-sizing: border-box; 107 | font-family: sans-serif; 108 | font-size: 16px; 109 | background-color: #F4F4F4; 110 | border-top: 1px solid #EBEBEB; 111 | } 112 | 113 | .sangar-slideshow-container > .light ul.sangar-pagination-type-text > li:hover { 114 | background-color: #FFFFFF; 115 | } 116 | 117 | .sangar-slideshow-container > .light ul.sangar-pagination-type-text > li.sangar-pagination-active { 118 | background-color: #DCDCDC; 119 | } 120 | 121 | /** 122 | * sangar-pagination-type-image 123 | */ 124 | .sangar-slideshow-container > .light ul.sangar-pagination-type-image > li.sangar-pagination-active { 125 | background: none; 126 | } 127 | 128 | .sangar-slideshow-container > .light ul.sangar-pagination-type-image > li.sangar-pagination-active > div:before { 129 | border: none; 130 | } 131 | 132 | .sangar-slideshow-container > .light ul.sangar-pagination-type-image > li:hover { 133 | background: none; 134 | } 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sangar-slider", 3 | "version": "1.0.1", 4 | "authors": [ 5 | "Haris Ainur Rozak ", 6 | "Todi Adiyatmo " 7 | ], 8 | "description": "jQuery Slider, Sangar Slider", 9 | "main": "dist/js/sangarSlider.js", 10 | "keywords": [ 11 | "jQuery Sangar Slider", 12 | "jQuery Slider", 13 | "jQuery Slideshow", 14 | "Slider", 15 | "Slideshow" 16 | ], 17 | "license": "GPLv2 and Tonjoo License", 18 | "homepage": "https://www.tonjoo.com", 19 | "repository": { 20 | "type": "git", 21 | "url": "git@github.com:tonjoo/jQuery-Sangar-Slider.git" 22 | }, 23 | "ignore": [ 24 | "**/.*", 25 | "assets", 26 | "demo", 27 | "node_modules", 28 | "bower_components", 29 | "test", 30 | "tests" 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /demo/images/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/demo/images/background.png -------------------------------------------------------------------------------- /demo/images/slide-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/demo/images/slide-1.jpg -------------------------------------------------------------------------------- /demo/images/slide-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/demo/images/slide-2.jpg -------------------------------------------------------------------------------- /demo/images/slide-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/demo/images/slide-3.jpg -------------------------------------------------------------------------------- /demo/images/slide-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/demo/images/slide-4.jpg -------------------------------------------------------------------------------- /demo/images/slide-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/demo/images/slide-5.jpg -------------------------------------------------------------------------------- /demo/images/thumb/thumb-slide-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/demo/images/thumb/thumb-slide-1.jpg -------------------------------------------------------------------------------- /demo/images/thumb/thumb-slide-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/demo/images/thumb/thumb-slide-2.jpg -------------------------------------------------------------------------------- /demo/images/thumb/thumb-slide-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/demo/images/thumb/thumb-slide-3.jpg -------------------------------------------------------------------------------- /demo/images/thumb/thumb-slide-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/demo/images/thumb/thumb-slide-4.jpg -------------------------------------------------------------------------------- /demo/images/thumb/thumb-slide-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/demo/images/thumb/thumb-slide-5.jpg -------------------------------------------------------------------------------- /demo/sample-api-button.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sangar Slider 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 64 | 65 | 66 |
67 |

Sangar Slider Example

68 | Documentation | 69 | Standart Slideshow | 70 | Text Pagination | 71 | Text Pagination Vertical | 72 | Image Pagination | 73 | Carousel | 74 | Sample Video Background | 75 | Sample Textbox | 76 | Slideshow with API button 77 |
78 | 79 |
80 | Arrow: 81 | Preview 82 | Next 83 |
84 | 85 |
86 | 94 |
95 | 96 |
97 |
98 | 99 |
100 | 101 |
102 | 103 |
104 |
105 |
106 | 107 | -------------------------------------------------------------------------------- /demo/sample-carousel.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sangar Slider 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 52 | 53 | 54 |
55 |

Sangar Slider Example

56 | Documentation | 57 | Standart Slideshow | 58 | Text Pagination | 59 | Text Pagination Vertical | 60 | Image Pagination | 61 | Carousel | 62 | Sample Video Background | 63 | Sample Textbox | 64 | Slideshow with API button 65 |
66 | 67 |
68 |
69 | 70 | 71 |
72 |
73 | 74 | 75 |
76 |
77 |
78 |
79 |
80 | 81 | -------------------------------------------------------------------------------- /demo/sample-image-pagination.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sangar Slider 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 57 | 58 | 59 |
60 |

Sangar Slider Example

61 | Documentation | 62 | Standart Slideshow | 63 | Text Pagination | 64 | Text Pagination Vertical | 65 | Image Pagination | 66 | Carousel | 67 | Sample Video Background | 68 | Sample Textbox | 69 | Slideshow with API button 70 |
71 | 72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 | 80 |
81 | 82 | -------------------------------------------------------------------------------- /demo/sample-standart-pagination-fade.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sangar Slider 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 46 | 47 | 48 |
49 |

Sangar Slider Example

50 | Documentation | 51 | Standart Slideshow | 52 | Text Pagination | 53 | Text Pagination Vertical | 54 | Image Pagination | 55 | Carousel | 56 | Sample Video Background | 57 | Sample Textbox | 58 | Slideshow with API button 59 |
60 | 61 |
62 | Animation: 63 | Horizontal | 64 | Vertical | 65 | Fade | 66 | Number Pagination 67 |
68 | 69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 | 77 | -------------------------------------------------------------------------------- /demo/sample-standart-pagination-vertical.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sangar Slider 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 51 | 52 | 53 |
54 |

Sangar Slider Example

55 | Documentation | 56 | Standart Slideshow | 57 | Text Pagination | 58 | Text Pagination Vertical | 59 | Image Pagination | 60 | Carousel | 61 | Sample Video Background | 62 | Sample Textbox | 63 | Slideshow with API button 64 |
65 | 66 |
67 | Animation: 68 | Horizontal | 69 | Vertical | 70 | Fade | 71 | Number Pagination 72 |
73 | 74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 | 82 | -------------------------------------------------------------------------------- /demo/sample-standart-pagination-with-number.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sangar Slider 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 45 | 46 | 47 |
48 |

Sangar Slider Example

49 | Documentation | 50 | Standart Slideshow | 51 | Text Pagination | 52 | Text Pagination Vertical | 53 | Image Pagination | 54 | Carousel | 55 | Sample Video Background | 56 | Sample Textbox | 57 | Slideshow with API button 58 |
59 | 60 |
61 | Animation: 62 | Horizontal | 63 | Vertical | 64 | Fade | 65 | Number Pagination 66 |
67 | 68 |
69 |
70 | 71 | 72 |
73 |
74 | 75 | 76 |
77 |
78 |
79 |
80 |
81 | 82 |
83 | 84 | -------------------------------------------------------------------------------- /demo/sample-standart-pagination.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sangar Slider 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 55 | 56 | 61 | 62 | 63 |
64 |

Sangar Slider Example

65 | Documentation | 66 | Standart Slideshow | 67 | Text Pagination | 68 | Text Pagination Vertical | 69 | Image Pagination | 70 | Carousel | 71 | Sample Video Background | 72 | Sample Textbox | 73 | Slideshow with API button 74 |
75 | 76 |
77 | Animation: 78 | Horizontal | 79 | Vertical | 80 | Fade | 81 | Number Pagination 82 |
83 | 84 |
85 |
86 | 87 |
88 |
89 | 90 |
91 |
92 |
93 |
94 |
95 | 96 |
97 | 98 | -------------------------------------------------------------------------------- /demo/sample-text-pagination-vertical.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sangar Slider 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 54 | 55 | 56 |
57 |

Sangar Slider Example

58 | Documentation | 59 | Standart Slideshow | 60 | Text Pagination | 61 | Text Pagination Vertical | 62 | Image Pagination | 63 | Carousel | 64 | Sample Video Background | 65 | Sample Textbox | 66 | Slideshow with API button 67 |
68 | 69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 | 82 |
Testing container
83 | 84 | -------------------------------------------------------------------------------- /demo/sample-text-pagination.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sangar Slider 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 54 | 55 | 56 |
57 |

Sangar Slider Example

58 | Documentation | 59 | Standart Slideshow | 60 | Text Pagination | 61 | Text Pagination Vertical | 62 | Image Pagination | 63 | Carousel | 64 | Sample Video Background | 65 | Sample Textbox | 66 | Slideshow with API button 67 |
68 | 69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 | 77 |
78 | 79 | -------------------------------------------------------------------------------- /demo/sample-textbox-outside.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sangar Slider 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 48 | 49 | 74 | 75 | 76 |
77 |

Sangar Slider Example

78 | Documentation | 79 | Standart Slideshow | 80 | Text Pagination | 81 | Text Pagination Vertical | 82 | Image Pagination | 83 | Carousel | 84 | Sample Video Background | 85 | Sample Textbox | 86 | Slideshow with API button 87 |
88 | 89 |
90 | Textbox Type: 91 | Inside | 92 | Outside 93 |
94 | 95 |
96 |
97 | 98 | 99 | 100 |
101 |
102 |
103 |
104 |

Title

105 |
106 |
107 |

Lorem Ipsum Dolor Sit Amet

108 |
109 |
110 |
111 |
112 | 113 | 114 | 115 |
116 |
117 |
118 |
119 |

Title

120 |
121 |
122 |

Slide with button is here

123 |
124 |
125 | [button] 126 |
127 |
128 |
129 |
130 | 131 | 132 |
133 |
134 |
135 |
136 |

Sticky Bottom

137 |
138 |
139 |

Slide with button is here

140 |
141 |
142 | [button] 143 |
144 |
145 |
146 |
147 | 148 | 149 |
150 |
151 |
152 |
153 |

Sticky Top

154 |
155 |
156 |

Slide with button is here

157 |
158 |
159 | [button] 160 |
161 |
162 |
163 |
164 | 165 | 166 |
167 |
168 |
169 |
170 |

Center Text Box

171 |
172 |
173 |

Slide with button is here

174 |
175 |
176 |
177 |
178 | 179 |
180 | 181 | -------------------------------------------------------------------------------- /demo/sample-textbox.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sangar Slider 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 46 | 47 | 69 | 70 | 71 |
72 |

Sangar Slider Example

73 | Documentation | 74 | Standart Slideshow | 75 | Text Pagination | 76 | Text Pagination Vertical | 77 | Image Pagination | 78 | Carousel | 79 | Sample Video Background | 80 | Sample Textbox | 81 | Slideshow with API button 82 |
83 | 84 |
85 | Textbox Type: 86 | Inside | 87 | Outside 88 |
89 | 90 |
91 |
92 | 93 | 94 | 95 |
96 |
97 |
98 |
99 |

Title

100 |
101 |
102 |

Lorem Ipsum Dolor Sit Amet

103 |
104 |
105 |
106 |
107 | 108 | 109 | 110 |
111 |
112 |
113 |
114 |

Title

115 |
116 |
117 |

Slide with button is here

118 |
119 |
120 | [button] 121 |
122 |
123 |
124 |
125 | 126 | 127 |
128 |
129 |
130 |
131 |

Sticky Bottom

132 |
133 |
134 |

Slide with button is here

135 |
136 |
137 | [button] 138 |
139 |
140 |
141 |
142 | 143 | 144 |
145 |
146 |
147 |
148 |

Sticky Top

149 |
150 |
151 |

Slide with button is here

152 |
153 |
154 | [button] 155 |
156 |
157 |
158 |
159 | 160 | 161 |
162 |
163 |
164 |
165 |

Center Text Box

166 |
167 |
168 |

Slide with button is here

169 |
170 |
171 |
172 |
173 | 174 |
175 | 176 | -------------------------------------------------------------------------------- /demo/sample-video-all.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sangar Slider 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 53 | 54 | 55 |
56 |

Sangar Slider Example

57 | Documentation | 58 | Standart Slideshow | 59 | Text Pagination | 60 | Text Pagination Vertical | 61 | Image Pagination | 62 | Carousel | 63 | Sample Video Background | 64 | Sample Textbox | 65 | Slideshow with API button 66 |
67 | 68 |
69 | Type: 70 | HTML 5 Auto Next | 71 | Vimeo And YouTube | 72 | All Videos 73 |
74 | 75 |
76 |
77 |
78 | 82 |
83 |
84 | 85 |
86 |
87 | 88 |
89 |
90 | 91 |
Testing container
92 | 93 | -------------------------------------------------------------------------------- /demo/sample-video-html5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sangar Slider 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 52 | 53 | 54 |
55 |

Sangar Slider Example

56 | Documentation | 57 | Standart Slideshow | 58 | Text Pagination | 59 | Text Pagination Vertical | 60 | Image Pagination | 61 | Carousel | 62 | Sample Video Background | 63 | Sample Textbox | 64 | Slideshow with API button 65 |
66 | 67 |
68 | Type: 69 | HTML 5 Auto Next | 70 | Vimeo And YouTube | 71 | All Videos 72 |
73 | 74 |
75 |
76 | 80 | 81 |
82 |
83 | 87 | 88 |
89 |
90 | 94 |
95 |
96 | 97 |
Testing container
98 | 99 | -------------------------------------------------------------------------------- /demo/sample-video-vimeo-youtube.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Sangar Slider 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 52 | 53 | 54 |
55 |

Sangar Slider Example

56 | Documentation | 57 | Standart Slideshow | 58 | Text Pagination | 59 | Text Pagination Vertical | 60 | Image Pagination | 61 | Carousel | 62 | Sample Video Background | 63 | Sample Textbox | 64 | Slideshow with API button 65 |
66 | 67 |
68 | Type: 69 | HTML 5 Auto Next | 70 | Vimeo And YouTube | 71 | All Videos 72 |
73 | 74 |
75 |
76 | 77 |
78 |
79 | 80 |
81 |
82 | 83 |
84 |
85 | 86 |
Testing container
87 | 88 | -------------------------------------------------------------------------------- /dist/css/responsive.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Small Responsive class 3 | */ 4 | .sangar-slideshow-container .sangar-wrapper.sangar-responsive-mobile-small .sangar-caption .sangar-caption-text{ 5 | /* do small style here */ 6 | } 7 | 8 | 9 | /** 10 | * Medium Responsive class 11 | */ 12 | .sangar-slideshow-container .sangar-wrapper.sangar-responsive-mobile-medium{ 13 | /* do medium style here */ 14 | } -------------------------------------------------------------------------------- /dist/lib/imagesloaded.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * imagesLoaded PACKAGED v3.1.8 3 | * JavaScript is all like "You images are done yet or what?" 4 | * MIT License 5 | */ 6 | 7 | (function(){function e(){}function t(e,t){for(var n=e.length;n--;)if(e[n].listener===t)return n;return-1}function n(e){return function(){return this[e].apply(this,arguments)}}var i=e.prototype,r=this,o=r.EventEmitter;i.getListeners=function(e){var t,n,i=this._getEvents();if("object"==typeof e){t={};for(n in i)i.hasOwnProperty(n)&&e.test(n)&&(t[n]=i[n])}else t=i[e]||(i[e]=[]);return t},i.flattenListeners=function(e){var t,n=[];for(t=0;e.length>t;t+=1)n.push(e[t].listener);return n},i.getListenersAsObject=function(e){var t,n=this.getListeners(e);return n instanceof Array&&(t={},t[e]=n),t||n},i.addListener=function(e,n){var i,r=this.getListenersAsObject(e),o="object"==typeof n;for(i in r)r.hasOwnProperty(i)&&-1===t(r[i],n)&&r[i].push(o?n:{listener:n,once:!1});return this},i.on=n("addListener"),i.addOnceListener=function(e,t){return this.addListener(e,{listener:t,once:!0})},i.once=n("addOnceListener"),i.defineEvent=function(e){return this.getListeners(e),this},i.defineEvents=function(e){for(var t=0;e.length>t;t+=1)this.defineEvent(e[t]);return this},i.removeListener=function(e,n){var i,r,o=this.getListenersAsObject(e);for(r in o)o.hasOwnProperty(r)&&(i=t(o[r],n),-1!==i&&o[r].splice(i,1));return this},i.off=n("removeListener"),i.addListeners=function(e,t){return this.manipulateListeners(!1,e,t)},i.removeListeners=function(e,t){return this.manipulateListeners(!0,e,t)},i.manipulateListeners=function(e,t,n){var i,r,o=e?this.removeListener:this.addListener,s=e?this.removeListeners:this.addListeners;if("object"!=typeof t||t instanceof RegExp)for(i=n.length;i--;)o.call(this,t,n[i]);else for(i in t)t.hasOwnProperty(i)&&(r=t[i])&&("function"==typeof r?o.call(this,i,r):s.call(this,i,r));return this},i.removeEvent=function(e){var t,n=typeof e,i=this._getEvents();if("string"===n)delete i[e];else if("object"===n)for(t in i)i.hasOwnProperty(t)&&e.test(t)&&delete i[t];else delete this._events;return this},i.removeAllListeners=n("removeEvent"),i.emitEvent=function(e,t){var n,i,r,o,s=this.getListenersAsObject(e);for(r in s)if(s.hasOwnProperty(r))for(i=s[r].length;i--;)n=s[r][i],n.once===!0&&this.removeListener(e,n.listener),o=n.listener.apply(this,t||[]),o===this._getOnceReturnValue()&&this.removeListener(e,n.listener);return this},i.trigger=n("emitEvent"),i.emit=function(e){var t=Array.prototype.slice.call(arguments,1);return this.emitEvent(e,t)},i.setOnceReturnValue=function(e){return this._onceReturnValue=e,this},i._getOnceReturnValue=function(){return this.hasOwnProperty("_onceReturnValue")?this._onceReturnValue:!0},i._getEvents=function(){return this._events||(this._events={})},e.noConflict=function(){return r.EventEmitter=o,e},"function"==typeof define&&define.amd?define("eventEmitter/EventEmitter",[],function(){return e}):"object"==typeof module&&module.exports?module.exports=e:this.EventEmitter=e}).call(this),function(e){function t(t){var n=e.event;return n.target=n.target||n.srcElement||t,n}var n=document.documentElement,i=function(){};n.addEventListener?i=function(e,t,n){e.addEventListener(t,n,!1)}:n.attachEvent&&(i=function(e,n,i){e[n+i]=i.handleEvent?function(){var n=t(e);i.handleEvent.call(i,n)}:function(){var n=t(e);i.call(e,n)},e.attachEvent("on"+n,e[n+i])});var r=function(){};n.removeEventListener?r=function(e,t,n){e.removeEventListener(t,n,!1)}:n.detachEvent&&(r=function(e,t,n){e.detachEvent("on"+t,e[t+n]);try{delete e[t+n]}catch(i){e[t+n]=void 0}});var o={bind:i,unbind:r};"function"==typeof define&&define.amd?define("eventie/eventie",o):e.eventie=o}(this),function(e,t){"function"==typeof define&&define.amd?define(["eventEmitter/EventEmitter","eventie/eventie"],function(n,i){return t(e,n,i)}):"object"==typeof exports?module.exports=t(e,require("wolfy87-eventemitter"),require("eventie")):e.imagesLoaded=t(e,e.EventEmitter,e.eventie)}(window,function(e,t,n){function i(e,t){for(var n in t)e[n]=t[n];return e}function r(e){return"[object Array]"===d.call(e)}function o(e){var t=[];if(r(e))t=e;else if("number"==typeof e.length)for(var n=0,i=e.length;i>n;n++)t.push(e[n]);else t.push(e);return t}function s(e,t,n){if(!(this instanceof s))return new s(e,t);"string"==typeof e&&(e=document.querySelectorAll(e)),this.elements=o(e),this.options=i({},this.options),"function"==typeof t?n=t:i(this.options,t),n&&this.on("always",n),this.getImages(),a&&(this.jqDeferred=new a.Deferred);var r=this;setTimeout(function(){r.check()})}function f(e){this.img=e}function c(e){this.src=e,v[e]=this}var a=e.jQuery,u=e.console,h=u!==void 0,d=Object.prototype.toString;s.prototype=new t,s.prototype.options={},s.prototype.getImages=function(){this.images=[];for(var e=0,t=this.elements.length;t>e;e++){var n=this.elements[e];"IMG"===n.nodeName&&this.addImage(n);var i=n.nodeType;if(i&&(1===i||9===i||11===i))for(var r=n.querySelectorAll("img"),o=0,s=r.length;s>o;o++){var f=r[o];this.addImage(f)}}},s.prototype.addImage=function(e){var t=new f(e);this.images.push(t)},s.prototype.check=function(){function e(e,r){return t.options.debug&&h&&u.log("confirm",e,r),t.progress(e),n++,n===i&&t.complete(),!0}var t=this,n=0,i=this.images.length;if(this.hasAnyBroken=!1,!i)return this.complete(),void 0;for(var r=0;i>r;r++){var o=this.images[r];o.on("confirm",e),o.check()}},s.prototype.progress=function(e){this.hasAnyBroken=this.hasAnyBroken||!e.isLoaded;var t=this;setTimeout(function(){t.emit("progress",t,e),t.jqDeferred&&t.jqDeferred.notify&&t.jqDeferred.notify(t,e)})},s.prototype.complete=function(){var e=this.hasAnyBroken?"fail":"done";this.isComplete=!0;var t=this;setTimeout(function(){if(t.emit(e,t),t.emit("always",t),t.jqDeferred){var n=t.hasAnyBroken?"reject":"resolve";t.jqDeferred[n](t)}})},a&&(a.fn.imagesLoaded=function(e,t){var n=new s(this,e,t);return n.jqDeferred.promise(a(this))}),f.prototype=new t,f.prototype.check=function(){var e=v[this.img.src]||new c(this.img.src);if(e.isConfirmed)return this.confirm(e.isLoaded,"cached was confirmed"),void 0;if(this.img.complete&&void 0!==this.img.naturalWidth)return this.confirm(0!==this.img.naturalWidth,"naturalWidth"),void 0;var t=this;e.on("confirm",function(e,n){return t.confirm(e.isLoaded,n),!0}),e.check()},f.prototype.confirm=function(e,t){this.isLoaded=e,this.emit("confirm",this,t)};var v={};return c.prototype=new t,c.prototype.check=function(){if(!this.isChecked){var e=new Image;n.bind(e,"load",this),n.bind(e,"error",this),e.src=this.src,this.isChecked=!0}},c.prototype.handleEvent=function(e){var t="on"+e.type;this[t]&&this[t](e)},c.prototype.onload=function(e){this.confirm(!0,"onload"),this.unbindProxyEvents(e)},c.prototype.onerror=function(e){this.confirm(!1,"onerror"),this.unbindProxyEvents(e)},c.prototype.confirm=function(e,t){this.isConfirmed=!0,this.isLoaded=e,this.emit("confirm",this,t)},c.prototype.unbindProxyEvents=function(e){n.unbind(e.target,"load",this),n.unbind(e.target,"error",this)},s}); -------------------------------------------------------------------------------- /dist/themes/dark-big/dark-big.css: -------------------------------------------------------------------------------- 1 | /* DIRECTIONAL NAV 2 | ================================================== */ 3 | .sangar-slideshow-container > .dark-big div.sangar-slider-nav > span { 4 | width: 60px; 5 | height: 60px; 6 | } 7 | 8 | .sangar-slideshow-container > .dark-big div > span.sangar-arrow-right { 9 | background: url("images/right-arrow.png"); 10 | right: 0px; 11 | } 12 | 13 | .sangar-slideshow-container > .dark-big div > span.sangar-arrow-left { 14 | background: url("images/left-arrow.png"); 15 | left: 0px; 16 | } 17 | 18 | .sangar-slideshow-container > .dark-big div > span.sangar-arrow-down { 19 | background: url("images/down-arrow.png"); 20 | bottom: 0px; 21 | } 22 | 23 | .sangar-slideshow-container > .dark-big div > span.sangar-arrow-up { 24 | background: url("images/up-arrow.png"); 25 | top: 0px; 26 | } 27 | 28 | /* CONTENT BOX 29 | ================================================== */ 30 | .sangar-slideshow-container > .dark-big .sangar-content-wrapper .sangar-content .sangar-textbox { 31 | padding: 80px; 32 | } 33 | 34 | /* TIMER 35 | ================================================== */ 36 | .sangar-slideshow-container > .dark-big div.sangar-timer div.sangar-timer-mask { 37 | background-color: #FF5D35; 38 | } 39 | 40 | /* PAGINATION NAV 41 | ================================================== */ 42 | .sangar-slideshow-container > .dark-big .sangar-pagination-wrapper{ 43 | background: #111111; 44 | } 45 | 46 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-bullet > li { 47 | float: left; 48 | margin-left: 10px; 49 | cursor: pointer; 50 | color: #BBBBBB; 51 | width: 12px; 52 | height: 12px; 53 | overflow: hidden; 54 | padding: 0px; 55 | -webkit-border-radius: 90px; 56 | -moz-border-radius: 90px; 57 | border-radius: 90px; 58 | background-color: rgba(0, 0, 0, 0.5); 59 | border-width: 1px; 60 | border-style: solid; 61 | border-color: #000000; 62 | } 63 | 64 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-bullet > li.sangar-pagination-active { 65 | color: #616161; 66 | background: #000000; 67 | margin-left: auto; 68 | margin-right: auto; 69 | margin-left: 10px; 70 | } 71 | 72 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-bullet > li.sangar-bullet-number { 73 | padding: 8px 6px 5px 6px; 74 | border-radius: 0; 75 | font-size: 16px; 76 | color: #fff; 77 | border: 1px solid #2D2D2D; 78 | width: 18px; 79 | height: 18px; 80 | background: #4C4C4C; 81 | font-weight: bold; 82 | } 83 | 84 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-bullet > li.sangar-bullet-number.sangar-pagination-active { 85 | color: #4C4C4C; 86 | background: #D3D3D3; 87 | width: 18px; 88 | height: 18px; 89 | } 90 | 91 | /** 92 | * sangar-sangar-pagination-type-text 93 | */ 94 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-type-text.sangar-pagination-content-horizontal > li { 95 | padding: 23px 15px; 96 | font-weight: bold; 97 | text-align: center; 98 | color: #FFF; 99 | box-sizing: border-box; 100 | font-family: sans-serif; 101 | font-size: 16px; 102 | background-color: #111111; 103 | } 104 | 105 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-type-text.sangar-pagination-content-vertical > li { 106 | padding: 23px 15px; 107 | font-weight: bold; 108 | text-align: left; 109 | color: #FFF; 110 | box-sizing: border-box; 111 | font-family: sans-serif; 112 | font-size: 16px; 113 | background-color: #111111; 114 | } 115 | 116 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-type-text > li:hover { 117 | background-color: #000000; 118 | } 119 | 120 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-type-text > li.sangar-pagination-active { 121 | background-color: #FF5D35; 122 | } 123 | 124 | 125 | /** 126 | * sangar-pagination-type-image 127 | */ 128 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-type-image > li.sangar-pagination-active { 129 | background: none; 130 | } 131 | 132 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-type-image > li.sangar-pagination-active > div:before { 133 | border: 2px solid #CCCCCC; 134 | } 135 | 136 | .sangar-slideshow-container > .dark-big ul.sangar-pagination-type-image > li:hover { 137 | background: none; 138 | } 139 | 140 | 141 | 142 | -------------------------------------------------------------------------------- /dist/themes/dark-big/images/down-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/dark-big/images/down-arrow.png -------------------------------------------------------------------------------- /dist/themes/dark-big/images/left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/dark-big/images/left-arrow.png -------------------------------------------------------------------------------- /dist/themes/dark-big/images/right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/dark-big/images/right-arrow.png -------------------------------------------------------------------------------- /dist/themes/dark-big/images/up-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/dark-big/images/up-arrow.png -------------------------------------------------------------------------------- /dist/themes/dark/dark.css: -------------------------------------------------------------------------------- 1 | /* DIRECTIONAL NAV 2 | ================================================== */ 3 | .sangar-slideshow-container > .dark div.sangar-slider-nav > span { 4 | width: 40px; 5 | height: 40px; 6 | } 7 | 8 | .sangar-slideshow-container > .dark div > span.sangar-arrow-right { 9 | background: url("images/right-arrow.png"); 10 | right: 0px; 11 | } 12 | 13 | .sangar-slideshow-container > .dark div > span.sangar-arrow-left { 14 | background: url("images/left-arrow.png"); 15 | left: 0px; 16 | } 17 | 18 | .sangar-slideshow-container > .dark div > span.sangar-arrow-down { 19 | background: url("images/down-arrow.png"); 20 | bottom: 0px; 21 | } 22 | 23 | .sangar-slideshow-container > .dark div > span.sangar-arrow-up { 24 | background: url("images/up-arrow.png"); 25 | top: 0px; 26 | } 27 | 28 | /* TIMER 29 | ================================================== */ 30 | .sangar-slideshow-container > .dark div.sangar-timer div.sangar-timer-mask { 31 | background-color: #FF5D35; 32 | } 33 | 34 | /* PAGINATION NAV 35 | ================================================== */ 36 | .sangar-slideshow-container > .dark .sangar-pagination-wrapper{ 37 | background: #111111; 38 | } 39 | 40 | .sangar-slideshow-container > .dark ul.sangar-pagination-bullet > li { 41 | float: left; 42 | margin-left: 10px; 43 | cursor: pointer; 44 | color: #BBBBBB; 45 | width: 12px; 46 | height: 12px; 47 | overflow: hidden; 48 | padding: 0px; 49 | -webkit-border-radius: 90px; 50 | -moz-border-radius: 90px; 51 | border-radius: 90px; 52 | background-color: rgba(0, 0, 0, 0.5); 53 | border-width: 1px; 54 | border-style: solid; 55 | border-color: #000000; 56 | } 57 | 58 | .sangar-slideshow-container > .dark ul.sangar-pagination-bullet > li.sangar-pagination-active { 59 | color: #616161; 60 | background: #000000; 61 | margin-left: auto; 62 | margin-right: auto; 63 | margin-left: 10px; 64 | } 65 | 66 | .sangar-slideshow-container > .dark ul.sangar-pagination-bullet > li.sangar-bullet-number { 67 | padding: 8px 6px 5px 6px; 68 | border-radius: 0; 69 | font-size: 16px; 70 | color: #fff; 71 | border: 1px solid #2D2D2D; 72 | width: 18px; 73 | height: 18px; 74 | background: #4C4C4C; 75 | font-weight: bold; 76 | } 77 | 78 | .sangar-slideshow-container > .dark ul.sangar-pagination-bullet > li.sangar-bullet-number.sangar-pagination-active { 79 | color: #4C4C4C; 80 | background: #D3D3D3; 81 | width: 18px; 82 | height: 18px; 83 | } 84 | 85 | /** 86 | * sangar-sangar-pagination-type-text 87 | */ 88 | .sangar-slideshow-container > .dark ul.sangar-pagination-type-text.sangar-pagination-content-horizontal > li { 89 | padding: 23px 15px; 90 | font-weight: bold; 91 | text-align: center; 92 | color: #FFF; 93 | box-sizing: border-box; 94 | font-family: sans-serif; 95 | font-size: 16px; 96 | background-color: #111111; 97 | } 98 | 99 | .sangar-slideshow-container > .dark ul.sangar-pagination-type-text.sangar-pagination-content-vertical > li { 100 | padding: 23px 15px; 101 | font-weight: bold; 102 | text-align: left; 103 | color: #FFF; 104 | box-sizing: border-box; 105 | font-family: sans-serif; 106 | font-size: 16px; 107 | background-color: #111111; 108 | } 109 | 110 | .sangar-slideshow-container > .dark ul.sangar-pagination-type-text > li:hover { 111 | background-color: #000000; 112 | } 113 | 114 | .sangar-slideshow-container > .dark ul.sangar-pagination-type-text > li.sangar-pagination-active { 115 | background-color: #FF5D35; 116 | } 117 | 118 | 119 | /** 120 | * sangar-pagination-type-image 121 | */ 122 | .sangar-slideshow-container > .dark ul.sangar-pagination-type-image > li.sangar-pagination-active { 123 | background: none; 124 | } 125 | 126 | .sangar-slideshow-container > .dark ul.sangar-pagination-type-image > li.sangar-pagination-active > div:before { 127 | border: 2px solid #CCCCCC; 128 | } 129 | 130 | .sangar-slideshow-container > .dark ul.sangar-pagination-type-image > li:hover { 131 | background: none; 132 | } 133 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /dist/themes/dark/images/down-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/dark/images/down-arrow.png -------------------------------------------------------------------------------- /dist/themes/dark/images/left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/dark/images/left-arrow.png -------------------------------------------------------------------------------- /dist/themes/dark/images/right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/dark/images/right-arrow.png -------------------------------------------------------------------------------- /dist/themes/dark/images/up-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/dark/images/up-arrow.png -------------------------------------------------------------------------------- /dist/themes/default-big/default-big.css: -------------------------------------------------------------------------------- 1 | /* DIRECTIONAL NAV 2 | ================================================== */ 3 | .sangar-slideshow-container > .default-big div.sangar-slider-nav > span { 4 | width: 60px; 5 | height: 60px; 6 | } 7 | 8 | .sangar-slideshow-container > .default-big div > span.sangar-arrow-right { 9 | background: url("images/right-arrow.png"); 10 | right: 0px; 11 | } 12 | 13 | .sangar-slideshow-container > .default-big div > span.sangar-arrow-left { 14 | background: url("images/left-arrow.png"); 15 | left: 0px; 16 | } 17 | 18 | .sangar-slideshow-container > .default-big div > span.sangar-arrow-down { 19 | background: url("images/down-arrow.png"); 20 | bottom: 0px; 21 | } 22 | 23 | .sangar-slideshow-container > .default-big div > span.sangar-arrow-up { 24 | background: url("images/up-arrow.png"); 25 | top: 0px; 26 | } 27 | 28 | /* CONTENT BOX 29 | ================================================== */ 30 | .sangar-slideshow-container > .default-big .sangar-content-wrapper .sangar-content .sangar-textbox { 31 | padding: 80px; 32 | } 33 | 34 | /* TIMER 35 | ================================================== */ 36 | .sangar-slideshow-container > .default-big div.sangar-timer div.sangar-timer-mask { 37 | background-color: #00C1EF; 38 | } 39 | 40 | /* PAGINATION NAV 41 | ================================================== */ 42 | .sangar-slideshow-container > .default-big .sangar-pagination-wrapper{ 43 | background: #111111; 44 | } 45 | 46 | .sangar-slideshow-container > .default-big ul.sangar-pagination-bullet > li { 47 | float: left; 48 | margin-left: 10px; 49 | cursor: pointer; 50 | color: #BBBBBB; 51 | width: 12px; 52 | height: 12px; 53 | overflow: hidden; 54 | padding: 0px; 55 | -webkit-border-radius: 90px; 56 | -moz-border-radius: 90px; 57 | border-radius: 90px; 58 | background-color: rgba(255, 255, 255, 0.5); 59 | border-width: 3px; 60 | border-style: solid; 61 | border-color: transparent; 62 | background-clip: content-box; 63 | } 64 | 65 | .sangar-slideshow-container > .default-big ul.sangar-pagination-bullet > li.sangar-pagination-active { 66 | color: #616161; 67 | background: none; 68 | margin-left: auto; 69 | margin-right: auto; 70 | margin-left: 10px; 71 | border-color: #FFFFFF; 72 | } 73 | 74 | .sangar-slideshow-container > .default-big ul.sangar-pagination-bullet > li.sangar-bullet-number { 75 | padding: 8px 6px 5px 6px; 76 | border-radius: 0; 77 | font-size: 16px; 78 | color: #fff; 79 | border: 1px solid #2D2D2D; 80 | width: 18px; 81 | height: 18px; 82 | background: #4C4C4C; 83 | font-weight: bold; 84 | } 85 | 86 | .sangar-slideshow-container > .default-big ul.sangar-pagination-bullet > li.sangar-bullet-number.sangar-pagination-active { 87 | color: #4C4C4C; 88 | background: #D3D3D3; 89 | width: 18px; 90 | height: 18px; 91 | } 92 | 93 | /** 94 | * sangar-sangar-pagination-type-text 95 | */ 96 | .sangar-slideshow-container > .default-big ul.sangar-pagination-type-text.sangar-pagination-content-horizontal > li { 97 | padding: 23px 15px; 98 | font-weight: bold; 99 | text-align: center; 100 | color: #FFF; 101 | box-sizing: border-box; 102 | font-family: sans-serif; 103 | font-size: 16px; 104 | background-color: #111111; 105 | } 106 | 107 | .sangar-slideshow-container > .default-big ul.sangar-pagination-type-text.sangar-pagination-content-vertical > li { 108 | padding: 23px 15px; 109 | font-weight: bold; 110 | text-align: left; 111 | color: #FFF; 112 | box-sizing: border-box; 113 | font-family: sans-serif; 114 | font-size: 16px; 115 | background-color: #111111; 116 | } 117 | 118 | .sangar-slideshow-container > .default-big ul.sangar-pagination-type-text > li:hover { 119 | background-color: #000000; 120 | } 121 | 122 | .sangar-slideshow-container > .default-big ul.sangar-pagination-type-text > li.sangar-pagination-active { 123 | background-color: #00AFEA; 124 | } 125 | 126 | 127 | /** 128 | * sangar-pagination-type-image 129 | */ 130 | .sangar-slideshow-container > .default-big ul.sangar-pagination-type-image > li.sangar-pagination-active { 131 | background: none; 132 | } 133 | 134 | .sangar-slideshow-container > .default-big ul.sangar-pagination-type-image > li.sangar-pagination-active > div:before { 135 | border: 2px solid #CCCCCC; 136 | } 137 | 138 | .sangar-slideshow-container > .default-big ul.sangar-pagination-type-image > li:hover { 139 | background: none; 140 | } 141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /dist/themes/default-big/images/down-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/default-big/images/down-arrow.png -------------------------------------------------------------------------------- /dist/themes/default-big/images/left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/default-big/images/left-arrow.png -------------------------------------------------------------------------------- /dist/themes/default-big/images/right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/default-big/images/right-arrow.png -------------------------------------------------------------------------------- /dist/themes/default-big/images/up-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/default-big/images/up-arrow.png -------------------------------------------------------------------------------- /dist/themes/default/default.css: -------------------------------------------------------------------------------- 1 | /* DIRECTIONAL NAV 2 | ================================================== */ 3 | .sangar-slideshow-container > .default div.sangar-slider-nav > span { 4 | width: 40px; 5 | height: 40px; 6 | } 7 | 8 | .sangar-slideshow-container > .default div > span.sangar-arrow-right { 9 | background: url("images/right-arrow.png"); 10 | right: 0px; 11 | } 12 | 13 | .sangar-slideshow-container > .default div > span.sangar-arrow-left { 14 | background: url("images/left-arrow.png"); 15 | left: 0px; 16 | } 17 | 18 | .sangar-slideshow-container > .default div > span.sangar-arrow-down { 19 | background: url("images/down-arrow.png"); 20 | bottom: 0px; 21 | } 22 | 23 | .sangar-slideshow-container > .default div > span.sangar-arrow-up { 24 | background: url("images/up-arrow.png"); 25 | top: 0px; 26 | } 27 | 28 | /* TIMER 29 | ================================================== */ 30 | .sangar-slideshow-container > .default div.sangar-timer div.sangar-timer-mask { 31 | background-color: #00C1EF; 32 | } 33 | 34 | /* PAGINATION NAV 35 | ================================================== */ 36 | .sangar-slideshow-container > .default .sangar-pagination-wrapper{ 37 | background: #111111; 38 | } 39 | 40 | .sangar-slideshow-container > .default ul.sangar-pagination-bullet > li { 41 | float: left; 42 | margin-left: 10px; 43 | cursor: pointer; 44 | color: #BBBBBB; 45 | width: 12px; 46 | height: 12px; 47 | overflow: hidden; 48 | padding: 0px; 49 | -webkit-border-radius: 90px; 50 | -moz-border-radius: 90px; 51 | border-radius: 90px; 52 | background-color: rgba(255, 255, 255, 0.5); 53 | border-width: 3px; 54 | border-style: solid; 55 | border-color: transparent; 56 | background-clip: content-box; 57 | } 58 | 59 | .sangar-slideshow-container > .default ul.sangar-pagination-bullet > li.sangar-pagination-active { 60 | color: #616161; 61 | background: none; 62 | margin-left: auto; 63 | margin-right: auto; 64 | margin-left: 10px; 65 | border-color: #FFFFFF; 66 | } 67 | 68 | .sangar-slideshow-container > .default ul.sangar-pagination-bullet > li.sangar-bullet-number { 69 | padding: 8px 6px 5px 6px; 70 | border-radius: 0; 71 | font-size: 16px; 72 | color: #fff; 73 | border: 1px solid #2D2D2D; 74 | width: 18px; 75 | height: 18px; 76 | background: #4C4C4C; 77 | font-weight: bold; 78 | } 79 | 80 | .sangar-slideshow-container > .default ul.sangar-pagination-bullet > li.sangar-bullet-number.sangar-pagination-active { 81 | color: #4C4C4C; 82 | background: #D3D3D3; 83 | width: 18px; 84 | height: 18px; 85 | } 86 | 87 | /** 88 | * sangar-sangar-pagination-type-text 89 | */ 90 | .sangar-slideshow-container > .default ul.sangar-pagination-type-text.sangar-pagination-content-horizontal > li { 91 | padding: 23px 15px; 92 | font-weight: bold; 93 | text-align: center; 94 | color: #FFF; 95 | box-sizing: border-box; 96 | font-family: sans-serif; 97 | font-size: 16px; 98 | background-color: #111111; 99 | } 100 | 101 | .sangar-slideshow-container > .default ul.sangar-pagination-type-text.sangar-pagination-content-vertical > li { 102 | padding: 23px 15px; 103 | font-weight: bold; 104 | text-align: left; 105 | color: #FFF; 106 | box-sizing: border-box; 107 | font-family: sans-serif; 108 | font-size: 16px; 109 | background-color: #111111; 110 | } 111 | 112 | .sangar-slideshow-container > .default ul.sangar-pagination-type-text > li:hover { 113 | background-color: #000000; 114 | } 115 | 116 | .sangar-slideshow-container > .default ul.sangar-pagination-type-text > li.sangar-pagination-active { 117 | background-color: #00AFEA; 118 | } 119 | 120 | 121 | /** 122 | * sangar-pagination-type-image 123 | */ 124 | .sangar-slideshow-container > .default ul.sangar-pagination-type-image > li.sangar-pagination-active { 125 | background: none; 126 | } 127 | 128 | .sangar-slideshow-container > .default ul.sangar-pagination-type-image > li.sangar-pagination-active > div:before { 129 | border: 2px solid #CCCCCC; 130 | } 131 | 132 | .sangar-slideshow-container > .default ul.sangar-pagination-type-image > li:hover { 133 | background: none; 134 | } 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /dist/themes/default/images/down-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/default/images/down-arrow.png -------------------------------------------------------------------------------- /dist/themes/default/images/left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/default/images/left-arrow.png -------------------------------------------------------------------------------- /dist/themes/default/images/right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/default/images/right-arrow.png -------------------------------------------------------------------------------- /dist/themes/default/images/up-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/default/images/up-arrow.png -------------------------------------------------------------------------------- /dist/themes/light-big/images/down-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/light-big/images/down-arrow.png -------------------------------------------------------------------------------- /dist/themes/light-big/images/left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/light-big/images/left-arrow.png -------------------------------------------------------------------------------- /dist/themes/light-big/images/right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/light-big/images/right-arrow.png -------------------------------------------------------------------------------- /dist/themes/light-big/images/up-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/light-big/images/up-arrow.png -------------------------------------------------------------------------------- /dist/themes/light-big/light-big.css: -------------------------------------------------------------------------------- 1 | /* DIRECTIONAL NAV 2 | ================================================== */ 3 | .sangar-slideshow-container > .light-big div.sangar-slider-nav > span { 4 | width: 60px; 5 | height: 60px; 6 | } 7 | 8 | .sangar-slideshow-container > .light-big div > span.sangar-arrow-right { 9 | background: url("images/right-arrow.png"); 10 | right: 0px; 11 | } 12 | 13 | .sangar-slideshow-container > .light-big div > span.sangar-arrow-left { 14 | background: url("images/left-arrow.png"); 15 | left: 0px; 16 | } 17 | 18 | .sangar-slideshow-container > .light-big div > span.sangar-arrow-down { 19 | background: url("images/down-arrow.png"); 20 | bottom: 0px; 21 | } 22 | 23 | .sangar-slideshow-container > .light-big div > span.sangar-arrow-up { 24 | background: url("images/up-arrow.png"); 25 | top: 0px; 26 | } 27 | 28 | /* CONTENT BOX 29 | ================================================== */ 30 | .sangar-slideshow-container > .light-big .sangar-content-wrapper .sangar-content .sangar-textbox { 31 | padding: 80px; 32 | } 33 | 34 | /* TIMER 35 | ================================================== */ 36 | .sangar-slideshow-container > .light-big div.sangar-timer div.sangar-timer-mask { 37 | background-color: #F5F5F5; 38 | } 39 | 40 | /* PAGINATION NAV 41 | ================================================== */ 42 | .sangar-slideshow-container > .light-big .sangar-pagination-wrapper{ 43 | background: #EDEDED; 44 | } 45 | 46 | .sangar-slideshow-container > .light-big ul.sangar-pagination-bullet > li { 47 | float: left; 48 | margin-left: 10px; 49 | cursor: pointer; 50 | color: #BBBBBB; 51 | width: 12px; 52 | height: 12px; 53 | overflow: hidden; 54 | padding: 0px; 55 | -webkit-border-radius: 90px; 56 | -moz-border-radius: 90px; 57 | border-radius: 90px; 58 | background-color: rgba(255, 255, 255, 0.5); 59 | border-width: 1px; 60 | border-style: solid; 61 | border-color: transparent; 62 | } 63 | 64 | .sangar-slideshow-container > .light-big ul.sangar-pagination-bullet > li.sangar-pagination-active { 65 | color: #616161; 66 | background: #ffffff; 67 | margin-left: auto; 68 | margin-right: auto; 69 | margin-left: 10px; 70 | border-color: #FFFFFF; 71 | } 72 | 73 | .sangar-slideshow-container > .light-big ul.sangar-pagination-bullet > li.sangar-bullet-number { 74 | padding: 8px 6px 5px 6px; 75 | border-radius: 0; 76 | font-size: 16px; 77 | color: #fff; 78 | border: 1px solid #2D2D2D; 79 | width: 18px; 80 | height: 18px; 81 | background: #4C4C4C; 82 | font-weight: bold; 83 | } 84 | 85 | .sangar-slideshow-container > .light-big ul.sangar-pagination-bullet > li.sangar-bullet-number.sangar-pagination-active { 86 | color: #4C4C4C; 87 | background: #D3D3D3; 88 | width: 18px; 89 | height: 18px; 90 | } 91 | 92 | /** 93 | * sangar-sangar-pagination-type-text 94 | */ 95 | .sangar-slideshow-container > .light-big ul.sangar-pagination-type-text.sangar-pagination-content-horizontal > li { 96 | padding: 23px 15px; 97 | font-weight: bold; 98 | text-align: center; 99 | color: #111111; 100 | box-sizing: border-box; 101 | font-family: sans-serif; 102 | font-size: 16px; 103 | background-color: #F4F4F4; 104 | border-left: 1px solid #EBEBEB; 105 | } 106 | 107 | .sangar-slideshow-container > .light-big ul.sangar-pagination-type-text.sangar-pagination-content-vertical > li { 108 | padding: 23px 15px; 109 | font-weight: bold; 110 | text-align: left; 111 | color: #111111; 112 | box-sizing: border-box; 113 | font-family: sans-serif; 114 | font-size: 16px; 115 | background-color: #F4F4F4; 116 | border-top: 1px solid #EBEBEB; 117 | } 118 | 119 | .sangar-slideshow-container > .light-big ul.sangar-pagination-type-text > li:hover { 120 | background-color: #FFFFFF; 121 | } 122 | 123 | .sangar-slideshow-container > .light-big ul.sangar-pagination-type-text > li.sangar-pagination-active { 124 | background-color: #DCDCDC; 125 | } 126 | 127 | /** 128 | * sangar-pagination-type-image 129 | */ 130 | .sangar-slideshow-container > .light-big ul.sangar-pagination-type-image > li.sangar-pagination-active { 131 | background: none; 132 | } 133 | 134 | .sangar-slideshow-container > .light-big ul.sangar-pagination-type-image > li.sangar-pagination-active > div:before { 135 | border: none; 136 | } 137 | 138 | .sangar-slideshow-container > .light-big ul.sangar-pagination-type-image > li:hover { 139 | background: none; 140 | } 141 | 142 | 143 | 144 | -------------------------------------------------------------------------------- /dist/themes/light/images/down-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/light/images/down-arrow.png -------------------------------------------------------------------------------- /dist/themes/light/images/left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/light/images/left-arrow.png -------------------------------------------------------------------------------- /dist/themes/light/images/right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/light/images/right-arrow.png -------------------------------------------------------------------------------- /dist/themes/light/images/up-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tonjoo/jQuery-Sangar-Slider/cb8cb74912139a252778e8588d3edafe1009cef6/dist/themes/light/images/up-arrow.png -------------------------------------------------------------------------------- /dist/themes/light/light.css: -------------------------------------------------------------------------------- 1 | /* DIRECTIONAL NAV 2 | ================================================== */ 3 | .sangar-slideshow-container > .light div.sangar-slider-nav > span { 4 | width: 40px; 5 | height: 40px; 6 | } 7 | 8 | .sangar-slideshow-container > .light div > span.sangar-arrow-right { 9 | background: url("images/right-arrow.png"); 10 | right: 0px; 11 | } 12 | 13 | .sangar-slideshow-container > .light div > span.sangar-arrow-left { 14 | background: url("images/left-arrow.png"); 15 | left: 0px; 16 | } 17 | 18 | .sangar-slideshow-container > .light div > span.sangar-arrow-down { 19 | background: url("images/down-arrow.png"); 20 | bottom: 0px; 21 | } 22 | 23 | .sangar-slideshow-container > .light div > span.sangar-arrow-up { 24 | background: url("images/up-arrow.png"); 25 | top: 0px; 26 | } 27 | 28 | /* TIMER 29 | ================================================== */ 30 | .sangar-slideshow-container > .light div.sangar-timer div.sangar-timer-mask { 31 | background-color: #F5F5F5; 32 | } 33 | 34 | /* PAGINATION NAV 35 | ================================================== */ 36 | .sangar-slideshow-container > .light .sangar-pagination-wrapper{ 37 | background: #EDEDED; 38 | } 39 | 40 | .sangar-slideshow-container > .light ul.sangar-pagination-bullet > li { 41 | float: left; 42 | margin-left: 10px; 43 | cursor: pointer; 44 | color: #BBBBBB; 45 | width: 12px; 46 | height: 12px; 47 | overflow: hidden; 48 | padding: 0px; 49 | -webkit-border-radius: 90px; 50 | -moz-border-radius: 90px; 51 | border-radius: 90px; 52 | background-color: rgba(255, 255, 255, 0.5); 53 | border-width: 1px; 54 | border-style: solid; 55 | border-color: transparent; 56 | } 57 | 58 | .sangar-slideshow-container > .light ul.sangar-pagination-bullet > li.sangar-pagination-active { 59 | color: #616161; 60 | background: #ffffff; 61 | margin-left: auto; 62 | margin-right: auto; 63 | margin-left: 10px; 64 | border-color: #FFFFFF; 65 | } 66 | 67 | .sangar-slideshow-container > .light ul.sangar-pagination-bullet > li.sangar-bullet-number { 68 | padding: 8px 6px 5px 6px; 69 | border-radius: 0; 70 | font-size: 16px; 71 | color: #fff; 72 | border: 1px solid #2D2D2D; 73 | width: 18px; 74 | height: 18px; 75 | background: #4C4C4C; 76 | font-weight: bold; 77 | } 78 | 79 | .sangar-slideshow-container > .light ul.sangar-pagination-bullet > li.sangar-bullet-number.sangar-pagination-active { 80 | color: #4C4C4C; 81 | background: #D3D3D3; 82 | width: 18px; 83 | height: 18px; 84 | } 85 | 86 | /** 87 | * sangar-sangar-pagination-type-text 88 | */ 89 | .sangar-slideshow-container > .light ul.sangar-pagination-type-text.sangar-pagination-content-horizontal > li { 90 | padding: 23px 15px; 91 | font-weight: bold; 92 | text-align: center; 93 | color: #333333; 94 | box-sizing: border-box; 95 | font-family: sans-serif; 96 | font-size: 16px; 97 | background-color: #F4F4F4; 98 | border-left: 1px solid #EBEBEB; 99 | } 100 | 101 | .sangar-slideshow-container > .light ul.sangar-pagination-type-text.sangar-pagination-content-vertical > li { 102 | padding: 23px 15px; 103 | font-weight: bold; 104 | text-align: left; 105 | color: #333333; 106 | box-sizing: border-box; 107 | font-family: sans-serif; 108 | font-size: 16px; 109 | background-color: #F4F4F4; 110 | border-top: 1px solid #EBEBEB; 111 | } 112 | 113 | .sangar-slideshow-container > .light ul.sangar-pagination-type-text > li:hover { 114 | background-color: #FFFFFF; 115 | } 116 | 117 | .sangar-slideshow-container > .light ul.sangar-pagination-type-text > li.sangar-pagination-active { 118 | background-color: #DCDCDC; 119 | } 120 | 121 | /** 122 | * sangar-pagination-type-image 123 | */ 124 | .sangar-slideshow-container > .light ul.sangar-pagination-type-image > li.sangar-pagination-active { 125 | background: none; 126 | } 127 | 128 | .sangar-slideshow-container > .light ul.sangar-pagination-type-image > li.sangar-pagination-active > div:before { 129 | border: none; 130 | } 131 | 132 | .sangar-slideshow-container > .light ul.sangar-pagination-type-image > li:hover { 133 | background: none; 134 | } 135 | 136 | 137 | 138 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sangarSlider", 3 | "version": "1.0.0", 4 | "devDependencies": { 5 | "grunt": "~0.4.2", 6 | "grunt-contrib-clean": "~0.5.0", 7 | "grunt-contrib-concat": "^0.5.0", 8 | "grunt-contrib-jshint": "~0.6.4", 9 | "grunt-contrib-uglify": "~0.2.4", 10 | "grunt-contrib-watch": "~0.5.3", 11 | "grunt-remove-logging": "^0.2.0", 12 | "grunt-contrib-copy": "~0.8.0" 13 | }, 14 | "licenses": [ 15 | { 16 | "type": "GNU", 17 | "url": "http://www.gnu.org/licenses/gpl-2.0.html" 18 | } 19 | ], 20 | "repository": { 21 | "private": true 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | #Sangar Slider 2 | 3 | [![Join the chat at https://gitter.im/tonjoo/jQuery-Sangar-Slider](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/tonjoo/jQuery-Sangar-Slider?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) 4 | 5 | Modern jQuery slider for your project. Available as jQuery plugin and WordPress plugin. 6 | 7 | Sangar slider is responsive and mobile ready with touch support. 8 | 9 | Feature : 10 | 11 | - Responsive and touch ready 12 | - Full width slider 13 | - Content Slider 14 | - Multiple pagination type : bullet, text, and image 15 | - Vertical slide 16 | - Caurosel slide 17 | - Javascript API to control the slide using external component 18 | - 35+ options 19 | - and many more awesomeness :) 20 | 21 | You can try the slideshow here : 22 | 23 | **[Example Page](http://tonjoo.com/demo/jQuery-Sangar-Slider/demo/sample-standart-pagination.html)** 24 | 25 | ##License 26 | 27 | Sangar slider is available under dual license : [GPLv2](http://www.gnu.org/licenses/gpl-2.0.html) and [Tonjoo License](#) 28 | 29 | ##External Library 30 | 31 | Sangar slider use external library: 32 | 33 | - jQuery v1.11.0 34 | - imagesLoaded PACKAGED v3.1.8 35 | - touchSwipe 36 | 37 | And if you have enabled the `animateContent` option, you must include: 38 | 39 | - velocity.js 40 | - velocityui.js 41 | 42 | ##Installation 43 | 44 | ####Initialize style 45 | 46 | ``` 47 | 48 | 49 | ``` 50 | 51 | ####Initialize jQuery 52 | 53 | ``` 54 | 55 | 56 | 57 | 58 | ``` 59 | 60 | ####Initialize plugin 61 | 62 | ``` 63 | jQuery(document).ready(function($) { 64 | $('.sangar-example').sangarSlider({ 65 | width : 850, 66 | height : 500, 67 | themeClass : 'default' 68 | }); 69 | }) 70 | ``` 71 | 72 | ####HTML structure 73 | 74 | ``` 75 |
76 |
77 | 78 | 79 |
80 |
81 | 82 | 83 |
84 |
85 | 86 |
87 |
88 | 89 |
90 |
91 | ``` 92 | 93 | ##Options 94 | 95 | | Name | Default Value | Accepted Values | Description | 96 | |--------|--------|--------|--------| 97 | |animation|`'horizontal-slide'`|[horizontal-slide, vertical-slide, fade]|Slide Animations| 98 | |animationSpeed|`700`|number|How fast animtions are| 99 | |continousSliding|`true`|boolean|Keep sliding without rollback| 100 | |carousel|`false`|boolean|Carousel mode| 101 | |carouselWidth|`60`|number|Width in percent| 102 | |carouselOpacity|`0.3`|float (0 to 1)|Opacity for non-active slide| 103 | |timer|`false`|boolean|Use the timer to autoplay| 104 | |advanceSpeed|`6000`|number|If timer is enabled, time between transitions| 105 | |pauseOnHover|`true`|boolean|If you hover pauses the slider| 106 | |startClockOnMouseOut|`true`|boolean|If clock should start on MouseOut| 107 | |startClockOnMouseOutAfter|`800`|number|How long after MouseOut should the timer start again| 108 | |directionalNav|`'autohide'`|[autohide, show, none]|Directional Navigation| 109 | |directionalNavShowOpacity|`0.9`|float (0 to 1)| | 110 | |directionalNavHideOpacity|`0.1`|float (0 to 1)| | 111 | |directionalNavNextClass|`'exNext'`|string|External link ( a ) next class| 112 | |directionalNavPrevClass|`'exPrev'`|string|External link ( a ) prev class| 113 | |pagination|`'bullet'`|[bullet, content-horizontal, content-vertical, none]|Slideshow pagination type| 114 | |paginationBulletNumber|`false`|boolean|if true, bullet pagination will contain a slide number| 115 | |paginationContent|`["1","2","3"]`|array string|Can be text, image url, or something| 116 | |paginationContentType|`'text'`|[text, image]| | 117 | |paginationContentOpacity|`0.8`|float (0 to 1)|Pagination content opacity. working only on horizontal content pagination| 118 | |paginationContentWidth|`120`|number|Pagination content width in pixel| 119 | |paginationImageHeight|`90`|number|Pagination image height| 120 | |paginationImageAttr|`["", "", ""]`|array string|Optional attribute for each image pagination| 121 | |paginationContentFullWidth|`true`|boolean|Scale width to 100% if the container larger than total width| 122 | |paginationExternalClass|`'exPagination'`|string|If you use your own list (li) for pagination| 123 | |html5VideoNextOnEnded|`false`|boolean|Force go to next slide if HTML5 video is ended, if false, do looping| 124 | |textboxOutside|`false`|boolean|Put the textbox to bottom outside| 125 | |themeClass|`'default'`|string|sangar slider theme| 126 | |width|`850`|number|Slideshow base width| 127 | |height|`500`|number|Slideshow base height| 128 | |fullWidth|`false`|boolean|Slideshow width (and height) will scale to the container size| 129 | |fullHeight|`false`|boolean|Slideshow height will resize to browser height| 130 | |minHeight|`300`|number|Slideshow min height| 131 | |maxHeight|`0`|number|Slideshow max height, set to '0' (zero) to make it unlimited| 132 | |scaleImage|`true`|boolean|Images will scale to the slider size| 133 | |background|`'#222222'`|string (color code)|Container background color, leave blank will set to transparent| 134 | |imageVerticalAlign|`'middle'`|top, middle, bottom|Working only while scaleImage| 135 | |disableLoading|`false`|boolean|Disable loading animation| 136 | |forceSize|`false`|boolean|Make slideshow to force use width and height option, no responsive| 137 | |animateContent|`false`|boolean|Animated the content (textbox). This option require velocity.js and velocityui.js to work| 138 | |jsOnly|`false`|boolean|Use jQuery only, disable CSS3| 139 | |onInit|`function()` `{ }`|function|Run function on init| 140 | |onReset|`function(width,height)` `{ }`|function|Run function on first loading and resize slide| 141 | |beforeLoading|`function()` `{ }`|function|Run function before loading| 142 | |afterLoading|`function()` `{ }`|function|Run function after loading| 143 | |beforeChange|`function(activeSlide)` `{ }`|function|Run function before slide change| 144 | |afterChange|`function(activeSlide)` `{ }`|function|Run function after slide change| 145 | 146 | 147 | 148 | --------------------------------------------------------------------------------