"Bootstrap Slide Carousel Touch Slider with Text Animation"
Bootstrap 3.3.0 Snippet by bootstrapthemes

<!-- Add this css File in head tag--> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" media="all"> <link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css" rel="stylesheet" media="all"> <!-- If you want to change #bootstrap-touch-slider id then you have to change Carousel-indicators and Carousel-Control #bootstrap-touch-slider slide as well Slide effect: slide, fade Text Align: slide_style_center, slide_style_left, slide_style_right Add Text Animation: https://daneden.github.io/animate.css/ --> <div id="bootstrap-touch-slider" class="carousel bs-slider slide control-round indicators-line" data-ride="carousel" data-pause="hover" data-interval="5000" > <!-- Indicators --> <ol class="carousel-indicators"> <li data-target="#bootstrap-touch-slider" data-slide-to="0" class="active"></li> <li data-target="#bootstrap-touch-slider" data-slide-to="1"></li> <li data-target="#bootstrap-touch-slider" data-slide-to="2"></li> </ol> <!-- Wrapper For Slides --> <div class="carousel-inner" role="listbox"> <!-- Third Slide --> <div class="item active"> <!-- Slide Background --> <img src="https://images.pexels.com/photos/48726/pexels-photo-48726.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Bootstrap Touch Slider" class="slide-image"/> <div class="bs-slider-overlay"></div> <div class="container"> <div class="row"> <!-- Slide Text Layer --> <div class="slide-text slide_style_left"> <h1 data-animation="animated zoomInRight">Bootstrap Carousel</h1> <p data-animation="animated fadeInLeft">Bootstrap carousel now touch enable slide.</p> <a href="http://bootstrapthemes.co/" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">select one</a> <a href="http://bootstrapthemes.co/" target="_blank" class="btn btn-primary" data-animation="animated fadeInRight">select two</a> </div> </div> </div> </div> <!-- End of Slide --> <!-- Second Slide --> <div class="item"> <!-- Slide Background --> <img src="https://images.pexels.com/photos/207990/pexels-photo-207990.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Bootstrap Touch Slider" class="slide-image"/> <div class="bs-slider-overlay"></div> <!-- Slide Text Layer --> <div class="slide-text slide_style_center"> <h1 data-animation="animated flipInX">Bootstrap touch slider</h1> <p data-animation="animated lightSpeedIn">Make Bootstrap Better together.</p> <a href="http://bootstrapthemes.co/" target="_blank" class="btn btn-default" data-animation="animated fadeInUp">select one</a> <a href="http://bootstrapthemes.co/" target="_blank" class="btn btn-primary" data-animation="animated fadeInDown">select two</a> </div> </div> <!-- End of Slide --> <!-- Third Slide --> <div class="item"> <!-- Slide Background --> <img src="https://images.pexels.com/photos/144345/pexels-photo-144345.jpeg?w=940&h=650&auto=compress&cs=tinysrgb" alt="Bootstrap Touch Slider" class="slide-image"/> <div class="bs-slider-overlay"></div> <!-- Slide Text Layer --> <div class="slide-text slide_style_right"> <h1 data-animation="animated zoomInLeft">Beautiful Animations</h1> <p data-animation="animated fadeInRight">Lots of css3 Animations to make slide beautiful .</p> <a href="http://bootstrapthemes.co/" target="_blank" class="btn btn-default" data-animation="animated fadeInLeft">select one</a> <a href="http://bootstrapthemes.co/" target="_blank" class="btn btn-primary" data-animation="animated fadeInRight">select two</a> </div> </div> <!-- End of Slide --> </div><!-- End of Wrapper For Slides --> <!-- Left Control --> <a class="left carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="prev"> <span class="fa fa-angle-left" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <!-- Right Control --> <a class="right carousel-control" href="#bootstrap-touch-slider" role="button" data-slide="next"> <span class="fa fa-angle-right" aria-hidden="true"></span> <span class="sr-only">Next</span> </a> </div> <!-- End bootstrap-touch-slider Slider --> <div style="text-align: center;margin-top: 150px; margin-bottom:100px"><h3>Check this in <a href="https://bootstrapthemes.co/demos?theme=bootstrap-carousel"target="_blank"> Full Screen Preview </a> And Drag the Slider ;)</h3> / Fade slide Also <a href="http://bootsnipp.com/snippets/OR9l8"target="_blank"> Available here </a></div> <div style="text-align: center;margin-top: 150px; margin-bottom:100px"> | <a href="https://bootstrapthemes.co/item/bootstrap-carousel-touch-slider-with-text-animation/"target="_blank"> Snippet By Bootstrapthemes.co </a> |</div>
.bs-slider{ overflow: hidden; max-height: 700px; position: relative; background: #000000; } .bs-slider:hover { cursor: -moz-grab; cursor: -webkit-grab; } .bs-slider:active { cursor: -moz-grabbing; cursor: -webkit-grabbing; } .bs-slider .bs-slider-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.40); } .bs-slider > .carousel-inner > .item > img, .bs-slider > .carousel-inner > .item > a > img { margin: auto; width: 100% !important; } /******************** *****Slide effect **********************/ .fade { opacity: 1; } .fade .item { top: 0; z-index: 1; opacity: 0; width: 100%; position: absolute; left: 0 !important; display: block !important; -webkit-transition: opacity ease-in-out 1s; -moz-transition: opacity ease-in-out 1s; -ms-transition: opacity ease-in-out 1s; -o-transition: opacity ease-in-out 1s; transition: opacity ease-in-out 1s; } .fade .item:first-child { top: auto; position: relative; } .fade .item.active { opacity: 1; z-index: 2; -webkit-transition: opacity ease-in-out 1s; -moz-transition: opacity ease-in-out 1s; -ms-transition: opacity ease-in-out 1s; -o-transition: opacity ease-in-out 1s; transition: opacity ease-in-out 1s; } /*---------- LEFT/RIGHT ROUND CONTROL ----------*/ .control-round .carousel-control { top: 47%; opacity: 0; width: 45px; height: 45px; z-index: 100; color: #ffffff; display: block; font-size: 24px; cursor: pointer; overflow: hidden; line-height: 43px; text-shadow: none; position: absolute; font-weight: normal; background: transparent; -webkit-border-radius: 100px; border-radius: 100px; } .control-round:hover .carousel-control{ opacity: 1; } .control-round .carousel-control.left { left: 1%; } .control-round .carousel-control.right { right: 1%; } .control-round .carousel-control.left:hover, .control-round .carousel-control.right:hover{ color: #fdfdfd; background: rgba(0, 0, 0, 0.5); border: 0px transparent; } .control-round .carousel-control.left>span:nth-child(1){ left: 45%; } .control-round .carousel-control.right>span:nth-child(1){ right: 45%; } /*---------- INDICATORS CONTROL ----------*/ .indicators-line > .carousel-indicators{ right: 45%; bottom: 3%; left: auto; width: 90%; height: 20px; font-size: 0; overflow-x: auto; text-align: right; overflow-y: hidden; padding-left: 10px; padding-right: 10px; padding-top: 1px; white-space: nowrap; } .indicators-line > .carousel-indicators li{ padding: 0; width: 15px; height: 15px; border: 1px solid rgb(158, 158, 158); text-indent: 0; overflow: hidden; text-align: left; position: relative; letter-spacing: 1px; background: rgb(158, 158, 158); -webkit-font-smoothing: antialiased; -webkit-border-radius: 50%; border-radius: 50%; margin-right: 5px; -webkit-transition: all 0.5s cubic-bezier(0.22,0.81,0.01,0.99); transition: all 0.5s cubic-bezier(0.22,0.81,0.01,0.99); z-index: 10; cursor:pointer; } .indicators-line > .carousel-indicators li:last-child{ margin-right: 0; } .indicators-line > .carousel-indicators .active{ margin: 1px 5px 1px 1px; box-shadow: 0 0 0 2px #fff; background-color: transparent; position: relative; -webkit-transition: box-shadow 0.3s ease; -moz-transition: box-shadow 0.3s ease; -o-transition: box-shadow 0.3s ease; transition: box-shadow 0.3s ease; -webkit-transition: background-color 0.3s ease; -moz-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } .indicators-line > .carousel-indicators .active:before{ transform: scale(0.5); background-color: #fff; content:""; position: absolute; left:-1px; top:-1px; width:15px; height: 15px; border-radius: 50%; -webkit-transition: background-color 0.3s ease; -moz-transition: background-color 0.3s ease; -o-transition: background-color 0.3s ease; transition: background-color 0.3s ease; } /*---------- SLIDE CAPTION ----------*/ .slide_style_left { text-align: left !important; } .slide_style_right { text-align: right !important; } .slide_style_center { text-align: center !important; } .slide-text { left: 0; top: 25%; right: 0; margin: auto; padding: 10px; position: absolute; text-align: left; padding: 10px 85px; } .slide-text > h1 { padding: 0; color: #ffffff; font-size: 70px; font-style: normal; line-height: 84px; margin-bottom: 30px; letter-spacing: 1px; display: inline-block; -webkit-animation-delay: 0.7s; animation-delay: 0.7s; } .slide-text > p { padding: 0; color: #ffffff; font-size: 20px; line-height: 24px; font-weight: 300; margin-bottom: 40px; letter-spacing: 1px; -webkit-animation-delay: 1.1s; animation-delay: 1.1s; } .slide-text > a.btn-default{ color: #000; font-weight: 400; font-size: 13px; line-height: 15px; margin-right: 10px; text-align: center; padding: 17px 30px; white-space: nowrap; letter-spacing: 1px; display: inline-block; border: none; text-transform: uppercase; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out; transition: background 0.3s ease-in-out, color 0.3s ease-in-out; } .slide-text > a.btn-primary{ color: #ffffff; cursor: pointer; font-weight: 400; font-size: 13px; line-height: 15px; margin-left: 10px; text-align: center; padding: 17px 30px; white-space: nowrap; letter-spacing: 1px; background: #00bfff; display: inline-block; text-decoration: none; text-transform: uppercase; border: none; -webkit-animation-delay: 2s; animation-delay: 2s; -webkit-transition: background 0.3s ease-in-out, color 0.3s ease-in-out; transition: background 0.3s ease-in-out, color 0.3s ease-in-out; } .slide-text > a:hover, .slide-text > a:active { color: #ffffff; background: #222222; -webkit-transition: background 0.5s ease-in-out, color 0.5s ease-in-out; transition: background 0.5s ease-in-out, color 0.5s ease-in-out; } /*------------------------------------------------------*/ /* RESPONSIVE /*------------------------------------------------------*/ @media (max-width: 991px) { .slide-text h1 { font-size: 40px; line-height: 50px; margin-bottom: 20px; } .slide-text > p { font-size: 18px; } } /*---------- MEDIA 480px ----------*/ @media (max-width: 768px) { .slide-text { padding: 10px 50px; } .slide-text h1 { font-size: 30px; line-height: 40px; margin-bottom: 10px; } .slide-text > p { font-size: 14px; line-height: 20px; margin-bottom: 20px; } .control-round .carousel-control{ display: none; } } @media (max-width: 480px) { .slide-text { padding: 10px 30px; } .slide-text h1 { font-size: 20px; line-height: 25px; margin-bottom: 5px; } .slide-text > p { font-size: 12px; line-height: 18px; margin-bottom: 10px; } .slide-text > a.btn-default, .slide-text > a.btn-primary { font-size: 10px; line-height: 10px; margin-right: 10px; text-align: center; padding: 10px 15px; } .indicators-line > .carousel-indicators{ display: none; } }
/*Bootstrap Carousel Touch Slider. https://bootstrapthemes.co Credits: Bootstrap, jQuery, TouchSwipe, Animate.css, FontAwesome */ (function(a){if(typeof define==="function"&&define.amd&&define.amd.jQuery){define(["jquery"],a)}else{if(typeof module!=="undefined"&&module.exports){a(require("jquery"))}else{a(jQuery)}}}(function(f){var y="1.6.15",p="left",o="right",e="up",x="down",c="in",A="out",m="none",s="auto",l="swipe",t="pinch",B="tap",j="doubletap",b="longtap",z="hold",E="horizontal",u="vertical",i="all",r=10,g="start",k="move",h="end",q="cancel",a="ontouchstart" in window,v=window.navigator.msPointerEnabled&&!window.navigator.pointerEnabled&&!a,d=(window.navigator.pointerEnabled||window.navigator.msPointerEnabled)&&!a,C="TouchSwipe";var n={fingers:1,threshold:75,cancelThreshold:null,pinchThreshold:20,maxTimeThreshold:null,fingerReleaseThreshold:250,longTapThreshold:500,doubleTapThreshold:200,swipe:null,swipeLeft:null,swipeRight:null,swipeUp:null,swipeDown:null,swipeStatus:null,pinchIn:null,pinchOut:null,pinchStatus:null,click:null,tap:null,doubleTap:null,longTap:null,hold:null,triggerOnTouchEnd:true,triggerOnTouchLeave:false,allowPageScroll:"auto",fallbackToMouseEvents:true,excludedElements:"label, button, input, select, textarea, a, .noSwipe",preventDefaultEvents:true};f.fn.swipe=function(H){var G=f(this),F=G.data(C);if(F&&typeof H==="string"){if(F[H]){return F[H].apply(this,Array.prototype.slice.call(arguments,1))}else{f.error("Method "+H+" does not exist on jQuery.swipe")}}else{if(F&&typeof H==="object"){F.option.apply(this,arguments)}else{if(!F&&(typeof H==="object"||!H)){return w.apply(this,arguments)}}}return G};f.fn.swipe.version=y;f.fn.swipe.defaults=n;f.fn.swipe.phases={PHASE_START:g,PHASE_MOVE:k,PHASE_END:h,PHASE_CANCEL:q};f.fn.swipe.directions={LEFT:p,RIGHT:o,UP:e,DOWN:x,IN:c,OUT:A};f.fn.swipe.pageScroll={NONE:m,HORIZONTAL:E,VERTICAL:u,AUTO:s};f.fn.swipe.fingers={ONE:1,TWO:2,THREE:3,FOUR:4,FIVE:5,ALL:i};function w(F){if(F&&(F.allowPageScroll===undefined&&(F.swipe!==undefined||F.swipeStatus!==undefined))){F.allowPageScroll=m}if(F.click!==undefined&&F.tap===undefined){F.tap=F.click}if(!F){F={}}F=f.extend({},f.fn.swipe.defaults,F);return this.each(function(){var H=f(this);var G=H.data(C);if(!G){G=new D(this,F);H.data(C,G)}})}function D(a5,au){var au=f.extend({},au);var az=(a||d||!au.fallbackToMouseEvents),K=az?(d?(v?"MSPointerDown":"pointerdown"):"touchstart"):"mousedown",ax=az?(d?(v?"MSPointerMove":"pointermove"):"touchmove"):"mousemove",V=az?(d?(v?"MSPointerUp":"pointerup"):"touchend"):"mouseup",T=az?(d?"mouseleave":null):"mouseleave",aD=(d?(v?"MSPointerCancel":"pointercancel"):"touchcancel");var ag=0,aP=null,a2=null,ac=0,a1=0,aZ=0,H=1,ap=0,aJ=0,N=null;var aR=f(a5);var aa="start";var X=0;var aQ={};var U=0,a3=0,a6=0,ay=0,O=0;var aW=null,af=null;try{aR.bind(K,aN);aR.bind(aD,ba)}catch(aj){f.error("events not supported "+K+","+aD+" on jQuery.swipe")}this.enable=function(){aR.bind(K,aN);aR.bind(aD,ba);return aR};this.disable=function(){aK();return aR};this.destroy=function(){aK();aR.data(C,null);aR=null};this.option=function(bd,bc){if(typeof bd==="object"){au=f.extend(au,bd)}else{if(au[bd]!==undefined){if(bc===undefined){return au[bd]}else{au[bd]=bc}}else{if(!bd){return au}else{f.error("Option "+bd+" does not exist on jQuery.swipe.options")}}}return null};function aN(be){if(aB()){return}if(f(be.target).closest(au.excludedElements,aR).length>0){return}var bf=be.originalEvent?be.originalEvent:be;var bd,bg=bf.touches,bc=bg?bg[0]:bf;aa=g;if(bg){X=bg.length}else{if(au.preventDefaultEvents!==false){be.preventDefault()}}ag=0;aP=null;a2=null;aJ=null;ac=0;a1=0;aZ=0;H=1;ap=0;N=ab();S();ai(0,bc);if(!bg||(X===au.fingers||au.fingers===i)||aX()){U=ar();if(X==2){ai(1,bg[1]);a1=aZ=at(aQ[0].start,aQ[1].start)}if(au.swipeStatus||au.pinchStatus){bd=P(bf,aa)}}else{bd=false}if(bd===false){aa=q;P(bf,aa);return bd}else{if(au.hold){af=setTimeout(f.proxy(function(){aR.trigger("hold",[bf.target]);if(au.hold){bd=au.hold.call(aR,bf,bf.target)}},this),au.longTapThreshold)}an(true)}return null}function a4(bf){var bi=bf.originalEvent?bf.originalEvent:bf;if(aa===h||aa===q||al()){return}var be,bj=bi.touches,bd=bj?bj[0]:bi;var bg=aH(bd);a3=ar();if(bj){X=bj.length}if(au.hold){clearTimeout(af)}aa=k;if(X==2){if(a1==0){ai(1,bj[1]);a1=aZ=at(aQ[0].start,aQ[1].start)}else{aH(bj[1]);aZ=at(aQ[0].end,aQ[1].end);aJ=aq(aQ[0].end,aQ[1].end)}H=a8(a1,aZ);ap=Math.abs(a1-aZ)}if((X===au.fingers||au.fingers===i)||!bj||aX()){aP=aL(bg.start,bg.end);a2=aL(bg.last,bg.end);ak(bf,a2);ag=aS(bg.start,bg.end);ac=aM();aI(aP,ag);be=P(bi,aa);if(!au.triggerOnTouchEnd||au.triggerOnTouchLeave){var bc=true;if(au.triggerOnTouchLeave){var bh=aY(this);bc=F(bg.end,bh)}if(!au.triggerOnTouchEnd&&bc){aa=aC(k)}else{if(au.triggerOnTouchLeave&&!bc){aa=aC(h)}}if(aa==q||aa==h){P(bi,aa)}}}else{aa=q;P(bi,aa)}if(be===false){aa=q;P(bi,aa)}}function M(bc){var bd=bc.originalEvent?bc.originalEvent:bc,be=bd.touches;if(be){if(be.length&&!al()){G(bd);return true}else{if(be.length&&al()){return true}}}if(al()){X=ay}a3=ar();ac=aM();if(bb()||!am()){aa=q;P(bd,aa)}else{if(au.triggerOnTouchEnd||(au.triggerOnTouchEnd==false&&aa===k)){if(au.preventDefaultEvents!==false){bc.preventDefault()}aa=h;P(bd,aa)}else{if(!au.triggerOnTouchEnd&&a7()){aa=h;aF(bd,aa,B)}else{if(aa===k){aa=q;P(bd,aa)}}}}an(false);return null}function ba(){X=0;a3=0;U=0;a1=0;aZ=0;H=1;S();an(false)}function L(bc){var bd=bc.originalEvent?bc.originalEvent:bc;if(au.triggerOnTouchLeave){aa=aC(h);P(bd,aa)}}function aK(){aR.unbind(K,aN);aR.unbind(aD,ba);aR.unbind(ax,a4);aR.unbind(V,M);if(T){aR.unbind(T,L)}an(false)}function aC(bg){var bf=bg;var be=aA();var bd=am();var bc=bb();if(!be||bc){bf=q}else{if(bd&&bg==k&&(!au.triggerOnTouchEnd||au.triggerOnTouchLeave)){bf=h}else{if(!bd&&bg==h&&au.triggerOnTouchLeave){bf=q}}}return bf}function P(be,bc){var bd,bf=be.touches;if(J()||W()){bd=aF(be,bc,l)}if((Q()||aX())&&bd!==false){bd=aF(be,bc,t)}if(aG()&&bd!==false){bd=aF(be,bc,j)}else{if(ao()&&bd!==false){bd=aF(be,bc,b)}else{if(ah()&&bd!==false){bd=aF(be,bc,B)}}}if(bc===q){if(W()){bd=aF(be,bc,l)}if(aX()){bd=aF(be,bc,t)}ba(be)}if(bc===h){if(bf){if(!bf.length){ba(be)}}else{ba(be)}}return bd}function aF(bf,bc,be){var bd;if(be==l){aR.trigger("swipeStatus",[bc,aP||null,ag||0,ac||0,X,aQ,a2]);if(au.swipeStatus){bd=au.swipeStatus.call(aR,bf,bc,aP||null,ag||0,ac||0,X,aQ,a2);if(bd===false){return false}}if(bc==h&&aV()){clearTimeout(aW);clearTimeout(af);aR.trigger("swipe",[aP,ag,ac,X,aQ,a2]);if(au.swipe){bd=au.swipe.call(aR,bf,aP,ag,ac,X,aQ,a2);if(bd===false){return false}}switch(aP){case p:aR.trigger("swipeLeft",[aP,ag,ac,X,aQ,a2]);if(au.swipeLeft){bd=au.swipeLeft.call(aR,bf,aP,ag,ac,X,aQ,a2)}break;case o:aR.trigger("swipeRight",[aP,ag,ac,X,aQ,a2]);if(au.swipeRight){bd=au.swipeRight.call(aR,bf,aP,ag,ac,X,aQ,a2)}break;case e:aR.trigger("swipeUp",[aP,ag,ac,X,aQ,a2]);if(au.swipeUp){bd=au.swipeUp.call(aR,bf,aP,ag,ac,X,aQ,a2)}break;case x:aR.trigger("swipeDown",[aP,ag,ac,X,aQ,a2]);if(au.swipeDown){bd=au.swipeDown.call(aR,bf,aP,ag,ac,X,aQ,a2)}break}}}if(be==t){aR.trigger("pinchStatus",[bc,aJ||null,ap||0,ac||0,X,H,aQ]);if(au.pinchStatus){bd=au.pinchStatus.call(aR,bf,bc,aJ||null,ap||0,ac||0,X,H,aQ);if(bd===false){return false}}if(bc==h&&a9()){switch(aJ){case c:aR.trigger("pinchIn",[aJ||null,ap||0,ac||0,X,H,aQ]);if(au.pinchIn){bd=au.pinchIn.call(aR,bf,aJ||null,ap||0,ac||0,X,H,aQ)}break;case A:aR.trigger("pinchOut",[aJ||null,ap||0,ac||0,X,H,aQ]);if(au.pinchOut){bd=au.pinchOut.call(aR,bf,aJ||null,ap||0,ac||0,X,H,aQ)}break}}}if(be==B){if(bc===q||bc===h){clearTimeout(aW);clearTimeout(af);if(Z()&&!I()){O=ar();aW=setTimeout(f.proxy(function(){O=null;aR.trigger("tap",[bf.target]);if(au.tap){bd=au.tap.call(aR,bf,bf.target)}},this),au.doubleTapThreshold)}else{O=null;aR.trigger("tap",[bf.target]);if(au.tap){bd=au.tap.call(aR,bf,bf.target)}}}}else{if(be==j){if(bc===q||bc===h){clearTimeout(aW);clearTimeout(af);O=null;aR.trigger("doubletap",[bf.target]);if(au.doubleTap){bd=au.doubleTap.call(aR,bf,bf.target)}}}else{if(be==b){if(bc===q||bc===h){clearTimeout(aW);O=null;aR.trigger("longtap",[bf.target]);if(au.longTap){bd=au.longTap.call(aR,bf,bf.target)}}}}}return bd}function am(){var bc=true;if(au.threshold!==null){bc=ag>=au.threshold}return bc}function bb(){var bc=false;if(au.cancelThreshold!==null&&aP!==null){bc=(aT(aP)-ag)>=au.cancelThreshold}return bc}function ae(){if(au.pinchThreshold!==null){return ap>=au.pinchThreshold}return true}function aA(){var bc;if(au.maxTimeThreshold){if(ac>=au.maxTimeThreshold){bc=false}else{bc=true}}else{bc=true}return bc}function ak(bc,bd){if(au.preventDefaultEvents===false){return}if(au.allowPageScroll===m){bc.preventDefault()}else{var be=au.allowPageScroll===s;switch(bd){case p:if((au.swipeLeft&&be)||(!be&&au.allowPageScroll!=E)){bc.preventDefault()}break;case o:if((au.swipeRight&&be)||(!be&&au.allowPageScroll!=E)){bc.preventDefault()}break;case e:if((au.swipeUp&&be)||(!be&&au.allowPageScroll!=u)){bc.preventDefault()}break;case x:if((au.swipeDown&&be)||(!be&&au.allowPageScroll!=u)){bc.preventDefault()}break}}}function a9(){var bd=aO();var bc=Y();var be=ae();return bd&&bc&&be}function aX(){return !!(au.pinchStatus||au.pinchIn||au.pinchOut)}function Q(){return !!(a9()&&aX())}function aV(){var bf=aA();var bh=am();var be=aO();var bc=Y();var bd=bb();var bg=!bd&&bc&&be&&bh&&bf;return bg}function W(){return !!(au.swipe||au.swipeStatus||au.swipeLeft||au.swipeRight||au.swipeUp||au.swipeDown)}function J(){return !!(aV()&&W())}function aO(){return((X===au.fingers||au.fingers===i)||!a)}function Y(){return aQ[0].end.x!==0}function a7(){return !!(au.tap)}function Z(){return !!(au.doubleTap)}function aU(){return !!(au.longTap)}function R(){if(O==null){return false}var bc=ar();return(Z()&&((bc-O)<=au.doubleTapThreshold))}function I(){return R()}function aw(){return((X===1||!a)&&(isNaN(ag)||ag<au.threshold))}function a0(){return((ac>au.longTapThreshold)&&(ag<r))}function ah(){return !!(aw()&&a7())}function aG(){return !!(R()&&Z())}function ao(){return !!(a0()&&aU())}function G(bc){a6=ar();ay=bc.touches.length+1}function S(){a6=0;ay=0}function al(){var bc=false;if(a6){var bd=ar()-a6;if(bd<=au.fingerReleaseThreshold){bc=true}}return bc}function aB(){return !!(aR.data(C+"_intouch")===true)}function an(bc){if(!aR){return}if(bc===true){aR.bind(ax,a4);aR.bind(V,M);if(T){aR.bind(T,L)}}else{aR.unbind(ax,a4,false);aR.unbind(V,M,false);if(T){aR.unbind(T,L,false)}}aR.data(C+"_intouch",bc===true)}function ai(be,bc){var bd={start:{x:0,y:0},last:{x:0,y:0},end:{x:0,y:0}};bd.start.x=bd.last.x=bd.end.x=bc.pageX||bc.clientX;bd.start.y=bd.last.y=bd.end.y=bc.pageY||bc.clientY;aQ[be]=bd;return bd}function aH(bc){var be=bc.identifier!==undefined?bc.identifier:0;var bd=ad(be);if(bd===null){bd=ai(be,bc)}bd.last.x=bd.end.x;bd.last.y=bd.end.y;bd.end.x=bc.pageX||bc.clientX;bd.end.y=bc.pageY||bc.clientY;return bd}function ad(bc){return aQ[bc]||null}function aI(bc,bd){bd=Math.max(bd,aT(bc));N[bc].distance=bd}function aT(bc){if(N[bc]){return N[bc].distance}return undefined}function ab(){var bc={};bc[p]=av(p);bc[o]=av(o);bc[e]=av(e);bc[x]=av(x);return bc}function av(bc){return{direction:bc,distance:0}}function aM(){return a3-U}function at(bf,be){var bd=Math.abs(bf.x-be.x);var bc=Math.abs(bf.y-be.y);return Math.round(Math.sqrt(bd*bd+bc*bc))}function a8(bc,bd){var be=(bd/bc)*1;return be.toFixed(2)}function aq(){if(H<1){return A}else{return c}}function aS(bd,bc){return Math.round(Math.sqrt(Math.pow(bc.x-bd.x,2)+Math.pow(bc.y-bd.y,2)))}function aE(bf,bd){var bc=bf.x-bd.x;var bh=bd.y-bf.y;var be=Math.atan2(bh,bc);var bg=Math.round(be*180/Math.PI);if(bg<0){bg=360-Math.abs(bg)}return bg}function aL(bd,bc){var be=aE(bd,bc);if((be<=45)&&(be>=0)){return p}else{if((be<=360)&&(be>=315)){return p}else{if((be>=135)&&(be<=225)){return o}else{if((be>45)&&(be<135)){return x}else{return e}}}}}function ar(){var bc=new Date();return bc.getTime()}function aY(bc){bc=f(bc);var be=bc.offset();var bd={left:be.left,right:be.left+bc.outerWidth(),top:be.top,bottom:be.top+bc.outerHeight()};return bd}function F(bc,bd){return(bc.x>bd.left&&bc.x<bd.right&&bc.y>bd.top&&bc.y<bd.bottom)}}}));!function(n){"use strict";n.fn.bsTouchSlider=function(i){var a=n(".carousel");return this.each(function(){function i(i){var a="webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";i.each(function(){var i=n(this),t=i.data("animation");i.addClass(t).one(a,function(){i.removeClass(t)})})}var t=a.find(".item:first").find("[data-animation ^= 'animated']");a.carousel(),i(t),a.on("slide.bs.carousel",function(a){var t=n(a.relatedTarget).find("[data-animation ^= 'animated']");i(t)}),n(".carousel .carousel-inner").swipe({swipeLeft:function(n,i,a,t,e){this.parent().carousel("next")},swipeRight:function(){this.parent().carousel("prev")},threshold:0})})}}(jQuery); //Initialise Bootstrap Carousel Touch Slider // Curently there are no option available. $('#bootstrap-touch-slider').bsTouchSlider();

Questions / Comments:

We need the css animation files

Ezekiel Donkor (0) - 7 months ago - Reply 0


All Css animation file available in here https://daneden.github.io/a...

BootstrapThemes (0) - 7 months ago - Reply 0


thank you sir from Ezekiel Donkor
because i also need it

hanif hashim (0) - 7 months ago - Reply 0


BootstrapThemes (0) - 7 months ago - Reply 0


Hey thanks for this great snippet! One odd thing is happening: when viewed on ipad the page does not scroll in landscape mode, in vertical mode it is ok. Any suggestions??? ;)

anna (0) - 11 months ago - Reply 0


I cant reproduce this issue.

BootstrapThemes (0) - 7 months ago - Reply 0


when preview is clicked, the animation for the text and buttons are now static. After testing on my end, same issue applies.

IdeaKing (0) - 1 year ago - Reply 0


When you click on others code and go to preview its not working . Better check full page so you will understand how its look like.

BootstrapThemes (0) - 7 months ago - Reply 0


Related: See More