https://stackoverflow.com/q/37388182/6263942
A Pen by Noah Huntington on CodePen.
<div class="owl-carousel"> | |
<div><img src="//placehold.it/300x150/936/fff/?text=1" alt=""></div> | |
<div><img src="//placehold.it/300x150/693/fff/?text=2" alt=""></div> | |
<div><img src="//placehold.it/300x150/369/fff/?text=3" alt=""></div> | |
<div><img src="//placehold.it/300x150/f63/fff/?text=4" alt=""></div> | |
</div> |
$('.owl-carousel').owlCarousel({ | |
autoplay: true, | |
center: true, | |
loop: true, | |
nav: true, | |
}); |
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2//2.0.0-beta.2.4/owl.carousel.min.js"></script> |
.owl-item.active > div:after { | |
content: 'active'; | |
} | |
.owl-item.center > div:after { | |
content: 'center'; | |
} | |
.owl-item.active.center > div:after { | |
content: 'active center'; | |
} | |
.owl-item > div:after { | |
font-family: sans-serif; | |
font-size: 24px; | |
font-weight: bold; | |
} |
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.carousel.min.css" rel="stylesheet" /> | |
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.2.4/assets/owl.theme.default.css" rel="stylesheet" /> |