Events Carousel - Small
<h2 class="component-title">Carousel Title</h2>
<!-- Mobile -->
<div class="hidden-lg">
<div class="event-small-items">
<div>
<a href="#" class="event-small">
<div class="event-small__media">
<img src="/images/photos/1.jpg" alt="" class="event-small__img img-responsive" />
</div>
<div class="event-small__body">
<h3 class="event-small__title">Event 1: Lorem ipsum, dolor sit amet consectetur adipisicing elit</h3>
<div class="event-small__meta">
<p>
Monday, MMM DD<br />
00:00 AM - 00:00 AM<br />
Location: Virtual
</p>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="event-small">
<div class="event-small__media">
<img src="/images/photos/2.jpg" alt="" class="event-small__img img-responsive" />
</div>
<div class="event-small__body">
<h3 class="event-small__title">Event 2: Lorem ipsum, dolor sit amet consectetur adipisicing elit</h3>
<div class="event-small__meta">
<p>
Monday, MMM DD<br />
00:00 AM - 00:00 AM<br />
Location: Virtual
</p>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="event-small">
<div class="event-small__media"></div>
<div class="event-small__body">
<h3 class="event-small__title">No Image Event 3: Lorem ipsum dolor sit</h3>
<div class="event-small__meta">
<p>
Monday, MMM DD, 00:00 AM - 00:00 AM<br />
Location: Virtual
</p>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="event-small">
<div class="event-small__media">
<img src="/images/photos/4.jpg" alt="" class="event-small__img img-responsive" />
</div>
<div class="event-small__body">
<h3 class="event-small__title">Event 4: Lorem ipsum, dolor sit amet consectetur adipisicing elit</h3>
<div class="event-small__meta">
<p>
Monday, MMM DD<br />
00:00 AM - 00:00 AM<br />
Location: Virtual
</p>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="event-small">
<div class="event-small__media">
<img src="/images/photos/5.jpg" alt="" class="event-small__img img-responsive" />
</div>
<div class="event-small__body">
<h3 class="event-small__title">Event 5: Lorem ipsum, dolor sit amet consectetur adipisicing elit</h3>
<div class="event-small__meta">
<p>
Monday, MMM DD<br />
00:00 AM - 00:00 AM<br />
Location: Virtual
</p>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="event-small">
<div class="event-small__media">
<img src="/images/photos/6.jpg" alt="" class="event-small__img img-responsive" />
</div>
<div class="event-small__body">
<h3 class="event-small__title">Event 6: Lorem ipsum, dolor sit amet consectetur adipisicing elit</h3>
<div class="event-small__meta">
<p>
Monday, MMM DD<br />
00:00 AM - 00:00 AM<br />
Location: Virtual
</p>
</div>
</div>
</a>
</div>
</div>
<div class="text-center">
<a href="#" class="btn btn-link"
>See More
<div class="fa fa-plus"></div>
</a>
</div>
</div>
<!-- Desktop -->
<div class="visible-lg-block">
<div class="events-small-carousel carousel js-events-small-carousel">
<div class="event-small-items js-event-small-items">
<div>
<a href="#" class="event-small">
<div class="event-small__media">
<img src="/images/photos/1.jpg" alt="" class="event-small__img img-responsive" />
</div>
<div class="event-small__body">
<h3 class="event-small__title">Event 1: Lorem ipsum dolor sit</h3>
<div class="event-small__meta">
<p>
Monday, MMM DD, 00:00 AM - 00:00 AM<br />
Location: Virtual
</p>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="event-small">
<div class="event-small__media">
<img src="/images/photos/2.jpg" alt="" class="event-small__img img-responsive" />
</div>
<div class="event-small__body">
<h3 class="event-small__title">Event 2: Lorem ipsum dolor sit</h3>
<div class="event-small__meta">
<p>
Monday, MMM DD, 00:00 AM - 00:00 AM<br />
Location: Virtual
</p>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="event-small">
<div class="event-small__body">
<h3 class="event-small__title">No Image Event 3: Lorem ipsum dolor sit</h3>
<div class="event-small__meta">
<p>
Monday, MMM DD, 00:00 AM - 00:00 AM<br />
Location: Virtual
</p>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="event-small">
<div class="event-small__media">
<img src="/images/photos/4.jpg" alt="" class="event-small__img img-responsive" />
</div>
<div class="event-small__body">
<h3 class="event-small__title">Event 4: Lorem ipsum dolor sit</h3>
<div class="event-small__meta">
<p>
Monday, MMM DD, 00:00 AM - 00:00 AM<br />
Location: Virtual
</p>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="event-small">
<div class="event-small__media">
<img src="/images/photos/5.jpg" alt="" class="event-small__img img-responsive" />
</div>
<div class="event-small__body">
<h3 class="event-small__title">Event 5: Lorem ipsum dolor sit</h3>
<div class="event-small__meta">
<p>
Monday, MMM DD, 00:00 AM - 00:00 AM<br />
Location: Virtual
</p>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="event-small">
<div class="event-small__media">
<img src="/images/photos/6.jpg" alt="" class="event-small__img img-responsive" />
</div>
<div class="event-small__body">
<h3 class="event-small__title">Event 6: Lorem ipsum dolor sit</h3>
<div class="event-small__meta">
<p>
Monday, MMM DD, 00:00 AM - 00:00 AM<br />
Location: Virtual
</p>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="event-small">
<div class="event-small__media">
<img src="/images/photos/7.jpg" alt="" class="event-small__img img-responsive" />
</div>
<div class="event-small__body">
<h3 class="event-small__title">Event 7: Lorem ipsum dolor sit</h3>
<div class="event-small__meta">
<p>
Monday, MMM DD, 00:00 AM - 00:00 AM<br />
Location: Virtual
</p>
</div>
</div>
</a>
</div>
<div>
<a href="#" class="event-small">
<div class="event-small__media">
<img src="/images/photos/8.jpg" alt="" class="event-small__img img-responsive" />
</div>
<div class="event-small__body">
<h3 class="event-small__title">Event 8: Lorem ipsum dolor sit</h3>
<div class="event-small__meta">
<p>
Monday, MMM DD, 00:00 AM - 00:00 AM<br />
Location: Virtual
</p>
</div>
</div>
</a>
</div>
</div>
</div>
</div>
.events-small-carousel {
position: relative;
margin-bottom: 5.6rem;
}
.event-small {
display: flex;
margin-bottom: 2.4rem;
@media (min-width: $breakpoint-desktop) {
margin-bottom: 0;
}
&:hover {
text-decoration: none;
}
&:focus {
outline: 0;
}
}
.event-small__media {
flex: 0 0 12.8rem;
}
.event-small__body {
padding-left: 1.6rem;
padding-right: 1.6rem;
}
.event-small__title {
@include typeBody(true);
color: $color-base-blue;
margin: 0 0 1.2rem;
.event-small:hover & {
color: $color-blue-medium;
}
}
.event-small__meta {
@include typeCaption;
color: $color-grey-dark;
}
$(document).ready(function () {
$(".js-events-small-carousel").each(function (index, elem) {
$carousel = $(this);
$cards = $carousel.find(".js-event-small-items");
$cards.slick({
arrows: false,
centerMode: true,
dots: true,
infinite: true,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 1,
responsive: [
{
breakpoint: 767,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
},
},
{
breakpoint: 1199,
settings: {
arrows: true,
centerMode: false,
slidesToShow: 3,
slidesToScroll: 3,
},
},
],
});
});
});