Skip to content

Instantly share code, notes, and snippets.

@remmi11

remmi11/index.html

Created October 12, 2018 20:31
Show Gist options
  • Save remmi11/a736026d4ecea34fb0314367813b85eb to your computer and use it in GitHub Desktop.
Save remmi11/a736026d4ecea34fb0314367813b85eb to your computer and use it in GitHub Desktop.
Download ZIP
Owl Carousel - Active and Center items
Raw
index.html
<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>
Raw
script.js
$('.owl-carousel').owlCarousel({
autoplay: true,
center: true,
loop: true,
nav: true,
});
Raw
scripts
<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>
Raw
style.css
.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;
}
Raw
styles
<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" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment