This is a continuation of my previous Owl Carousel post (HERE). Today we are going to be making this carousel our own! Go from bland to Bam!
I wanted my splash page to be a little different from the rest of SD, a little flashy, a sparkly little nougat. So I did some things, changed some colours, etc. But I still need to link to my content, and show it off a little bit right? So I could have a plain list, some standard cards like my posts page, or I could use that fancy Owl Carousel thing I talked up before!
Here is the standard Owl Carousel Demo on their page;
And these are just the standard cards I'm currently using;
So the big things we’ll be using here are JS and JQuery to be switching up some CSS styles. Easy right? Maybe. There is maybe a much easier way to do this. This is my way. I still need to refactor my code. That’ll be another post. Don’t worry. I gotchoo.
We got a carousel. A regular old Owl Carousel. Just the base model;
<div class="owl-carousel">
<div class="card h-25 m-2 p-1 bg-grey"> Your Content<br><br><br><br> </div>
<div class="card h-25 m-2 p-1 bg-info"> Your Content<br><br><br><br> </div>
<div class="card h-25 m-2 p-1 bg-white"> Your Content<br><br><br><br> </div>
<div class="card h-25 m-2 p-1 bg-danger"> Your Content<br><br><br><br> </div>
</div>
<script>
$(".owl-carousel").owlCarousel();
</script> With a little bootstrap CSS to tell them apart. It should look like the basic picture up there, and the generated HTML looks like this;
<div class="owl-carousel owl-loaded owl-drag"> <div class="owl-stage-outer"> <div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: all 0s ease 0s; width: 919px;"> <div class="owl-item active" style="width: 229.667px;"> <div class="card h-25 m-2 p-1 bg-grey"> Your Content<br><br><br><br></div> </div> <div class="owl-item active" style="width: 229.667px;"> <div class="card h-25 m-2 p-1 bg-info"> Your Content<br><br><br><br></div> </div> <div class="owl-item active" style="width: 229.667px;"> <div class="card h-25 m-2 p-1 bg-white"> Your Content<br><br><br><br></div> </div> <div class="owl-item" style="width: 229.667px;"> <div class="card h-25 m-2 p-1 bg-danger"> Your Content<br><br><br><br></div> </div> </div> </div> <div class="owl-nav disabled"> <button type="button" role="presentation" class="owl-prev"><span aria-label="Previous">‹</span></button> <button type="button" role="presentation" class="owl-next"><span aria-label="Next">›</span></button> </div> <div class="owl-dots"> <button role="button" class="owl-dot active"><span></span></button> <button role="button" class="owl-dot"><span></span></button> </div> </div>
Our divs are now wrapped in several other divs, and nested inside an owl-item-active div. Neat! Now for my purposes I want three items on the carousel, with the middle one being bigger and with more info than the side ones… If only I could grab the middle card using JQuery! But alas there is nothing there that's different than the others!
A Custom Carousel
We are going to need a special carousel, but Owl has all the functionality we need;
$("#blog-carousel").owlCarousel({
items: 3,
loop: true,
center: true,
margin: 10,
slideSpeed: 7000,
responsiveClass: true,
responsive: {
0: {
items: 1,
},
500: {
items: 3,
},
5000: {
items: 3,
}
}
}) So we initialise our carousel and pass it some options;
- Items is the standard amount of items the carousel holds
- Loop means the carousel will circle infinitely
- Center (this is the important one!) means that there will always be one card in the center of the carousel, even on odd numbered carousels
- Margin is the margin-right of the carousel items
- Slide Speed is for the transitions
- ResponsiveClass is actually how you can set break points for the amount of cards you want to show; ie. Show three items above 500px width, one item below that.
This does something very important for us, looking at the HTML you’ll see something like this;
<div class="owl-item cloned" style="width: 223px; margin-right: 10px;"> <div class="card h-25 m-2 p-1 bg-danger"> Your Content<br><br><br><br></div> </div> <div class="owl-item active" style="width: 223px; margin-right: 10px;"> <div class="card h-25 m-2 p-1 bg-info"> Your Content<br><br><br><br></div> </div> <div class="owl-item active" style="width: 223px; margin-right: 10px;"> <div class="card h-25 m-2 p-1 bg-info"> Your Content<br><br><br><br></div> </div> <div class="owl-item active center" style="width: 223px; margin-right: 10px;"> <div class="card h-25 m-2 p-1 bg-white"> Your Content<br><br><br><br></div> </div> <div class="owl-item active" style="width: 223px; margin-right: 10px;"> <div class="card h-25 m-2 p-1 bg-danger"> Your Content<br><br><br><br></div> </div>
Owl carousel has cloned our cards to allow for the looping function, but also given the centre card a new class! CENTER ! Now we can grab it using JQuery and style it.
Some More Javascript
So we are going to need to add some classes to all of our new cards when we load the page! Easy! Right below your initialisation, add some lines of Jquery similar to;
$("#blog-carousel").find(".owl-item").removeClass('main-carousel');
$("#blog-carousel").find(".owl-item").addClass('small-carousel');
$("#blog-carousel").find(".center").removeClass('small-carousel');
$("#blog-carousel").find(".center").addClass('main-carousel');Perfect! This take’s all of the .owl-item divs and gives them a class, then finds the center div, removes the small-carousel class and adds the main-carousel class! Just add styling as you see fit!
.main-carousel{
width: 120%;
font-weight: bold;
etc…
}
.small-carousel{
width: 90%;
font-weight: 90%;
etc…
} Next post we’ll go over the events that allow you to change the styling when the carousel is moved, as this is just going to give you one big card and the rest small.
Comments (Coming Soon)