News Carousel (News Center)
<h2 class="component-title">Carousel Title</h2>
<div class="carousel news-carousel js-news-carousel">
<div class="news-cards js-news-cards">
<div class="news-card is-theme-1">
<div class="news-card__media">
<img src="/images/photos/0.jpg" alt="" class="card-img img-responsive" />
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">News Item 1 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut magnam consectetur accusantium veniam.</a>
<div class="news-card__meta">
MMM DD YYYY in
<a href="#">category</a>
</div>
</div>
<div class="news-card__footer">
<div class="social-controls">
<div class="social-controls__item">
<i class="fa fa-eye social-controls__icon"></i>
<span class="social-controls__label">1.5k</span>
</div>
<div class="social-controls__item">
<a href="#" class="social-controls__link">
<i class="fa fa-heart social-controls__icon"></i>
</a>
<span class="social-controls__label">123</span>
</div>
<div class="social-controls__item">
<a href="#" class="social-controls__link js-copy-url">
<i class="fa fa-share-alt social-controls__icon"></i>
</a>
<span class="social-controls__label">77</span>
</div>
</div>
</div>
</div>
<div class="news-card is-theme-2">
<div class="news-card__media">
<img src="/images/placeholder/672x378.png" alt="" alt="" class="card-img img-responsive" />
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">News Item 2 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut magnam consectetur accusantium veniam.</a>
<div class="news-card__meta">
MMM DD YYYY in
<a href="#">category</a>
</div>
</div>
<div class="news-card__footer">
<div class="social-controls">
<div class="social-controls__item">
<i class="fa fa-eye social-controls__icon"></i>
<span class="social-controls__label">1.5k</span>
</div>
<div class="social-controls__item">
<a href="#" class="social-controls__link">
<i class="fa fa-heart social-controls__icon"></i>
</a>
<span class="social-controls__label">123</span>
</div>
<div class="social-controls__item">
<a href="#" class="social-controls__link js-copy-url">
<i class="fa fa-share-alt social-controls__icon"></i>
</a>
<span class="social-controls__label">77</span>
</div>
</div>
</div>
</div>
<div class="news-card is-theme-3">
<div class="news-card__media">
<img src="/images/photos/2.jpg" alt="" class="card-img img-responsive" />
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">News Item 3 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut magnam consectetur accusantium veniam.</a>
<div class="news-card__meta">
MMM DD YYYY in
<a href="#">category</a>
</div>
</div>
<div class="news-card__footer">
<div class="social-controls">
<div class="social-controls__item">
<i class="fa fa-eye social-controls__icon"></i>
<span class="social-controls__label">1.5k</span>
</div>
<div class="social-controls__item">
<a href="#" class="social-controls__link">
<i class="fa fa-heart social-controls__icon"></i>
</a>
<span class="social-controls__label">123</span>
</div>
<div class="social-controls__item">
<a href="#" class="social-controls__link js-copy-url">
<i class="fa fa-share-alt social-controls__icon"></i>
</a>
<span class="social-controls__label">77</span>
</div>
</div>
</div>
</div>
<div class="news-card is-theme-1">
<div class="news-card__media">
<img src="/images/photos/3.jpg" alt="" class="card-img img-responsive" />
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">News Item 4 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut magnam consectetur accusantium veniam.</a>
<div class="news-card__meta">
MMM DD YYYY in
<a href="#">category</a>
</div>
</div>
<div class="news-card__footer">
<div class="social-controls">
<div class="social-controls__item">
<i class="fa fa-eye social-controls__icon"></i>
<span class="social-controls__label">1.5k</span>
</div>
<div class="social-controls__item">
<a href="#" class="social-controls__link">
<i class="fa fa-heart social-controls__icon"></i>
</a>
<span class="social-controls__label">123</span>
</div>
<div class="social-controls__item">
<a href="#" class="social-controls__link js-copy-url">
<i class="fa fa-share-alt social-controls__icon"></i>
</a>
<span class="social-controls__label">77</span>
</div>
</div>
</div>
</div>
<div class="news-card is-theme-2">
<div class="news-card__media">
<img src="/images/photos/4.jpg" alt="" class="card-img img-responsive" />
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">News Item 5 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut magnam consectetur accusantium veniam.</a>
<div class="news-card__meta">
MMM DD YYYY in
<a href="#">category</a>
</div>
</div>
<div class="news-card__footer">
<div class="social-controls">
<div class="social-controls__item">
<i class="fa fa-eye social-controls__icon"></i>
<span class="social-controls__label">1.5k</span>
</div>
<div class="social-controls__item">
<a href="#" class="social-controls__link">
<i class="fa fa-heart social-controls__icon"></i>
</a>
<span class="social-controls__label">123</span>
</div>
<div class="social-controls__item">
<a href="#" class="social-controls__link js-copy-url">
<i class="fa fa-share-alt social-controls__icon"></i>
</a>
<span class="social-controls__label">77</span>
</div>
</div>
</div>
</div>
<div class="news-card is-theme-3">
<div class="news-card__media">
<img src="/images/photos/5.jpg" alt="" class="card-img img-responsive" />
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">News Item 6 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut magnam consectetur accusantium veniam.</a>
<div class="news-card__meta">
MMM DD YYYY in
<a href="#">category</a>
</div>
</div>
<div class="news-card__footer">
<div class="social-controls">
<div class="social-controls__item">
<i class="fa fa-eye social-controls__icon"></i>
<span class="social-controls__label">1.5k</span>
</div>
<div class="social-controls__item">
<a href="#" class="social-controls__link">
<i class="fa fa-heart social-controls__icon"></i>
</a>
<span class="social-controls__label">123</span>
</div>
<div class="social-controls__item">
<a href="#" class="social-controls__link js-copy-url">
<i class="fa fa-share-alt social-controls__icon"></i>
</a>
<span class="social-controls__label">77</span>
</div>
</div>
</div>
</div>
<div class="news-card is-theme-1">
<div class="news-card__media">
<img src="/images/photos/6.jpg" alt="" class="card-img img-responsive" />
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">News Item 7 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut magnam consectetur accusantium veniam.</a>
<div class="news-card__meta">
MMM DD YYYY in
<a href="#">category</a>
</div>
</div>
<div class="news-card__footer">
<div class="social-controls">
<div class="social-controls__item">
<i class="fa fa-eye social-controls__icon"></i>
<span class="social-controls__label">1.5k</span>
</div>
<div class="social-controls__item">
<a href="#" class="social-controls__link">
<i class="fa fa-heart social-controls__icon"></i>
</a>
<span class="social-controls__label">123</span>
</div>
<div class="social-controls__item">
<a href="#" class="social-controls__link js-copy-url">
<i class="fa fa-share-alt social-controls__icon"></i>
</a>
<span class="social-controls__label">77</span>
</div>
</div>
</div>
</div>
<div class="news-card is-theme-2">
<div class="news-card__media">
<img src="/images/photos/7.jpg" alt="" class="card-img img-responsive" />
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">News Item 8 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut magnam consectetur accusantium veniam.</a>
<div class="news-card__meta">
MMM DD YYYY in
<a href="#">category</a>
</div>
</div>
<div class="news-card__footer">
<div class="social-controls">
<div class="social-controls__item">
<i class="fa fa-eye social-controls__icon"></i>
<span class="social-controls__label">1.5k</span>
</div>
<div class="social-controls__item">
<a href="#" class="social-controls__link">
<i class="fa fa-heart social-controls__icon"></i>
</a>
<span class="social-controls__label">123</span>
</div>
<div class="social-controls__item">
<a href="#" class="social-controls__link js-copy-url">
<i class="fa fa-share-alt social-controls__icon"></i>
</a>
<span class="social-controls__label">77</span>
</div>
</div>
</div>
</div>
<div class="news-card is-theme-3">
<div class="news-card__media">
<img src="/images/photos/8.jpg" alt="" class="card-img img-responsive" />
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">News Item 9 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut magnam consectetur accusantium veniam.</a>
<div class="news-card__meta">
MMM DD YYYY in
<a href="#">category</a>
</div>
</div>
<div class="news-card__footer">
<div class="social-controls">
<div class="social-controls__item">
<i class="fa fa-eye social-controls__icon"></i>
<span class="social-controls__label">1.5k</span>
</div>
<div class="social-controls__item">
<a href="#" class="social-controls__link">
<i class="fa fa-heart social-controls__icon"></i>
</a>
<span class="social-controls__label">123</span>
</div>
<div class="social-controls__item">
<a href="#" class="social-controls__link js-copy-url">
<i class="fa fa-share-alt social-controls__icon"></i>
</a>
<span class="social-controls__label">77</span>
</div>
</div>
</div>
</div>
</div>
</div>
.news-carousel {
position: relative;
margin-bottom: 4.8rem;
}
.news-cards {
position: relative;
}
.news-card {
position: relative;
@media (min-width: $breakpoint-desktop) {
margin-right: 2.4rem;
}
&:hover {
text-decoration: none;
&::after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
content: "";
border: 0.4rem solid $color-blue-medium;
pointer-events: none;
.news-carousel--dark & {
border: 0.4rem solid $color-base-white;
}
}
}
&:focus {
outline: none;
}
}
.news-card__media {
position: relative;
&::before,
&::after {
content: "";
display: block;
position: absolute;
top: 0;
height: 100%;
width: 2.4rem;
}
&::before {
left: 0;
}
// Color overlays
.news-card.is-theme-1 &::before {
background-color: rgba($color-grey-medium, 0.5);
}
.news-card.is-theme-2 &::before {
background-color: rgba($color-blue-light, 0.5);
}
.news-card.is-theme-3 &::before {
background-color: rgba($color-blue-medium, 0.5);
}
&::after {
right: 0;
transform: translateX(2.4rem);
}
// Color betweens
.news-card.is-theme-1 &::after {
background-color: $color-blue-light;
}
.news-card.is-theme-2 &::after {
background-color: $color-blue-medium;
}
.news-card.is-theme-3 &::after {
background-color: $color-grey-medium;
}
}
.news-card__body {
padding: 1.6rem;
}
.news-card__title {
color: $color-base-blue;
font-weight: bold;
margin-bottom: 0.4rem;
overflow: hidden;
&:focus {
outline: 0;
}
.news-carousel--dark & {
color: $color-base-white;
}
}
.news-card__meta {
@include typeCaption;
}
.news-card__footer {
padding: 1.6rem;
}
// Need to redraw slider on tab change
$('.js-nav-tabs a[data-toggle="tab"]')
.on("click", function (e) {
e.preventDefault();
$(this).tab("show");
})
.on("shown.bs.tab", function () {
$(".slick-slider").slick("setPosition");
});
$(document).ready(function () {
$(".js-news-carousel").each(function () {
const $carousel = $(this);
const $cards = $carousel.find(".js-news-cards");
$cards.slick({
arrows: false,
mobileFirst: true,
centerMode: true,
centerPadding: "3.2rem",
dots: true,
slidesToShow: 1,
slidesToScroll: 1,
responsive: [
{
breakpoint: 767,
settings: {
slidesToShow: 2,
slidesToScroll: 2,
},
},
{
breakpoint: 1199,
settings: {
arrows: true,
centerMode: false,
slidesToShow: 3,
slidesToScroll: 3,
},
},
],
});
});
});