"Syns OwlCarousel and Masonry Layout "
Bootstrap 4.1.1 Snippet by mehedidb

1
2
3
4
5
6
7
8
9
10
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<div class="container">
<div class="row">
<h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
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
function synsOwlCarousel() {
var owl = $('.post-slider-4-slider');
var isotopeItem = $('.isotope-grid > .grid-item');
if(owl.length > 0) {
owl.owlCarousel({
margin: 0,
autoplay: true,
autoplayTimeout: 500000,
autoplayHoverPause: true,
loop: true,
nav: false,
dots: true,
center:false,
responsive:{
0: {
items: 1
}
}
});
isotopeItem.each(function(index, el) {
var self = $(this).children().find('.overlay');
self.on('click', function(event) {
event.preventDefault();
owl.trigger('to.owl.carousel', index);
});
});
$(window).on('load', function() {
isotopeItem.each(function(index, el) {
if(index === 0) {
$(this).addClass('grid-item-active');
}
else {
$(this).removeClass('grid-item-active');
}
});
});
owl.on('changed.owl.carousel', function(e) {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: