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,
          },
        },
      ],
    });
  });
});