Carousel

VIEWPORTS Full Width 1366px 1024px 768px 480px 320px
Slide Fade Card Arrows

Code

HTML Twig CSS SCSS JS 
<div class="carousel__wrapper">
  <div class="carousel" data-fade="false" data-arrows="true" data-dots="true" data-dotsclass="middle" data-infinite="true" data-speed="360" data-autoplay="false" data-autoplayspeed="1000" data-pauseonhover="true">
    <div class="carousel__slide">
      <div class="image-wrapper">
        <img src="./_images/backgrounds/Diamond.jpg" alt="" />
      </div>
    </div>
    <div class="carousel__slide">
      <div class="image-wrapper">
        <img src="./_images/backgrounds/Platinum.jpg" alt="" />
      </div>
    </div>
    <div class="carousel__slide">
      <div class="image-wrapper">
        <img src="./_images/backgrounds/Gold.jpg" alt="" />
      </div>
    </div>
  </div>
  <div class="carousel__controls carousel__controls--prev"></div>
  <div class="carousel__controls carousel__controls--next"></div>
</div>

 

{{ attach_library('fitch_master/carousel') }}
{%
    set classes = [
      'paragraph',
      'paragraph--type--' ~ paragraph.bundle|clean_class,
      view_mode ? 'paragraph--view-mode--' ~ view_mode|clean_class,
    ]
  %}
{% block paragraph %}
    <div class="carousel__wrapper">
        <div
          class="
            carousel
            {% if content.field_carousel_style.0 is not empty %}
              carousel--{{ content.field_carousel_style.0 }}
            {% endif %}
          "
          data-fade="{{ content.field_carousel_transition.0 }}"
          data-arrows="{{ content.field_carousel_arrows.0 }}"
          data-dots="{{ content.field_carousel_pager.0 }}"
          data-dotsclass="{{ content.field_carousel_pager_position.0 }}"
          {% if paragraph.field_carousel_pager.value == 1 and paragraph.field_carousel_pager_type.value == 0 %}
          data-custompaging="true"
          {% endif %}
          data-infinite="{{ content.field_carousel_infinite.0 }}"
          data-speed="{{ content.field_carousel_speed.0 }}"
          data-autoplay="{{ content.field_carousel_autoplay.0 }}"
          data-autoplayspeed="{{ content.field_carousel_auto_play_speed.0 }}"
          data-pauseonhover="{{ content.field_carousel_pause_on_hover.0 }}"          
        >
            {{ content.field_carousel_slide }}        
          </div>
          {% if paragraph.field_carousel_arrows.value == 1 %}
          <div class="carousel__controls carousel__controls--prev"></div>
          <div class="carousel__controls carousel__controls--next"></div>
          {% endif %}
    </div>    
    {% include '@fitch_master/parts/has_header.html.twig' %}
{% endblock paragraph %}

 

.hasHeader .main > .section:first-of-type .carousel__slide {
  padding-top: 20rem;
}

@media only screen and (max-width: 1600px) and (max-height: 1024px) {
  .hasHeader .main > .section:first-of-type .carousel__slide {
    padding-top: 12rem;
  }
}

.carousel__wrapper {
  position: relative;
}

.carousel__slide:not(:first-of-type) {
  display: none;
}

.carousel__controls {
  position: absolute;
  top: 50%;
  margin-top: -2.4rem;
  background: none;
  font-size: 0;
  border: none;
}

.carousel__controls:after {
  width: 4.8rem;
  height: 4.8rem;
  background-color: var(--carousel-controls-background);
  mix-blend-mode: luminosity;
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  border-radius: 100%;
  font-size: 3rem;
  line-height: 4.8rem;
  font-family: FontAwesomeS;
  transition: all 360ms ease;
  text-align: center;
  cursor: pointer;
  display: block;
}

.carousel__controls:hover:after {
  background-color: var(--carousel-controls-hover-background);
}

.carousel__controls--prev {
  left: 2.4rem;
}

@media only screen and (max-width: 1600px) {
  .carousel__controls--prev {
    left: calc(100% - 13.6rem);
  }
}

.carousel__controls--prev:after {
  content: '\f104';
  text-indent: -0.3rem;
}

.carousel__controls--next {
  right: 2.4rem;
}

.carousel__controls--next:after {
  content: '\f105';
  text-indent: 0.3rem;
}

@media only screen and (max-width: 1600px) and (max-height: 1024px) {
  .carousel__controls {
    top: calc(100% - 9.1rem);
  }
}

