Owl Carousel 2 with 2 synced carousel and synced navigation loop, autoplay are enabled, define number of item globaly, Added inline SVG arrows for the the first carousel prev/next navigation
A Pen by Teguh Badru Salam on CodePen.
<div id="sync1" 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> | |
<div id="sync2" 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> |
Owl Carousel 2 with 2 synced carousel and synced navigation loop, autoplay are enabled, define number of item globaly, Added inline SVG arrows for the the first carousel prev/next navigation
A Pen by Teguh Badru Salam on CodePen.
$(document).ready(function() { | |
var sync1 = $("#sync1"); | |
var sync2 = $("#sync2"); | |
var slidesPerPage = 4; | |
var syncedSecondary = true; | |
sync1.owlCarousel({ | |
items : 1, | |
slideSpeed : 2000, | |
nav: true, | |
autoplay: true, | |
dots: true, | |
loop: true, | |
responsiveRefreshRate : 200, | |
navText: ['<svg width="100%" height="100%" viewBox="0 0 11 20"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M9.554,1.001l-8.607,8.607l8.607,8.606"/></svg>','<svg width="100%" height="100%" viewBox="0 0 11 20" version="1.1"><path style="fill:none;stroke-width: 1px;stroke: #000;" d="M1.054,18.214l8.606,-8.606l-8.606,-8.607"/></svg>'], | |
}).on('changed.owl.carousel', syncPosition); | |
sync2 | |
.on('initialized.owl.carousel', function () { | |
sync2.find(".owl-item").eq(0).addClass("current"); | |
}) | |
.owlCarousel({ | |
items : slidesPerPage, | |
dots: true, | |
nav: true, | |
smartSpeed: 200, | |
slideSpeed : 500, | |
slideBy: slidesPerPage, | |
responsiveRefreshRate : 100 | |
}).on('changed.owl.carousel', syncPosition2); | |
function syncPosition(el) { | |
var count = el.item.count-1; | |
var current = Math.round(el.item.index - (el.item.count/2) - .5); | |
if(current < 0) { | |
current = count; | |
} | |
if(current > count) { | |
current = 0; | |
} | |
//end block | |
sync2 | |
.find(".owl-item") | |
.removeClass("current") | |
.eq(current) | |
.addClass("current"); | |
var onscreen = sync2.find('.owl-item.active').length - 1; | |
var start = sync2.find('.owl-item.active').first().index(); | |
var end = sync2.find('.owl-item.active').last().index(); | |
if (current > end) { | |
sync2.data('owl.carousel').to(current, 100, true); | |
} | |
if (current < start) { | |
sync2.data('owl.carousel').to(current - onscreen, 100, true); | |
} | |
} | |
function syncPosition2(el) { | |
if(syncedSecondary) { | |
var number = el.item.index; | |
sync1.data('owl.carousel').to(number, 100, true); | |
} | |
} | |
sync2.on("click", ".owl-item", function(e){ | |
e.preventDefault(); | |
var number = $(this).index(); | |
sync1.data('owl.carousel').to(number, 300, true); | |
}); | |
$('.owl-next').click(function(){ | |
$('.owl-carousel').trigger('stop.owl.autoplay'); | |
}); | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script> |
#sync1 { | |
.item { | |
background: gold; | |
padding: 80px 0px; | |
margin: 5px; | |
color: #FFF; | |
-webkit-border-radius: 3px; | |
-moz-border-radius: 3px; | |
border-radius: 3px; | |
text-align: center; | |
} | |
} | |
#sync2 { | |
.item { | |
background: red; | |
padding: 10px 0px; | |
margin: 5px; | |
color: #FFF; | |
-webkit-border-radius: 3px; | |
-moz-border-radius: 3px; | |
border-radius: 3px; | |
text-align: center; | |
cursor: pointer; | |
h1 { | |
font-size: 18px; | |
} | |
} | |
.current .item{ | |
background: gold; | |
} | |
} | |
.owl-theme { | |
.owl-nav { | |
[class*='owl-'] { | |
transition: all .3s ease; | |
&.disabled:hover { | |
background-color: gold; | |
} | |
} | |
} | |
} | |
#sync1.owl-theme { | |
position: relative; | |
.owl-next, .owl-prev { | |
width: 22px; | |
height: 40px; | |
margin-top: -20px; | |
position: absolute; | |
top: 50%; | |
} | |
.owl-prev { | |
left: 10px; | |
} | |
.owl-next { | |
right: 10px; | |
} | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.carousel.min.css" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/assets/owl.theme.default.min.css" rel="stylesheet" /> |