Events Carousel
<div class="container">
<div class="row">
<div class="col-xs-12">
<h2 class="component-title">Carousel Title</h2>
</div>
</div>
</div>
<div class="events-carousel carousel carousel--grey">
<div class="events-container">
<div class="events-carousel js-events-carousel">
<div class="event-cards js-events-cards">
<a href="#" class="event-card">
<div class="event-wrap">
<div class="event-card__header">
<img src="/images/photos/1.jpg" alt="" class="event-card__media img-responsive" />
</div>
<div class="event-card__body">
<h3 class="event-card__title">Lorem ipsum dolor sit</h3>
<div class="event-card__actions">
<span class="event-card__action"
>See all
<i class="fa fa-long-arrow-right"></i>
</span>
</div>
</div>
</div>
</a>
<a href="#" class="event-card">
<div class="event-wrap">
<div class="event-card__header">
<img src="/images/photos/2.jpg" alt="" class="event-card__media img-responsive" />
</div>
<div class="event-card__body">
<h3 class="event-card__title">Lorem ipsum onelongwordtowrap</h3>
<div class="event-card__actions">
<span class="event-card__action"
>See all
<i class="fa fa-long-arrow-right"></i>
</span>
</div>
</div>
</div>
</a>
<a href="#" class="event-card">
<div class="event-wrap">
<div class="event-card__body">
<h4 class="event-card__date">JUL 23</h4>
<div class="event-card__category">Event Category</div>
<h3 class="event-card__title">Lorem ipsum onelongwordtowrap</h3>
<div class="event-card__details">
<div>Monday, MMM DD</div>
<div>00:00AM - 00:00AM</div>
<div>Location: Virtual and in person</div>
<div>XX people interested</div>
</div>
</div>
</div>
</a>
<a href="#" class="event-card">
<div class="event-wrap">
<div class="event-card__body">
<h4 class="event-card__date">JUL 25</h4>
<div class="event-card__category">Event Category</div>
<h3 class="event-card__title">Lorem ipsum dolor sit</h3>
<div class="event-card__details">
<div>Monday, MMM DD</div>
<div>00:00AM - 00:00AM</div>
<div>Location: Virtual and in person</div>
<div>XX people interested</div>
</div>
</div>
</div>
</a>
<a href="#" class="event-card">
<div class="event-wrap">
<div class="event-card__body">
<h4 class="event-card__date">JUL 27</h4>
<div class="event-card__category">Event Category</div>
<h3 class="event-card__title">Lorem ipsum dolor sit</h3>
<div class="event-card__details">
<div>Monday, MMM DD</div>
<div>00:00AM - 00:00AM</div>
<div>Location: Virtual and in person</div>
<div>XX people interested</div>
</div>
</div>
</div>
</a>
<a href="#" class="event-card">
<div class="event-wrap">
<div class="event-card__body">
<h4 class="event-card__date">JUL 28</h4>
<div class="event-card__category">Event Category</div>
<h3 class="event-card__title">Lorem ipsum dolor sit</h3>
<div class="event-card__details">
<div>Monday, MMM DD</div>
<div>00:00AM - 00:00AM</div>
<div>Location: Virtual and in person</div>
<div>XX people interested</div>
</div>
</div>
</div>
</a>
<a href="#" class="event-card">
<div class="event-wrap">
<div class="event-card__body">
<h4 class="event-card__date">JUL 01</h4>
<div class="event-card__category">Event Category</div>
<h3 class="event-card__title">Lorem ipsum dolor sit</h3>
<div class="event-card__details">
<div>Monday, MMM DD</div>
<div>00:00AM - 00:00AM</div>
<div>Location: Virtual and in person</div>
<div>XX people interested</div>
</div>
</div>
</div>
</a>
<a href="#" class="event-card">
<div class="event-wrap">
<div class="event-card__body">
<h4 class="event-card__date">JUL 03</h4>
<div class="event-card__category">Event Category</div>
<h3 class="event-card__title">Lorem ipsum dolor sit</h3>
<div class="event-card__details">
<div>Monday, MMM DD</div>
<div>00:00AM - 00:00AM</div>
<div>Location: Virtual and in person</div>
<div>XX people interested</div>
</div>
</div>
</div>
</a>
<a href="#" class="event-card">
<div class="event-wrap">
<div class="event-card__body">
<h4 class="event-card__date">JUL 05</h4>
<div class="event-card__category">Event Category</div>
<h3 class="event-card__title">Lorem ipsum dolor sit</h3>
<div class="event-card__details">
<div>Monday, MMM DD</div>
<div>00:00AM - 00:00AM</div>
<div>Location: Virtual and in person</div>
<div>XX people interested</div>
</div>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
.events-carousel {
position: relative;
background-color: $color-base-grey;
margin-bottom: 4.8rem;
}
.events-container {
max-width: 1170px;
margin: 0 auto;
}
.event-cards {
padding-bottom: 4.8rem;
}
.event-card {
width: 19.2rem;
position: relative;
box-sizing: border-box;
margin: 0 calc(3.2rem - 1px);
display: block;
background-color: $color-base-white;
color: $color-blue-dark;
border: 1px solid $color-grey-dark;
border-top: 0.4rem solid $color-blue-medium;
transition: all 0.1s ease-in-out;
&:hover {
background-color: $color-blue-dark;
color: $color-base-white;
text-decoration: none;
}
&::before,
&::after {
content: "";
position: absolute;
top: -4px;
height: 16rem;
width: 3.2rem;
}
&::before {
left: 0;
background-color: rgba($color-grey-medium, 0.5);
transform: translateX(-3.2rem);
}
&::after {
right: 0;
background-color: $color-grey-medium;
transform: translateX(3.2rem);
}
}
.event-wrap {
display: flex;
flex-direction: column;
min-height: 25.6rem;
}
.event-card__body {
padding: 0.4rem;
flex: 1;
display: flex;
flex-direction: column;
}
.event-card__date {
@include typeDisplayMedium(true);
}
.event-card__category {
@include typeCaption;
color: $color-blue-medium;
.event-card:hover & {
color: $color-blue-light;
}
}
.event-card__title {
@include typeHeadline(true);
flex: 1;
display: block;
margin-bottom: 1.2rem;
overflow-wrap: break-word;
}
.event-card__details {
@include typeCaption;
}
$(document).ready(function () {
$(".js-events-carousel").each(function (index, elem) {
var $carousel = $(this);
var $cards = $carousel.find(".js-events-cards");
$cards.slick({
arrows: false,
centerMode: true,
centerPadding: "3.2rem",
dots: true,
infinite: true,
mobileFirst: true,
responsive: [
{
breakpoint: 767,
settings: {
slidesToScroll: 3,
slidesToShow: 3,
},
},
{
breakpoint: 1199,
settings: {
centerMode: false,
arrows: true,
slidesToScroll: 5,
slidesToShow: 5,
},
},
],
});
});
});