@media only screen and (max-width: 1600px) and (min-height: 1025px) {
  .carousel__controls {
    top: calc(100% - 15.1rem);
  }
}

@media only screen and (max-width: 768px), (max-height: 768px) {
  .carousel__controls {
    top: calc(100% - 5.4rem);
  }
}

.carousel .slick-dots {
  position: absolute;
  width: 100%;
  margin-bottom: 0;
  font-size: 0;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  display: -ms-flexbox;
  display: flex;
}

.carousel .slick-dots li {
  margin: 1.2rem 0.6rem;
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  background: var(--carousel-pager-dot-background);
  border: 0.2rem solid var(--carousel-pager-dot-border);
  border-radius: 100%;
  font-size: 0;
  cursor: pointer;
  transition: background 360ms ease, border 360ms ease;
}

.carousel .slick-dots li:before {
  content: none;
}

.carousel .slick-dots li:hover {
  background: var(--carousel-pager-dot-hover-background);
  border-color: var(--carousel-pager-dot-hover-border);
}

.carousel .slick-dots li.slick-active {
  background: var(--carousel-pager-dot-active-background);
  border-color: var(--carousel-pager-dot-active-border);
}

.carousel .slick-dots button {
  display: none;
}

.carousel .slick-dots--cards {
  position: absolute;
  width: calc(100vw - 12rem);
  max-width: calc(var(--wrapper-1) - var(--spacing-3));
  margin: 0 calc(50% - var(--wrapper-1) / 2 + var(--spacing-2));
  min-height: 14rem;
  bottom: 12rem;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-flow: row nowrap;
  flex-flow: row nowrap;
  display: -ms-flexbox;
  display: flex;
}

@media only screen and (max-height: 1024px) {
  .carousel .slick-dots--cards {
    bottom: 6rem;
  }
}

@media only screen and (max-width: 768px), (max-height: 768px) {
  .carousel .slick-dots--cards {
    bottom: 3rem;
    min-height: 0;
  }
}

@media only screen and (max-width: 1490px) {
  .carousel .slick-dots--cards {
    margin: 0 0 0 2.4rem;
  }
}

.carousel .slick-dots--cards li:hover {
  background: none;
  border: none;
}

.carousel .slick-dots--cards .carousel__pager-item {
  position: relative;
  width: 13rem;
  height: 13rem;
  margin: 0 0.6rem;
  padding: 0;
  text-align: center;
  background: none;
  border: 0 none;
  outline: none;
  transition: all 360ms ease;
  cursor: pointer;
}

@media only screen and (max-width: 768px), (max-height: 768px) {
  .carousel .slick-dots--cards .carousel__pager-item {
    width: 1.2rem;
    height: 1.2rem;
    background: var(--carousel-pager-dot-background);
    border: 0.2rem solid var(--carousel-pager-dot-border);
    border-radius: 100%;
  }
}

.carousel .slick-dots--cards .carousel__pager-item:first-of-type {
  margin-left: 0;
}

.carousel .slick-dots--cards .carousel__pager-item:first-of-type.slick-active {
  margin-left: -0.6rem;
}

@media only screen and (max-width: 768px), (max-height: 768px) {
  .carousel .slick-dots--cards .carousel__pager-item:first-of-type.slick-active {
    margin-left: 0;
    background: var(--carousel-pager-dot-active-background);
  }
}

.carousel .slick-dots--cards .carousel__pager-item:last-of-type {
  margin-right: 0;
}

.carousel .slick-dots--cards .carousel__pager-item:before {
  display: none;
}

.carousel .slick-dots--cards .carousel__pager-item.slick-active {
  width: 14rem;
  height: 14rem;
  margin: 0;
}

@media only screen and (max-width: 768px), (max-height: 768px) {
  .carousel .slick-dots--cards .carousel__pager-item.slick-active {
    width: 1.2rem;
    height: 1.2rem;
    border: 0.2rem solid var(--carousel-pager-dot-border);
    margin: 0 0.6rem;
    background: var(--carousel-pager-dot-active-background);
  }
}

.carousel .slick-dots--cards .carousel__pager-item.slick-active .carousel__pager-icon {
  font-size: 2.9rem;
}

.carousel .slick-dots--cards .carousel__pager-item.slick-active .carousel__pager-title {
  font-size: 1.6rem;
}

