Customer stories

Description

Customer stories displays testimonial cards in a carousel. The carousel deliberately runs off the edge of the screen while the text above it stays aligned with the rest of the page.

How to edit

Go to Elementor → Editor → Templates.
Search for Customer stories.
Open the template and edit the story content, images, and author details directly.
Save, then check a page that uses the template.

Add and remove slides rather than changing the carousel structure, so the responsive behaviour keeps working.

Variants

CK – Customer stories

Layout

The section has a light grey background.
The header contains the section heading and intro text. On desktop it extends the grey background out to the left edge of the screen, so the background sits seamlessly behind the part of the carousel that overflows.
Each card has rounded corners, a grey border, a white background, and generous padding. Minimum height is 441px on desktop and 368px on mobile.
The author area holds a 61 × 61px avatar, the author name (18px, bold), and their role (14px, regular).

Responsive behaviour

Screen size	Cards visible	Pagination dots
Desktop (1024px and above)	2.6, or fewer if there are two or fewer stories	Hidden
Tablet (up to 1023px)	2.4	Shown
Mobile (up to 767px)	1.12, centred, with reduced card padding and a centred header	Shown

Pagination dots are maroon. The dot for the current slide stretches into a wider pill so it is easy to see where you are.

Classes

Primary classes used by the customer stories component:

Class	What it's for
`ck-customer-stories`	Main wrapper
`ck-customer-stories__header`	Heading and intro text
`ck-customer-stories__carousel`	Carousel wrapper
`ck-customer-stories__card`	An individual testimonial card
`ck-customer-stories__author`	Author image, name, and role

No IDs are used by the customer stories component.

Styling is done through a combination of the built-in page builder options as well as custom CSS where needed.

Script

This script is added using the HTML editor template. It sets how many cards are visible based on screen size and the number of stories.

<script>
    (() => {
        document.addEventListener("DOMContentLoaded", function () {
            let hasAppliedScroll = false;

            function handleCustomerStoriesScroll() {
                const customerSwiper = document.querySelectorAll(
                    ".ck-customer-stories .swiper",
                );

                customerSwiper.forEach((slider) => {
                    const totalSlides =
                        slider.querySelectorAll(".swiper-slide").length;

                    if (slider && slider.swiper) {
                        if (window.innerWidth <= 767) {
                            slider.swiper.params.slidesPerView = 1.12;
                            slider.swiper.params.centeredSlides = true;
                        } else if (window.innerWidth <= 1023) {
                            slider.swiper.params.slidesPerView = 2.4;
                        } else {
                            slider.swiper.params.slidesPerView =
                                totalSlides <= 2 ? totalSlides : 2.6;
                        }
                        slider.swiper.update();

                        if (!hasAppliedScroll) {
                            window.removeEventListener(
                                "scroll",
                                handleCustomerStoriesScroll,
                            );
                            hasAppliedScroll = true;
                        }
                    }
                });
            }

            window.addEventListener("scroll", handleCustomerStoriesScroll);
            window.addEventListener("resize", handleCustomerStoriesScroll);
        });
    })();
</script>

Customer stories

On this page