News Carousel (Homepage)
<!-- Nav Tabs -->
<ul class="nav nav-tabs nav-tabs--vcbs nav-tabs--vcbs-dark js-nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#local" aria-controls="local" role="tab" data-toggle="tab">Local News</a>
</li>
<li role="presentation">
<a href="#global" aria-controls="global" role="tab" data-toggle="tab">Global News</a>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content u-m-b-3xl">
<div role="tabpanel" class="tab-pane active" id="local">
<!-- News Carousel -->
<div class="news-carousel news-carousel--dark carousel carousel--dark carousel--minimal u-m-b-0 js-news-carousel">
<div class="news-cards js-news-cards">
<div class="news-card is-theme-1">
<div class="news-card__media">
<a href="#">
<img src="/images/photos/0.jpg" alt="" class="card-img img-responsive" />
</a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Local News Item 1 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut magnam consectetur accusantium veniam.</a>
<!-- Date and Category removed for homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-2">
<div class="news-card__media">
<a href="#">
<img src="/images/placeholder/672x378.png" alt="" alt="" class="card-img img-responsive" />
</a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Local News Item 2 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut magnam consectetur accusantium veniam.</a>
<!-- Date and Category removed for homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-3">
<div class="news-card__media">
<a href="#">
<img src="/images/photos/2.jpg" alt="" class="card-img img-responsive" />
</a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Local News Item 3 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut magnam consectetur accusantium veniam.</a>
<!-- Date and Category removed for homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-1">
<div class="news-card__media">
<a href="#">
<img src="/images/photos/3.jpg" alt="" class="card-img img-responsive" />
</a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Local News Item 4 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut magnam consectetur accusantium veniam.</a>
<!-- Date and Category removed for homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-2">
<div class="news-card__media">
<a href="#">
<img src="/images/photos/4.jpg" alt="" class="card-img img-responsive" />
</a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Local News Item 5 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut magnam consectetur accusantium veniam.</a>
<!-- Date and Category removed for homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-3">
<div class="news-card__media">
<a href="#">
<img src="/images/photos/5.jpg" alt="" class="card-img img-responsive" />
</a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Local News Item 6 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut magnam consectetur accusantium veniam.</a>
<!-- Date and Category removed for homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-1">
<div class="news-card__media">
<a href="#">
<img src="/images/photos/6.jpg" alt="" class="card-img img-responsive" />
</a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Local News Item 7 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut magnam consectetur accusantium veniam.</a>
<!-- Date and Category removed for homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-2">
<div class="news-card__media">
<a href="#">
<img src="/images/photos/7.jpg" alt="" class="card-img img-responsive" />
</a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Local News Item 8 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut magnam consectetur accusantium veniam.</a>
<!-- Date and Category removed for homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-3">
<div class="news-card__media">
<a href="#">
<img src="/images/photos/8.jpg" alt="" class="card-img img-responsive" />
</a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Local News Item 9 - Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ut magnam consectetur accusantium veniam.</a>
<!-- Date and Category removed for homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane" id="global">
<!-- News Carousel -->
<div class="news-carousel news-carousel--dark carousel carousel--dark carousel--minimal u-m-b-0 js-news-carousel">
<div class="news-cards js-news-cards" id="global-slide">
<div class="news-card is-theme-1">
<div class="news-card__media">
<a href="#"><img src="/images/photos/4.jpg" alt="" class="news-card-img img-responsive" /></a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Global News Item 1 - Quidem praesentium ipsum numquam, corrupti a voluptate, magnam sunt quaerat expedita doloribus minima.</a>
<!-- Date and Category removed for Homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-2">
<div class="news-card__media">
<a href="#"><img src="/images/photos/5.jpg" alt="" class="news-card-img img-responsive" /></a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Global News Item 2 - Quidem praesentium ipsum numquam, corrupti a voluptate, magnam sunt quaerat expedita doloribus minima.</a>
<!-- Date and Category removed for Homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-3">
<div class="news-card__media">
<a href="#"><img src="/images/photos/6.jpg" alt="" class="news-card-img img-responsive" /></a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Global News Item 3 - Quidem praesentium ipsum numquam, corrupti a voluptate, magnam sunt quaerat expedita doloribus minima.</a>
<!-- Date and Category removed for Homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-1">
<div class="news-card__media">
<a href="#"><img src="/images/photos/7.jpg" alt="" class="news-card-img img-responsive" /></a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Global News Item 4 - Quidem praesentium ipsum numquam, corrupti a voluptate, magnam sunt quaerat expedita doloribus minima.</a>
<!-- Date and Category removed for Homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-2">
<div class="news-card__media">
<a href="#"><img src="/images/photos/8.jpg" alt="" class="news-card-img img-responsive" /></a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Global News Item 5 - Quidem praesentium ipsum numquam, corrupti a voluptate, magnam sunt quaerat expedita doloribus minima.</a>
<!-- Date and Category removed for Homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-3">
<div class="news-card__media">
<a href="#"><img src="/images/photos/9.jpg" alt="" class="news-card-img img-responsive" /></a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Global News Item 6 - Quidem praesentium ipsum numquam, corrupti a voluptate, magnam sunt quaerat expedita doloribus minima.</a>
<!-- Date and Category removed for Homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-1">
<div class="news-card__media">
<a href="#"><img src="/images/photos/10.jpg" alt="" class="news-card-img img-responsive" /></a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Global News Item 7 - Quidem praesentium ipsum numquam, corrupti a voluptate, magnam sunt quaerat expedita doloribus minima.</a>
<!-- Date and Category removed for Homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-2">
<div class="news-card__media">
<a href="#"><img src="/images/photos/11.jpg" alt="" class="news-card-img img-responsive" /></a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Global News Item 8 - Quidem praesentium ipsum numquam, corrupti a voluptate, magnam sunt quaerat expedita doloribus minima.</a>
<!-- Date and Category removed for Homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-3">
<div class="news-card__media">
<a href="#"><img src="/images/photos/0.jpg" alt="" class="news-card-img img-responsive" /></a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Global News Item 9 - Quidem praesentium ipsum numquam, corrupti a voluptate, magnam sunt quaerat expedita doloribus minima.</a>
<!-- Date and Category removed for Homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-1">
<div class="news-card__media">
<a href="#"><img src="/images/photos/1.jpg" alt="" class="news-card-img img-responsive" /></a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Global News Item 10 - Quidem praesentium ipsum numquam, corrupti a voluptate, magnam sunt quaerat expedita doloribus minima.</a>
<!-- Date and Category removed for Homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-2">
<div class="news-card__media">
<a href="#"><img src="/images/photos/2.jpg" alt="" class="news-card-img img-responsive" /></a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Global News Item 11 - Quidem praesentium ipsum numquam, corrupti a voluptate, magnam sunt quaerat expedita doloribus minima.</a>
<!-- Date and Category removed for Homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
<div class="news-card is-theme-3">
<div class="news-card__media">
<a href="#"><img src="/images/photos/3.jpg" alt="" class="news-card-img img-responsive" /></a>
</div>
<div class="news-card__body">
<a href="#" class="news-card__title">Global News Item 12 - Quidem praesentium ipsum numquam, corrupti a voluptate, magnam sunt quaerat expedita doloribus minima.</a>
<!-- Date and Category removed for Homepage -->
</div>
<!-- Social Controls removed for homepage -->
</div>
</div>
</div>
</div>
<p class="text-right">
<a href="news-center.html" class="btn btn-link"
>See More
<i class="fa fa-long-arrow-right"></i>
</a>
</p>
</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,
},
},
],
});
});
});