.carousel .slick-dots--cards .carousel__pager-item:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--carousel-pager-card-background);
  border-radius: var(--border-radius);
  -webkit-backdrop-filter: var(--blur);
  backdrop-filter: var(--blur);
  transition: all 360ms ease;
}

@media only screen and (max-width: 768px), (max-height: 768px) {
  .carousel .slick-dots--cards .carousel__pager-item:after {
    background: none;
    -webkit-backdrop-filter: initial;
    backdrop-filter: initial;
  }
}

.carousel .slick-dots--cards .carousel__pager-item:hover:after {
  background-color: var(--carousel-pager-card-hover-background);
}

.carousel .slick-dots--cards .carousel__pager-item-inner {
  position: relative;
  margin-top: -0.4rem;
  z-index: 1;
}

@media only screen and (max-width: 768px), (max-height: 768px) {
  .carousel .slick-dots--cards .carousel__pager-item-inner {
    display: none;
  }
}

.carousel .slick-dots--cards .carousel__pager-icon {
  margin-bottom: 0.8rem;
  font-size: 2.8rem;
  line-height: 1;
  color: var(--carousel-text-color);
  transition: font-size 360ms ease;
}

.carousel .slick-dots--cards .carousel__pager-title {
  font-size: 1.5rem;
  transition: font-size 360ms ease;
  color: var(--carousel-text-color);
}

 

.hasHeader .main > .section:first-of-type .carousel__slide {
    padding-top: 20rem;
    
    @media only screen and (max-width: 1600px) and (max-height: 1024px) {
        padding-top: 12rem;
    }
}  

.carousel {  
    &__wrapper {
        position: relative;
    }

    &__slide {
        &:not(:first-of-type) {
            display: none;
        }
    }

    &__controls {
        position: absolute;
        top: 50%;
        margin-top: -2.4rem;
        background: none;
        font-size: 0;
        border: none;
        
        &:after {
            width: 4.8rem;
            height: 4.8rem;
            background-color: var(--carousel-controls-background);
            mix-blend-mode: luminosity;
            backdrop-filter: var(--blur);
            border-radius: 100%;
            font-size: 3rem;
            line-height: 4.8rem;
            font-family: FontAwesomeS;
            transition: all 360ms ease;
            text-align: center;
            cursor: pointer;
            display: block;

        }
        &:hover:after {
            background-color:  var(--carousel-controls-hover-background);
        }
        &--prev {
            left: 2.4rem;
    
            @media only screen and (max-width: 1600px) {
                left: calc(100% - 13.6rem);
            }

            &:after {
                content: '\f104';
                text-indent: -0.3rem;
            }
        }
        &--next {
            right: 2.4rem;

            &:after {
                content: '\f105';
                text-indent: 0.3rem;
            }
        }
        @media only screen and (max-width: 1600px) and (max-height: 1024px) {
            top: calc(100% - 9.1rem);
        }
        @media only screen and (max-width: 1600px) and (min-height: 1025px) {
            top: calc(100% - 15.1rem);
        }
        @media only screen and (max-width: 768px), (max-height: 768px) {
            top: calc(100% - 5.4rem);
        }
    }

    // DOTS
    .slick-dots {
        position: absolute;
        width: 100%;
        margin-bottom: 0;
        font-size: 0;
        flex-flow: row nowrap;
        display: flex;
        
        li {
            margin: 1.2rem 0.6rem;
            width: 1.2rem;
            height: 1.2rem;
            padding: 0;
            background: var(--carousel-pager-dot-background);
            border: 0.2rem solid var(--carousel-pager-dot-border);
            border-radius: 100%;
            font-size: 0;
            cursor: pointer;
            transition: background 360ms ease, border 360ms ease;

            &:before {
                content: none;
            }
            &:hover {
                background: var(--carousel-pager-dot-hover-background);
                border-color: var(--carousel-pager-dot-hover-border);
            }
            &.slick-active {
                background: var(--carousel-pager-dot-active-background);
                border-color: var(--carousel-pager-dot-active-border);
            }
        }
        
        button {
            display: none;
        }
    }

    // CARDS
    .slick-dots--cards {            
        position: absolute;
        width: calc(100vw - 12rem);
        max-width: calc(var(--wrapper-1) - var(--spacing-3));
        margin: 0 calc(50% - var(--wrapper-1) / 2 + var(--spacing-2));
        min-height: 14rem;
        bottom: 12rem;
        align-items: center;
        flex-flow: row nowrap;
        display: flex;

        @media only screen and (max-height: 1024px) {
            bottom: 6rem;
        }
        @media only screen and (max-width: 768px), (max-height: 768px) {
            bottom: 3rem;
            min-height: 0;
        }
        @media only screen and (max-width: 1490px) {
            margin: 0 0 0 2.4rem;
        }

        li:hover {
            background: none;
            border: none;
        }

        .carousel {       
            &__pager-item {
                position: relative;
                width: 13rem;
                height: 13rem;
                margin: 0 0.6rem;
                padding: 0;
                text-align: center;
                background: none;
                border: 0 none;                
                outline: none;
                transition: all 360ms ease;  
                cursor: pointer;

                @media only screen and (max-width: 768px), (max-height: 768px) {
                    width: 1.2rem;
                    height: 1.2rem;
                    background: var(--carousel-pager-dot-background);
                    border: 0.2rem solid var(--carousel-pager-dot-border);
                    border-radius: 100%;
                }

                &:first-of-type {
                    margin-left: 0;

                    &.slick-active {
                        margin-left: -0.6rem;
                        
                        @media only screen and (max-width: 768px), (max-height: 768px) {
                            margin-left: 0;
                            background: var(--carousel-pager-dot-active-background);
                        }
                    }
                }
                &:last-of-type {margin-right: 0;}
                &:before {display: none;}

                &.slick-active {
                    width: 14rem;
                    height: 14rem;
                    margin: 0;

                    @media only screen and (max-width: 768px), (max-height: 768px) {
                        width: 1.2rem;
                        height: 1.2rem;
                        border: 0.2rem solid var(--carousel-pager-dot-border);
                        margin: 0 0.6rem;
                        background: var(--carousel-pager-dot-active-background);
                    }

                    .carousel__pager-icon {font-size: 2.9rem;}
                    .carousel__pager-title {font-size: 1.6rem;}
                }
                &:after {
                    content: '';
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    background-color: var(--carousel-pager-card-background);
                    border-radius: var(--border-radius);
                    backdrop-filter: var(--blur);
                    transition: all 360ms ease;

                    @media only screen and (max-width: 768px), (max-height: 768px) {
                        background: none;
                        backdrop-filter: initial;
                    }

                }                
                &:hover:after {
                    background-color: var(--carousel-pager-card-hover-background);
                }
            }
            &__pager-item-inner {
                position: relative;
                margin-top: -0.4rem;
                z-index: 1;

                @media only screen and (max-width: 768px), (max-height: 768px) {
                    display: none;
                }
            }
            &__pager-icon {
                margin-bottom: 0.8rem;
                font-size: 2.8rem;
                line-height: 1;            
                color: var(--carousel-text-color);
                transition: font-size 360ms ease;                
            }
            &__pager-title {
                font-size: 1.5rem;
                transition: font-size 360ms ease;
                color: var(--carousel-text-color);
            }
        }    
    }    
}

 

