Integrating Owl Carousel into XM Cloud Next.js Solution

  

Introduction:

In modern web development, incorporating dynamic and visually appealing components like carousels can greatly enhance user experience. This tutorial will guide you through the process of integrating Owl Carousel, a popular carousel plugin, into your XM Cloud Next.js solution. By following these steps, you'll be able to seamlessly incorporate a responsive carousel component into your Next.js application.

 

Step 1: Setting Up XM Cloud Next.js Project

Before integrating Owl Carousel, ensure that your XM Cloud Next.js project is set up and running. Follow the steps outlined in the [XM Cloud documentation](https://doc.sitecore.com/xp/en/xmc/en/developers/xm-cloud/walkthrough--connecting-the-next-js-application-directly-to-the-experience-edge-endpoint.html) to set up your project.

 

Step 2: Installing Owl Carousel and jQuery

Once your Next.js application is set up, the next step is to install Owl Carousel and jQuery. Navigate to the src/sxastarter directory in your project and run the following commands:

npm i react-owl-carousel

npm i jquery

Step 3: Configuring Owl Carousel Plugin

In the src/sxastarter/src/lib/next-config/plugins directory, create a new file named owlCarousel.js. Copy the following code into the file:

/**

 * @param {import('next').NextConfig} nextConfig

 */

const owlcarouselPlugin = (nextConfig = {}) => {

  return Object.assign({}, nextConfig, {

    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {

      config.plugins.push(

        new webpack.ProvidePlugin({

          $: "jquery",

          jQuery: "jquery",

          "window.jQuery": "jquery",

        })

      );
      return config;

    },

  });

};

module.exports = owlcarouselPlugin;

Step 4: Creating Carousel Component

Navigate to the src/sxastarter/src/components directory and create a new file named Carousel.tsx. Add the following code to define the Carousel component:

 import React from 'react';
import { ImageField, Image as JssImage } from '@sitecore-jss/sitecore-jss-nextjs';
import 'owl.carousel/dist/assets/owl.carousel.css';
import 'owl.carousel/dist/assets/owl.theme.default.css';
import dynamic from 'next/dynamic';

const OwlCarousel = dynamic(() => import('react-owl-carousel'), {
  ssr: false,
});


interface Fields {
  Image: ImageField;
}

type CarouselItem = {
  params: { [key: string]: string };
  fields: Fields;
};

type CarouselProps = {
  fields: ImageItems;
};

type ImageItems = {
  ImageItems: Array<CarouselItem>;
};

export const Default = (props: CarouselProps) => {
  const options = {
    loop: true,
    nav: false,
    dots: false,
    smartSpeed: 500,
    autoplay: true,
    autoplayHoverPause: true,
    mouseDrag: false,
    animateOut: 'slideOutUp',
    responsive: {
      0: {
        items: 1,
      },
      480: {
        items: 1,
      },
      600: {
        items: 1,
      },
      750: {
        items: 1,
      },
      960: {
        items: 1,
      },
      1170: {
        items: 1,
        margin: 30,
      },
      1300: {
        items: 1,
      },
    },
  };
  return (
    <>
      <section>
        <OwlCarousel
          responsive={options.responsive}
          loop={options.loop}
          autoplay={options.autoplay}
          nav={options.nav}
          dots={options.dots}
          animateOut={options.animateOut}
        >
          {props.fields.ImageItems.map((image: CarouselItem) => (
            <div className="item" key={image.params.itemId}>
              <JssImage field={image.fields.Image} />

              <div className="img-title">
                <JssText
                   tag="h4"
                   field={newsItem.fields.NewsHeading}
                ></JssText>
              </div>
            </div>
          ))}
        </OwlCarousel>
      </section>
    </>
  );
};

Result

Conclusion:

By following these steps, you've successfully integrated Owl Carousel into your XM Cloud Next.js solution. Now, you can easily create dynamic and responsive carousels to showcase images or other content within your Next.js application. Experiment with different options and configurations to customize the carousel according to your project requirements. Happy coding!