<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
http://ruseller.com/lessons/les1814/demo/demos/full.html
<div id="owl-demo" class="owl-carousel owl-theme">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
</div>
/*
* Core Owl Carousel CSS File
* v1.15
*/
/* clearfix */
.owl-carousel:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
/* display none until init */
.owl-carousel{
display: none;
position: relative;
overflow: hidden;
width: 100%;
}
.owl-carousel .owl-wrapper{
position: relative;
display: inline-block;
-webkit-transform: translate3d(0px, 0px, 0px);
-webkit-perspective: 1000;
}
.owl-carousel .owl-item{
float: left;
}
.owl-controlls .owl-page,
.owl-controlls .owl-buttons{
cursor: pointer;
}
.owl-controlls {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
/* mouse grab icon */
.grabbing {
cursor:url(grabbing.png) 8 8, move;
}
/* fix */
.owl-carousel .owl-wrapper,
.owl-carousel .owl-item{
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
}
/*
* Owl Carousel Owl Demo Theme
* v1.15
*/
.owl-theme .owl-controlls{
margin-top: 10px;
text-align: center;
}
/* Styling Next and Prev buttons */
.owl-theme .owl-controlls .owl-buttons div{
color: #FFF;
display: inline-block;
zoom: 1;
*display: inline;/*IE7 life-saver */
margin: 5px;
padding: 3px 10px;
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
background: #869791;
opacity: 0.5;
}
/* Clickable class fix problem with hover on touch devices */
/* Use it for non-touch hover action */
.owl-theme .owl-controlls.clickable .owl-buttons div:hover{
opacity: 1;
text-decoration: none;
}
/* Styling Pagination*/
.owl-theme .owl-controlls .owl-page{
display: inline-block;
zoom: 1;
*display: inline;/*IE7 life-saver */
}
.owl-theme .owl-controlls .owl-page span{
display: block;
width: 12px;
height: 12px;
margin: 5px 7px;
opacity: 0.5;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: #869791;
}
.owl-theme .owl-controlls .owl-page.active span,
.owl-theme .owl-controlls.clickable .owl-page:hover span{
opacity: 1;
}
/* If PaginationNumbers is true */
.owl-theme .owl-controlls .owl-page span.owl-numbers{
height: auto;
width: auto;
color: #FFF;
padding: 2px 10px;
font-size: 12px;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
}
$(document).ready(function() {
/*
* jQuery OwlCarousel v1.15
*
*
*/
// Object.create function
if ( typeof Object.create !== 'function' ) {
Object.create = function( obj ) {
function F() {};
F.prototype = obj;
return new F();
};
}
(function( $, window, document, undefined ) {
var Carousel = {
init :function(options, el){
var base = this;
base.options = $.extend({}, $.fn.owlCarousel.options, options);
var elem = el;
var $elem = $(el);
base.$elem = $elem;
base.baseClass();
//Hide and get Heights
base.$elem
.css({opacity: 0,
"display":"block"})
base.checkTouch();
base.support3d();
base.wrapperWidth = 0;
base.currentSlide = 0; //Starting Position
base.userItems = $elem.children();
base.itemsAmount = base.userItems.length;
base.wrapItems();
base.owlItems = base.$elem.find(".owl-item");
base.owlWrapper = base.$elem.find(".owl-wrapper");
base.orignalItems = base.options.items;
base.playDirection = "next";
base.onstartup = true;
//setTimeout(function(){
base.updateVars();
//},0);
},
baseClass : function(){
var base = this;
var hasBaseClass = base.$elem.hasClass(base.options.baseClass);
var hasThemeClass = base.$elem.hasClass(base.options.theme);
if(!hasBaseClass){
base.$elem.addClass(base.options.baseClass);
}
if(!hasThemeClass){
base.$elem.addClass(base.options.theme);
}
},
updateSize : function(){
var base = this;
var width = $(window).width();
if(width > (base.options.itemsDesktop[0] || base.orignalItems) ){
base.options.items = base.orignalItems
}
if(width <= base.options.itemsDesktop[0] && base.options.itemsDesktop !== false){
base.options.items = base.options.itemsDesktop[1];
}
if(width <= base.options.itemsDesktopSmall[0] && base.options.itemsDesktopSmall !== false){
base.options.items = base.options.itemsDesktopSmall[1];
}
if(width <= base.options.itemsTablet[0] && base.options.itemsTablet !== false){
base.options.items = base.options.itemsTablet[1];
}
if(width <= base.options.itemsMobile[0] && base.options.itemsMobile !== false){
base.options.items = base.options.itemsMobile[1];
}
},
updateVars : function(){
var base = this;
if(base.options.responsive === true){
base.updateSize();
}
base.calculateAll();
//Only on startup
if(base.onstartup === true){
base.buildControlls();
if(base.options.responsive === true){
base.response();
}
base.moveEvents();
base.play();
base.$elem.animate({opacity: 1});
base.onstartup = false;
}
base.updatePagination();
},
response : function(){
var base = this,
width,
smallDelay;
$(window).resize(function(){
if(base.options.autoPlay !== false){
clearInterval(base.myInterval);
}
clearTimeout(smallDelay)
smallDelay = setTimeout(function(){
base.update();
},200);
})
},
update : function(){
var base = this;
base.updateVars();
if(base.support3d === true){
if(base.positionsInArray[base.currentSlide] > base.maximumPixels){
base.transition3d(base.positionsInArray[base.currentSlide]);
} else {
base.transition3d(0);
base.currentSlide = 0 //in array
}
} else{
if(base.positionsInArray[base.currentSlide] > base.maximumPixels){
base.css2slide(base.positionsInArray[base.currentSlide]);
} else {
base.css2slide(0);
base.currentSlide = 0 //in array
}
}
if(base.options.autoPlay !== false){
base.play();
}
},
wrapItems : function(){
var base = this;
base.userItems.wrapAll("<div class=\"owl-wrapper\">").wrap("<div class=\"owl-item\"></div>");
},
appendItemsSizes : function(){
var base = this;
var roundPages = 0;
var lastItem = base.itemsAmount - base.options.items
base.owlItems.each(function(index){
$(this)
.css({"width": base.itemWidth})
.data("owl-item",Number(index));
if(index % base.options.items === 0 || index === lastItem){
if(!(index > lastItem)){
roundPages +=1;
}
}
$(this).data("owl-roundPages",roundPages);
base.wrapperWidth = base.wrapperWidth+ base.itemWidth
})
},
appendWrapperSizes : function(){
var base = this;
base.owlWrapper.css({
//add one more pixel to fix ie9 bug
"width": base.wrapperWidth+1,
"left": 0
});
},
calculateAll : function(){
var base = this;
base.calculateWidth();
base.appendItemsSizes();
base.appendWrapperSizes();
base.loops();
base.max();
},
calculateWidth : function(){
var base = this;
base.itemWidth = Math.round(base.$elem.width()/base.options.items)
},
max : function(){
var base = this;
base.maximumSlide = base.itemsAmount - base.options.items;
var maximum = (base.itemsAmount * base.itemWidth) - base.options.items * base.itemWidth;
maximum = maximum * -1
base.maximumPixels = maximum;
return maximum;
},
min : function(){
return 0;
},
loops : function(){
var base = this;
base.positionsInArray = [0];
var elWidth = 0;
for(var i = 0; i<base.itemsAmount; i++){
elWidth += base.itemWidth;
base.positionsInArray.push(-elWidth)
}
},
buildControlls : function(){
var base = this;
if(base.options.navigation === true || base.options.pagination === true){
base.owlControlls = $("<div class=\"owl-controlls\"/>").appendTo(base.$elem)
}
if (base.isTouch === false){
base.owlControlls.addClass("clickable")
}
if(base.options.pagination === true){
base.buildPagination();
}
if(base.options.navigation === true){
base.buildButtons();
}
},
buildButtons : function(){
var base = this;
var buttonsWrapper = $("<div class=\"owl-buttons\"/>")
base.owlControlls.append(buttonsWrapper)
base.buttonPrev = $("<div/>",{
"class" : "owl-prev",
"text" : base.options.navigationText[0] || ""
});
base.buttonNext = $("<div/>",{
"class" : "owl-next",
"text" : base.options.navigationText[1] || ""
});
buttonsWrapper
.append(base.buttonPrev)
.append(base.buttonNext);
buttonsWrapper.on( base.getEvent() , "div[class^=\"owl\"]", function(event){
event.preventDefault();
if($(this).hasClass('owl-next')){
base.next();
} else{
base.prev();
}
})
//Add 'disable' class
base.checkNavigation();
},
getEvent : function(){
var base = this;
if (base.isTouch === true){
return "touchstart.owlControlls"
} else {
return "click.owlControlls"
}
},
buildPagination : function(){
var base = this;
base.paginationWrapper = $("<div class=\"owl-pagination\"/>");
base.owlControlls.append(base.paginationWrapper);
base.paginationWrapper.on(base.getEvent(), ".owl-page", function(event){
event.preventDefault();
if(Number($(this).data("owl-page")) !== base.currentSlide){
base.goTo( Number($(this).data("owl-page")), true)
}
});
base.updatePagination();
},
updatePagination : function(){
var base = this;
if(base.options.pagination === false){
return false;
}
base.paginationWrapper.html("");
var counter = 0;
var lastPage = base.itemsAmount - base.itemsAmount % base.options.items
for(var i = 0; i<base.itemsAmount; i++){
if(i % base.options.items === 0){
counter +=1
if(lastPage === i){
var lastItem = base.itemsAmount - base.options.items
}
var paginationButton = $("<div/>",{
"class" : "owl-page"
});
var paginationButtonInner = $("<span></span>",{
"text": base.options.paginationNumbers === true ? counter : "",
"class": base.options.paginationNumbers === true ? "owl-numbers" : ""
});
paginationButton.append(paginationButtonInner)
paginationButton.data("owl-page",lastPage === i ? lastItem : i);
paginationButton.data("owl-roundPages",counter);
base.paginationWrapper.append(paginationButton)
}
}
base.checkPagination();
},
checkPagination : function(arg){
var base = this;
base.paginationWrapper.find(".owl-page").each(function(i,v){
if($(this).data("owl-roundPages") === $(base.owlItems[base.currentSlide]).data("owl-roundPages") ){
//Subject to discuss
//if($(this).data("owl-page") == base.currentSlide){
base.paginationWrapper
.find(".owl-page")
.removeClass("active")
//.removeAttr("disabled", "disabled");
//$(this).addClass("active").attr("disabled", "disabled");
$(this).addClass("active");
}
});
},
checkNavigation : function(){
var base = this;
if(base.currentSlide === 0){
base.buttonPrev.addClass('disabled');
base.buttonNext.removeClass('disabled');
} else if (base.currentSlide === base.maximumSlide){
base.buttonPrev.removeClass('disabled');
base.buttonNext.addClass('disabled');
} else if(base.currentSlide !== 0 && base.currentSlide !== base.maximumSlide){
base.buttonPrev.removeClass('disabled');
base.buttonNext.removeClass('disabled');
}
},
destroyControlls : function(){
var base = this;
if(base.owlControlls){
base.owlControlls.remove();
}
},
next : function(speed){
var base = this;
base.currentSlide += 1;
if(base.currentSlide > base.maximumSlide){
base.currentSlide = base.maximumSlide;
return false;
}
base.goTo(base.currentSlide,speed);
},
prev : function(speed){
var base = this;
base.currentSlide -= 1
if(base.currentSlide < 0){
base.currentSlide = 0;
return false;
}
base.goTo(base.currentSlide,speed);
},
goTo : function(position,pagination){
var base = this;
if(position >= base.maximumSlide){
position = base.maximumSlide
}
else if( position <= 0 ){
position = 0
}
base.currentSlide = position;
var goToPixel = base.positionsInArray[position];
if(base.support3d === true){
base.isCss3Finish = false;
if(pagination === true){
base.swapTransitionSpeed("paginationSpeed");
setTimeout(function() {
base.isCss3Finish = true;
}, base.options.paginationSpeed);
} else if(pagination === "goToFirst" ){
base.swapTransitionSpeed(base.options.goToFirstSpeed);
setTimeout(function() {
base.isCss3Finish = true;
}, base.options.goToFirstSpeed);
} else {
base.swapTransitionSpeed("slideSpeed");
setTimeout(function() {
base.isCss3Finish = true;
}, base.options.slideSpeed);
}
base.transition3d(goToPixel);
} else {
if(pagination === true){
base.css2slide(goToPixel, base.options.paginationSpeed);
} else if(pagination === "goToFirst" ){
base.css2slide(goToPixel, base.options.goToFirstSpeed);
} else {
base.css2slide(goToPixel, base.options.slideSpeed);
}
}
if(base.options.pagination === true){
base.checkPagination()
}
if(base.options.navigation === true){
base.checkNavigation()
}
if(base.options.autoPlay !== false){
base.play()
}
},
stop: function(){
var base = this;
base.options.autoPlay = false;
clearInterval(base.myInterval);
},
play : function(){
var base = this;
if(base.options.autoPlay === false){
return false;
}
clearInterval(base.myInterval);
base.myInterval = setInterval(function(){
if(base.currentSlide < base.maximumSlide && base.playDirection === "next"){
base.next(true);
} else if(base.currentSlide === base.maximumSlide){
if(base.options.goToFirst === true){
base.goTo(0,"goToFirst");
} else{
base.playDirection = "prev";
base.prev(true);
}
} else if(base.playDirection === "prev" && base.currentSlide > 0){
base.prev(true);
} else if(base.playDirection === "prev" && base.currentSlide === 0){
base.playDirection = "next";
base.next(true);
}
},base.options.autoPlay)
},
swapTransitionSpeed : function(action){
var base = this;
if(action === "slideSpeed"){
base.owlWrapper.css(base.addTransition(base.options.slideSpeed));
} else if(action === "paginationSpeed" ){
base.owlWrapper.css(base.addTransition(base.options.paginationSpeed));
} else if(typeof action !== "string"){
base.owlWrapper.css(base.addTransition(action));
}
},
addTransition : function(speed){
var base = this;
return {
"-webkit-transition": "all "+ speed +"ms ease",
"-moz-transition": "all "+ speed +"ms ease",
"-o-transition": "all "+ speed +"ms ease",
"transition": "all "+ speed +"ms ease"
}
},
removeTransition : function(){
return {
"-webkit-transition": "",
"-moz-transition": "",
"-o-transition": "",
"transition": ""
}
},
doTranslate : function(pixels){
return {
"-webkit-transform": "translate3d("+pixels+"px, 0px, 0px)",
"-moz-transform": "translate3d("+pixels+"px, 0px, 0px)",
"-o-transform": "translate3d("+pixels+"px, 0px, 0px)",
"-ms-transform": "translate3d("+pixels+"px, 0px, 0px)",
"transform": "translate3d("+pixels+"px, 0px,0px)"
};
},
transition3d : function(value){
var base = this;
base.owlWrapper.css(base.doTranslate(value));
},
css2move : function(value){
var base = this;
base.owlWrapper.css({"left" : value})
},
css2slide : function(value,speed){
var base = this;
base.isCssFinish = false;
base.owlWrapper.stop(true,true).animate({
"left" : value
}, {
duration : speed || base.options.slideSpeed ,
complete : function(){
base.isCssFinish = true;
}
})
},
support3d : function(){
var base = this;
var sTranslate3D = "translate3d(0px, 0px, 0px)";
var eTemp = document.createElement("div");
eTemp.style.cssText = " -moz-transform:" + sTranslate3D +
"; -ms-transform:" + sTranslate3D +
"; -o-transform:" + sTranslate3D +
"; -webkit-transform:" + sTranslate3D +
"; transform:" + sTranslate3D;
var rxTranslate = /translate3d\(0px, 0px, 0px\)/g;
var asSupport = eTemp.style.cssText.match(rxTranslate);
var bHasSupport = (asSupport !== null && asSupport.length === 1);
base.support3d = bHasSupport
return bHasSupport;
},
checkTouch : function(){
var base = this;
if ("ontouchstart" in document.documentElement)
{
base.isTouch = true;
} else {
base.isTouch = false;
}
},
//Touch
moveEvents : function(check){
var base = this,
offsetX = 0,
offsetY = 0,
baseElWidth = 0,
relativePos = 0,
minSwipe,
maxSwipe,
sliding;
var links = base.$elem.find('a');
base.isCssFinish = true;
var start = function(event){
if(base.isCssFinish === false){
return false;
}
if(base.isCss3Finish === false){
return false;
}
var oEvent = event.originalEvent,
pos = $(this).position();
base.newRelativeX = 0;
if(base.options.autoPlay !== false){
clearInterval(base.myInterval);
}
$(this)
.css(base.removeTransition())
base.newX = 0;
relativePos = pos.left;
if(base.isTouch === true){
offsetX = oEvent.touches[0].pageX - pos.left;
offsetY = oEvent.touches[0].pageY - pos.top;
} else {
$(this).addClass("grabbing");
offsetX = event.pageX - pos.left;
offsetY = event.pageY - pos.top;
$(document).on("mousemove.owl", move);
$(document).on("mouseup.owl", end);
}
sliding = false;
if(jQuery._data( base.$elem.get(0), "events" ).touchmove === undefined){
base.$elem.on("touchmove.owl", ".owl-wrapper", move);
}
};
var move = function(event){
var oEvent = event.originalEvent;
if(base.isTouch === true){
base.newX = oEvent.touches[0].pageX - offsetX;
base.newY = oEvent.touches[0].pageY - offsetY;
} else {
base.newX = event.pageX - offsetX;
}
base.newRelativeX = base.newX - relativePos
if(base.newRelativeX > 8 || base.newRelativeX < -8 ){
event.preventDefault();
sliding = true;
}
if( (base.newY > 10 || base.newY < -10) && sliding === false ){
base.$elem.off("touchmove.owl");
}
minSwipe = function(){
return base.newRelativeX / 5;
}
maxSwipe = function(){
return base.maximumPixels + base.newRelativeX / 5;
}
//Calculate min and max
base.newX = Math.max(Math.min( base.newX, minSwipe() ), maxSwipe() );
if(base.support3d === true){
base.transition3d(base.newX);
} else {
base.css2move(base.newX);
}
};
var end = function(event){
if(base.isTouch === true){
var $this = $(this);
} else{
var $this = base.owlWrapper
$this.removeClass("grabbing")
$(document).off("mousemove.owl");
$(document).off("mouseup.owl");
}
if(base.newX !== 0){
var newPosition = base.getNewPosition();
base.goTo(newPosition)
} else {
if(links.length>0){
links.off('click.owlClick');
}
}
};
if(base.isTouch === true){
base.$elem.on("touchstart.owl", ".owl-wrapper", start);
base.$elem.on("touchend.owl", ".owl-wrapper", end);
}else{
links.on('click.owlClick', function(event){event.preventDefault();})
base.$elem.on("mousedown.owl", ".owl-wrapper", start);
base.$elem.on('dragstart.owl',"img", function(event) { event.preventDefault();});
base.$elem.bind('mousedown.disableTextSelect', function() {return false;});
}
},
clearEvents : function(){
var base = this;
base.$elem.off('.owl');
$(document).off('.owl');
},
getNewPosition : function(){
var base = this,
newPosition;
//Calculate new Position
var newPosition = base.improveClosest();
if(newPosition>base.maximumSlide){
base.currentSlide = base.maximumSlide;
newPosition = base.maximumSlide;
} else if( base.newX >=0 ){
newPosition = 0;
base.currentSlide = 0;
}
return newPosition;
},
improveClosest : function(){
var base = this;
var array = base.positionsInArray;
var goal = base.newX;
var closest = null;
$.each(array, function(i,v){
if( goal - (base.itemWidth/20) > array[i+1] && goal - (base.itemWidth/20)< v && base.moveDirection() === "left") {
closest = v;
base.currentSlide = i;
}
else if (goal + (base.itemWidth/20) < v && goal + (base.itemWidth/20) > array[i+1] && base.moveDirection() === "right"){
closest = array[i+1];
base.currentSlide = i+1;
}
});
return base.currentSlide;
},
moveDirection : function(){
var base = this,
direction;
if(base.newRelativeX < 0 ){
direction = "right"
base.playDirection = "next"
} else {
direction = "left"
base.playDirection = "prev"
}
return direction
},
//unused
closest : function(a,x){
var base = this;
var theArray = a;
var goal = x;
var closestItem = 0;
var closest = null;
$.each(theArray, function(i,v){
if (closest === null || Math.abs(v - goal) < Math.abs(closest - goal)) {
closest = v;
}
});
return closest;
}
};
$.fn.owlCarousel = function( options ) {
return this.each(function() {
var carousel = Object.create( Carousel );
carousel.init( options, this );
$.data( this, 'owlCarousel', carousel );
});
};
$.fn.owlCarousel.options = {
slideSpeed : 200,
paginationSpeed : 800,
autoPlay : false,
goToFirst : true,
goToFirstSpeed : 1000,
navigation : false,
navigationText : ["prev","next"],
pagination : true,
paginationNumbers: false,
responsive: true,
items : 5,
itemsDesktop : [1199,4],
itemsDesktopSmall : [979,3],
itemsTablet: [768,2],
itemsMobile : [479,1],
baseClass : "owl-carousel",
theme : "owl-theme"
};
})( jQuery, window, document );
$("#owl-demo").owlCarousel({
navigation : true
});
});
