Carousel – Design Portal

A website carousel or slider, is an effective way of displaying multiple images or content in a single space.

Demo

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime suscipit aliquam aut placeat beatae.

<div class="carousel swiper">
  <div class="carousel__container swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><a class="carousel__item" href="">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime suscipit aliquam aut placeat beatae.</a></div>
      <div class="swiper-slide"><a class="carousel__item" href="">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime suscipit aliquam aut placeat beatae.</a></div>
      <div class="swiper-slide"><a class="carousel__item" href="">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime suscipit aliquam aut placeat beatae.</a></div>
      <div class="swiper-slide"><a class="carousel__item" href="">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime suscipit aliquam aut placeat beatae.</a></div>
    </div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-pagination"></div>
</div>

// Requires swiper-bundle.min.css, as well as any custom CSS required

/* ==================================================================
	SWIPER
================================================================== */

.swiper-container {
  inline-size: 100%;
}

.swiper-slide {
  display: flex;
}

.swiper-button-next, .swiper-button-prev {
  block-size: 100%;
  inline-size: 3.125rem;
  inset-block-start: 0;
  margin-block-start: 0;
}

.swiper-button-next:after, 
.swiper-button-prev:after{
  background: url(#{$assetPath}/carousel-chevron.svg) no-repeat center / contain;
  block-size: 1.8125rem;
  content: ""!important;
  display: inline-block;
  font-family: none!important;
  inline-size: 1.25rem;
}

.swiper-button-prev:after{
  transform: scale(-1);
}

.swiper-button-disabled {
  filter: grayscale(1);
}

.swiper-button-next.swiper-button-disabled, 
.swiper-button-prev.swiper-button-disabled {
  opacity: 0.25;
}

.swiper-button-next,
.swiper-button-prev {
  &:focus,
  &:hover{
    outline: none;
  }
}

@media (min-width: $xl) {
  .swiper-button-prev {
    inset-inline-start: 0;
  }

  .swiper-button-next {
    inset-inline-end: 0;
  }
}

/* ==================================================================
	CAROUSEL
================================================================== */

.carousel {
  block-size: 13rem;
  inline-size: 100%;
  position: relative;

  &:before,
  &:after {
    background: transparent linear-gradient(90deg, #FFFFFF00 0%, var(--body-bg-color) 100%) 0% 0% no-repeat padding-box;
    block-size: 100%;
    content: "";
    inline-size: 10%;
    inset-block-start: 0;
    pointer-events: none;
    position: absolute;
    z-index: 2;
  }
  
  &:before {
    inset-inline-start: 0;
    transform: scale(-1);
  }

  &:after {
    inset-inline-end: 0;
  }

  &__item {
    align-items: center;
    font: normal 400 1.125rem/1.35 var(--heading-font);
    background-color: var(--white);
    border-radius: 0.25rem;
    color: var(--black);
    display: flex;
    min-block-size: 5.25rem;
    padding: 0.5rem 0.75rem;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: all .25s ease-in-out;
  }
}

@media (min-width: $lg) {
  .carousel {
    &:before {
      inline-size: 5%;
    }

    &__item {
      font-size: 1.2rem;
      min-block-size: 9.375rem;
    }
  }
}

const swiperContainer = new Swiper(".carousel__container", {
  slidesPerView: 2,
  spaceBetween: 20,
  centeredSlides: true,
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
  },
  breakpoints: {
    640: {
      slidesPerView: 3,
      centeredSlides: false,
    },
    992: {
      slidesPerView: 3,
      spaceBetween: 30,
      centeredSlides: false,
    }
  }
});

Note

The carousel is using swiper.js, please view their documentation for setup and many more configuration options.
Markup and styling may vary depending on theme.

States & Variations

Navigation

Add swiper-button-next and swiper-button-prev to the markup.

<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>

Pagination

Add swiper-pagination to the markup.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Maxime suscipit aliquam aut placeat beatae.

<div class="swiper-pagination"></div>

Usage

Carousels need to be implemented manually into the code from the development team. Posts within the carousel can be be controlled via post tags such as trending, which is used on info.com.

Anatomy

Carousel, Swiper
Carousel Item, Swiper Slide
Swiper Button Previous, Inactive
Swiper Button Next, Active
Swiper Pagination