How to create custom slider in Magento 2 PWA

For an attractive website UI, the banner sliders play an important role. PWA Studio supports the Slick Slider library. In this blog, we get an idea of how to add a custom slider in PWA studio. This blog may use to add a slider on any page in the PWA storefront. We would create a custom component for the slider and add it to a demo page.

Let’s take an example of the banners slider component that we would add to a custom page called “DemoPage”. You can get an idea of how to create a custom page from this blog: Create a custom page with a static route in Magento 2 PWA

Create a GraphQL file

File Path: example-concept/src/components/Banners/banners.gql.js
We create a GraphQL file for fetching banners data.

import { gql } from '@apollo/client';

export const GET_BANNERS = gql`
    query getBanners($is_active: Int!) {
        banners (is_active: $is_active ) {
            totalCount
            items {
                banners_id
                title
                image
                link
                sort_order
                is_active
                created_at
            }
        }
    }
`;

Create a component file

File Path: example-concept/src/components/Banners/banners.js
We create a component file for displaying banners in the PWA storefront. We are using the Slick Slider library to display slider of banners.

import React from 'react';
import {useQuery} from '@apollo/client';
import {fullPageLoadingIndicator} from "@magento/venia-ui/lib/components/LoadingIndicator";
import ErrorView from "@magento/venia-ui/lib/components/ErrorView";
import {Link} from '@magento/venia-drivers';
import Image from "@magento/venia-ui/lib/components/Image";
import {GET_BANNERS} from "./queries/banners.gql";
import sliderClasses from "@magento/pagebuilder/lib/ContentTypes/Slider/slider.css";
import SlickSlider from "react-slick";

const Banners = () => {
    const IMAGE_WIDTH = 1900;
    const IMAGE_HEIGHT = 500;

    const {loading, error, data} = useQuery(GET_BANNERS, {
        variables: {is_active: 1},
        fetchPolicy: 'cache-and-network',
        nextFetchPolicy: 'cache-first'
    });

    if (!data) {
        if (loading) {
            return fullPageLoadingIndicator;
        }
        if (error) {
            return <ErrorView message={error.message}/>;
        }
    }

    const bannersData = data.banners.totalCount > 0 ? data.banners.items : null;

    var sliderSettings = bannersData ? {
        dots: true,
        infinite: true,
        autoplay: true,
        autoplaySpeed: 2000,
        pauseOnHover: true,
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
        responsive: [
            {
                breakpoint: 767,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                }
            },
            {
                breakpoint: 480,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 1,
                }
            }

        ]
    } : null;

    const items = bannersData ? bannersData.map((item) => {
        return (
            <div>
                <Link to={item.link}>
                    <Image
                        alt={item.title}
                        resource={item.image}
                        height={IMAGE_HEIGHT}
                        width={IMAGE_WIDTH}
                    />
                </Link>
            </div>
        );
    }) : null;

    const content = bannersData ?
        (<div className={sliderClasses.root}>
            <SlickSlider {...sliderSettings}>
                {items}
            </SlickSlider>
        </div>) : null;

    return (
        <div>{content}</div>
    );
}

export default Banners;

Render a component

File Path: example-concept/src/components/Banners/index.js
To render the Banners component create an index.js file and add the following code:

export { default } from './banners';

Add Banners component to a custom page

File Path: example-concept/src/components/DemoPage/demoPage.js
You can add the Banners component in the following way. For example, we are adding it to a custom page.

import React from "react";
import Banners from "../Banners";

const DemoPage = () => {
    return (
        <Banners />
    );
}

export default DemoPage;

Run PWA storefront

Execute the following command in the terminal to build and watch your example package:

yarn watch:example

Open the storefront URL and add /demopage at the end of the URL to load our custom page route. You can see the banners slider like the following screenshot.

We hope this blog may understandable and useful to you. You can email us at mage2developer@gmail.com if we missed anything or want to add any suggestions. We will respond to you as soon as possible. Happy to help 🙂