jQuery(function ($) {

    // CARROUSEL
    if ($('.carousel').length > 0) {

        $('.carousel').each(function(key, item) {
            var carouselIdName = `carousel--${key}`,
                carouselId = `#${carouselIdName}`,
                cfade = $(this).data('fade'),
                carrows = $(this).data('arrows'),
                cdots = $(this).data('dots'),
                cdotsClass = $(this).data('dotsclass'),
                ccustomPager = $(this).data('custompaging'),
                cinfinite = $(this).data('infinite'),
                cspeed = $(this).data('speed'),
                cautoplay = $(this).data('autoplay'),
                cautoPlaySpeed = $(this).data('autoplayspeed'),
                cpauseOnHover = $(this).data('pauseonhover');

            this.id = carouselIdName;

            $(carouselId).slick({
                fade: cfade,
                arrows: carrows,
                prevArrow: $(carouselId).siblings('.carousel__controls--prev'),
                nextArrow: $(carouselId).siblings('.carousel__controls--next'),
                dots: cdots,
                dotsClass: `slick-dots ta--${cdotsClass}`,
                customPaging: function(slick, index) {
                    return  `<div class="carousel__pager-item-inner va" data-role="none" data-slick-index="${index}">${index}</div>`;
                },
                infinite: cinfinite,
                speed: cspeed,
                autoplay: cautoplay,
                autoplaySpeed: cautoPlaySpeed,
                cssEase: 'ease',
                pauseOnHover: cpauseOnHover,
                pauseOnDotsHover: true
            }).on('setPosition', function (event, slick) {
				$(carouselId+' .carousel__slide:not(.slick-cards)').css('height', slick.$slideTrack.height() + 'px');
				$(carouselId+' .page-teaser[style*="background"]').css('height', slick.$slideTrack.height() + 'px');
				$(carouselId+' .key-point[style*="background"]').css('height', slick.$slideTrack.height() + 'px');
			});

            if (ccustomPager) {
                $(`${carouselId} .slick-dots`).addClass('slick-dots--cards');
                $(`${carouselId} .slick-dots > li`).each(function() {
                    $(this).addClass('carousel__pager-item');

                    const carouselPagerItem = '.carousel__pager-item-inner';
                    var pagerItem = $(this),
                        slickIndex = pagerItem.find(carouselPagerItem).attr('data-slick-index'),
                        matchingSlide = $(`.carousel .carousel__slide[data-slick-index="${slickIndex}"]`),
                        titleContent = matchingSlide.data('title'),
                        iconContent = matchingSlide.find('.carousel__pager-icon');

                    pagerItem.find(carouselPagerItem).empty().append(`<div class="carousel__pager-title">${titleContent}</div>`);
                    pagerItem.find(carouselPagerItem).prepend(iconContent);
                });
            }
        });
    }

});

 

