Image Card Carousel
<div class="image-card-carousel js-image-card-carousel">
<div class="image-card-carousel__group">
<div class="image-card-carousel__title-group__main">
<h2 class="component-subtitle">IMAGE CARD CAROUSEL</h2>
</div>
<div class="image-card-carousel__actions">
<a href="#" class="btn btn-link js-toggle" data-active-content="See less <i class='fa fa-minus'></i>"
>See all
<i class="fa fa-plus"></i>
</a>
</div>
</div>
<!-- Carousel View -->
<div class="image-card-carousel__view is-active js-view">
<div class="image-card-carousel__carousel carousel carousel--minimal">
<div class="js-image-cards">
<!-- Image Card Slide 1 -->
<div class="image-card__slide">
<!-- Image Card 1 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Lorem ipsum dolor sit amet consectetur</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, alias.</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 1 -->
</div>
<!-- /Image Card Slide 1 -->
<!-- Image Card Slide 2 -->
<div class="image-card__slide">
<!-- Image Card 2 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Image Card</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut debitis harum mollitia corporis reiciendis id nihil quasi quos quaerat delectus!</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 2 -->
</div>
<!-- /Image Card Slide 2 -->
<!-- Image Card Slide 3 -->
<div class="image-card__slide">
<!-- Image Card 3 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Lorem ipsum dolor sit amet consectetur</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, alias.</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 3 -->
</div>
<!-- /Image Card Slide 3 -->
<!-- Image Card Slide 4 -->
<div class="image-card__slide">
<!-- Image Card 4 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Image Card</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut debitis harum mollitia corporis reiciendis id nihil quasi quos quaerat delectus!</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 4 -->
</div>
<!-- /Image Card Slide 4 -->
<!-- Image Card Slide 5 -->
<div class="image-card__slide">
<!-- Image Card 5 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Lorem ipsum dolor sit amet consectetur</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, alias.</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 5 -->
</div>
<!-- /Image Card Slide 5 -->
<!-- Image Card Slide 6 -->
<div class="image-card__slide">
<!-- Image Card 6 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Image Card</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut debitis harum mollitia corporis reiciendis id nihil quasi quos quaerat delectus!</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 6 -->
</div>
<!-- /Image Card Slide 6 -->
<!-- Image Card Slide 7 -->
<div class="image-card__slide">
<!-- Image Card 7 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Lorem ipsum dolor sit amet consectetur</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, alias.</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 7 -->
</div>
<!-- /Image Card Slide 7 -->
<!-- Image Card Slide 8 -->
<div class="image-card__slide">
<!-- Image Card 8 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Image Card</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut debitis harum mollitia corporis reiciendis id nihil quasi quos quaerat delectus!</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 8 -->
</div>
<!-- /Image Card Slide 8 -->
<!-- Image Card Slide 9 -->
<div class="image-card__slide">
<!-- Image Card 9 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Lorem ipsum dolor sit amet consectetur</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, alias.</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 9 -->
</div>
<!-- /Image Card Slide 9 -->
<!-- Image Card Slide 10 -->
<div class="image-card__slide">
<!-- Image Card 10 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Image Card</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut debitis harum mollitia corporis reiciendis id nihil quasi quos quaerat delectus!</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 10 -->
</div>
<!-- /Image Card Slide 10 -->
<!-- Image Card Slide 11 -->
<div class="image-card__slide">
<!-- Image Card 11 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Lorem ipsum dolor sit amet consectetur</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, alias.</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 11 -->
</div>
<!-- /Image Card Slide 11 -->
<!-- Image Card Slide 12 -->
<div class="image-card__slide">
<!-- Image Card 12 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Image Card</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut debitis harum mollitia corporis reiciendis id nihil quasi quos quaerat delectus!</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 12 -->
</div>
<!-- /Image Card Slide 12 -->
</div>
</div>
</div>
<!-- See All View -->
<div class="image-card-carousel__view js-view">
<div class="image-card__group">
<!-- Image Card 1 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Lorem ipsum dolor sit amet consectetur</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, alias.</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 1 -->
<!-- Image Card 2 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Image Card</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut debitis harum mollitia corporis reiciendis id nihil quasi quos quaerat delectus!</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 2 -->
<!-- Image Card 3 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Lorem ipsum dolor sit amet consectetur</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, alias.</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 3 -->
<!-- Image Card 4 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Image Card</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut debitis harum mollitia corporis reiciendis id nihil quasi quos quaerat delectus!</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 4 -->
<!-- Image Card 5 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Lorem ipsum dolor sit amet consectetur</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, alias.</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 5 -->
<!-- Image Card 6 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Image Card</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut debitis harum mollitia corporis reiciendis id nihil quasi quos quaerat delectus!</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 6 -->
<!-- Image Card 7 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Lorem ipsum dolor sit amet consectetur</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, alias.</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 7 -->
<!-- Image Card 8 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Image Card</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut debitis harum mollitia corporis reiciendis id nihil quasi quos quaerat delectus!</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 8 -->
<!-- Image Card 9 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Lorem ipsum dolor sit amet consectetur</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, alias.</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 9 -->
<!-- Image Card 10 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Image Card</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut debitis harum mollitia corporis reiciendis id nihil quasi quos quaerat delectus!</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 10 -->
<!-- Image Card 11 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Lorem ipsum dolor sit amet consectetur</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius, alias.</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 11 -->
<!-- Image Card 12 -->
<a href="#" class="image-card">
<div class="image-card__media">
<img src="https://via.placeholder.com/480x270" alt="" class="image-card__img" />
</div>
<h3 class="image-card__title">Image Card</h3>
<div class="image-card__desc">Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut debitis harum mollitia corporis reiciendis id nihil quasi quos quaerat delectus!</div>
<div class="image-card__action">
Button
<i class="fa fa-long-arrow-right"></i>
</div>
</a>
<!-- /Image Card 12 -->
</div>
</div>
</div>
.image-card-carousel {
position: relative;
margin-bottom: 4rem;
}
.image-card-carousel__view {
display: none;
&.is-active {
display: block;
}
}
.image-card-carousel__group {
display: flex;
flex-direction: column;
justify-content: space-between;
@media (min-width: $breakpoint-desktop) {
flex-direction: row;
padding: 0;
}
}
.image-card-carousel__main {
flex: 1;
}
.image-card-carousel__actions {
align-self: flex-end;
}
.image-card-carousel__carousel {
margin: 0 -15px;
.slick-track {
margin: 0; // Align left items
}
}
.image-card__slide {
margin-left: 1.5rem;
margin-right: 1.5rem;
}
.image-card {
display: flex;
flex-direction: column;
background-color: $color-base-white;
margin-bottom: 3.2rem;
color: $color-base-blue;
&:hover,
&:focus {
outline: 0;
text-decoration: none;
color: $color-blue-medium;
}
}
.image-card__img {
display: block;
max-width: 100%;
height: auto;
}
.image-card__title {
@include typeBody(true);
margin: 0.4rem;
}
.image-card__desc {
margin: 0.4rem;
}
.image-card__action {
color: $color-blue-medium;
margin: 0.4rem;
}
.image-card__group {
display: flex;
flex-wrap: wrap;
@media (min-width: $breakpoint-tablet) {
margin-left: -3rem;
> .image-card {
flex: 0 0 calc(25% - 3rem);
margin-left: 3rem;
}
}
@media (min-width: $breakpoint-desktop) {
margin-left: -3rem;
> .image-card {
flex: 0 0 calc(16.6667% - 3rem);
margin-left: 3rem;
}
}
}
$(function () {
const $component = $(".js-image-card-carousel");
$component.each(function () {
const $carousel = $(this);
const $cards = $carousel.find(".js-image-cards");
$cards.slick({
arrows: false,
centerMode: false,
infinite: true,
mobileFirst: true,
slidesToScroll: 1,
slidesToShow: 1,
responsive: [
{
breakpoint: 767,
settings: {
arrows: true,
centerMode: false,
infinite: false,
slidesToScroll: 4,
slidesToShow: 4,
},
},
{
breakpoint: 1199,
settings: {
arrows: true,
centerMode: false,
infinite: false,
slidesToShow: 6,
slidesToScroll: 6,
},
},
],
});
});
$component.find(".js-toggle").each(function () {
const $link = $(this);
const activeContent = $link.data("active-content");
const inactiveContent = $link.html();
const $views = $(".js-view");
$link.on("click", function (e) {
e.preventDefault();
$views.toggleClass("is-active");
$link.toggleClass("is-active");
if (activeContent) {
$link.html(function () {
return $link.hasClass("is-active") ? activeContent : inactiveContent;
});
}
});
});
});