Card Simple Carousel
<div class="card-simple-carousel-wrap carousel carousel--equal-height-slides">
<div class="card-simple-carousel-wrap__inner">
<div class="card-simple-title-group">
<div class="card-simple-title-group__main">
<h2 class="component-subtitle">Simple Card Carousel</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. At ipsum suscipit maxime voluptatum.</p>
</div>
<div class="card-simple-title-group__actions">
<a href="#" class="btn btn-link js-toggle-card-simple-carousel-view" 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="card-simple-carousel-view is-active js-card-simple-carousel-view">
<div class="card-simple-carousel js-card-simple-carousel">
<div class="js-cards-simple">
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 1</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 2</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium iure quod aliquam eaque impedit nam provident quaerat velit. Sunt, impedit!</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">LoremIpsumLongWord</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 4</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 5</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 6</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 7</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 8</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 9</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 10</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 11</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 12</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
</div>
</div>
</div>
<!-- See All View -->
<div class="card-simple-carousel-view js-card-simple-carousel-view">
<div class="card-simple-group">
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 1</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 2</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Laudantium iure quod aliquam eaque impedit nam provident quaerat velit. Sunt, impedit!</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">LoremIpsumLongWord</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 4</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 5</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 6</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 7</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 8</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 9</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 10</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 11</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
<!-- Card Simple -->
<a href="#" class="card-simple">
<div class="card-simple__header">
<div class="card-simple__icon">
<i class="fa fa-external-link"></i>
</div>
<h3 class="card-simple__title">Card 12</h3>
</div>
<div class="card-simple__desc">Lorem ipsum dolor sit amet.</div>
</a>
</div>
</div>
</div>
</div>
.card-simple-carousel-view {
display: none;
&.is-active {
display: block;
}
}
.card-simple-carousel-wrap {
padding: 2.4rem 0;
margin-bottom: 2.4rem;
&.card-simple-carousel-wrap--bg-grey {
background-color: $color-base-grey;
}
}
.card-simple-carousel-wrap__inner {
max-width: 1170px;
margin: 0 auto;
}
.card-simple-title-group {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 0 1.6rem;
@media (min-width: $breakpoint-desktop) {
flex-direction: row;
padding: 0;
}
}
.card-simple-title-group__main {
flex: 1;
}
.card-simple-title-group__actions {
align-self: flex-end;
}
.card-simple-carousel {
position: relative;
}
$(function () {
const $carousel = $(".js-card-simple-carousel");
$carousel.each(function (index, elem) {
const $carousel = $(this);
const $cards = $carousel.find(".js-cards-simple");
$cards.slick({
arrows: false,
centerMode: true,
mobileFirst: true,
variableWidth: true,
responsive: [
{
breakpoint: 767,
settings: {
arrows: true,
centerMode: false,
centerPadding: 0,
infinite: false,
slidesToScroll: 6,
slidesToShow: 6,
},
},
],
});
});
$(".js-toggle-card-simple-carousel-view").each(function () {
const $link = $(this);
const activeContent = $link.data("active-content");
const inactiveContent = $link.html();
const $views = $(".js-card-simple-carousel-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;
});
}
});
});
});