Design Files

Figma

Fields

Label Machine name Field type Values Character Limit Required

Use Case

Component Options

Component Options

Carousel Transition

This allows you to set the transition of the carousel to slide or fade between slides.

Carousel Pager

This enables a pager for the carousel. Once enabled the carousel pager type and position options can be used.

Carousel Pager Type

The carousel has the option to show the pager as dots that are branded per site using CSS vars, or as a card (box) that has the options for a icon supplied via FontAwesome.

This option can be used in conjunction with carousel pager position.

Carousel Pager Position

This option places the pager either left, centre and right of the carousel.

Carousel Arrows

Enables arrows controls for the carousel

Carousel Infinite

This enables the carousel to play from the start once it reaches the end.

Carousel Speed

This is the speed at which the slide or fade effect happens. The default is set at 360ms.

Carousel Autoplay

Enables carousel autoplay.

Carousel Auto Play Speed

This is the time that each slide is visible before it moves to the next one. e.g. 6000 is 6 seconds.

Carousel Pause on Hover

Enable this to pause the carousel when the user hovers on a slide.

Component
Carousel
Copyright © 2024 GAMEWORK | Nicholas Game
How To
Upgrading to Drupal 10
Velocity for Marketo
jQuery: The Basics
Homebrew
Gulp
Making the Grade
Formatting SVG Logos for the Website
Marketo Landing Page Builder
Work with our submodules
Drush Launcher
Upgrade PHP and change PATH
Qualtrics
Bitbucket SSH Key
Git
VS code extensions
Guide
Profile Banner
Fitch Ratings - Analyst Listing Page
CSS Custom Properties (Variables)
Carousel - Waterwheel
Mix it Up
Brand Navigation
Top Bar
Fitch Ratings - Podcast
Fitch Ratings - Analyst Profile
Event
Long Read
Article
Code test
Search Demo
Profile - Sustainable Fitch
Search Icon
Login
Language Filter
Theme Switch
Flip Card
Overlay
Infographic CDS
Interactive Map
Iframe
Footer
Main
Header
Accordion
Wrappers
Podcasts
DOM Layout
Figure
Search Tools
Search Bar
Search Overlay
Ratings Process
Ratings Definitions
Language Switch
Video Teaser
Video Player
Video Banner
Profile Teaser
Event Teaser
Back to Top
Pager
Navigation - Dropdown
Navigation - Overlay
Profile - Leadership FR
Profile - Leadership FG V2
Leadership Overview - FG
Forms
Leveraged Finance
Tags
Profile - Leadership FG V1
Profile - Analyst
Banner V2
Promo Hightlight
Tables
History - Fitch Group
Insights
Event Teaser
Event Listing
Overview
Logos
Title
Video
Text
Tab Wrapper
Tab
Sub Title
Section More
Showcase
Section
Quote
Promo Box
Post
Page Teaser
Page Promo
Page Layout - Left or Right Column with Main Column
Number
Node Reference
Map
Key Point
Key Highlight
Image
Icon Teaser
Highlight
Grid Column Wrapper
Grid Column
From library
Figure
Column Wrapper
Column
Carousel Slide
Carousel
Card
Call to action
Box
Block Reference
Banner
Email Guide
View Online
Email Components
Fitch Group
Fitch Ratings
Fitch Solutions