BeforeAfterSlider Module

Overview

The BeforeAfterSlider module is a powerful and flexible tool designed to visually showcase the transformation between two images, such as a "before" and "after" comparison. With intuitive sliding functionality, users can easily compare images by dragging the slider left or right. This module is fully customizable, allowing you to modify the appearance, text, and images to fit your specific design and content needs.

To maximize SEO benefits, the core logic of the slider is separated into a client-side component (BeforeAfterSliderClient.js), while the main presentation and layout are handled in BeforeAfterSlider.js. This separation benefits search engine optimization.

Location

The source code for the BeforeAfterSlider module can be found in the /modules/native/BeforeAfterSlider folder.

Usage

The BeforeAfterSlider module is highly customizable through props. While most props have default values, they can be easily overridden to tailor the module to your specific requirements.

Props

1. sectionColors

• Default Value:

  const defaultSectionColors = {
      background: "bg-accent",
      foreground: "text-accent-foreground",
      sliderBackground: "bg-background",
      sliderForeground: "text-foreground"
  };
• Description: The sectionColors prop allows you to customize the background and foreground colors of various sections within the BeforeAfterSlider module. This includes the main background, text color, and the colors associated with the slider itself.
• Property Descriptions:
  • background: Defines the overall background color of the section.
  • foreground: Sets the text color for the heading and description.
  • sliderBackground: Determines the color of the slider track.
  • sliderForeground: Specifies the color of the slider handle, including the left-right arrow icon.
• Additional Notes:
  • bg-accent, text-accent-foreground, etc., are theme colors. For more information, refer to the documentation: Theming.
  • You can easily swap main and accent colors. Just apply main colors by setting background: "bg-background" and foreground: "text-foreground".
  • If you want to use your own colors and maintain dark mode support, you can specify classes like bg-white dark:bg-black to ensure the color changes appropriately based on the theme.
  • The sectionColors object can be partially updated with props. For example, if you only want to change the background color while keeping other defaults, you can do it like this:

    <BeforeAfterSlider 
        sectionColors={{ 
            background: "bg-blue-200 dark:bg-blue-700" 
        }}
    />

2. text

• Default Value:

  const defaultText = {
      heading: "Before & After Module",
      description: "Before and after comparisons have never been simpler. Highlight the transformative impact with just a simple slide, making it easy for customers to visualize the changes from before to after."
  };
• Description: The text prop allows you to customize the heading and description displayed above the slider. This makes it easy to tailor the content to suit the specific context of your comparison.
• Property Descriptions:
  • heading: The main title of the module.
  • description: A brief explanation or additional context for the comparison.
• Additional Notes:
  • You can customize the text content to match your brand’s tone and messaging.
  • If you do not pass any text prop, the default heading and description will be used.
  • The text object can be partially updated with props. If you want, you can change the heading text while keeping other defaults.

3. images

• Default Value:

  const defaultImages = {
      beforeImage: "/images/demo/shoe1.jpeg",
      afterImage: "/images/demo/shoe2.jpeg"
  };
• Description: The images prop allows you to specify the images used for the "before" and "after" comparison.
• Property Descriptions:
  • beforeImage: The image displayed on the left side of the slider.
  • afterImage: The image displayed on the right side of the slider.
• Additional Notes:
  • Images should be provided as valid URLs or paths to image files.
  • Ensure that the images have similar dimensions for the best visual alignment.
  • The images object can be partially updated with props. If you want, you can change the beforeImage URL while keeping other defaults.

Usage Example without Props

To use the BeforeAfterSlider module with all default settings, you can include it in your page as follows:

import BeforeAfterSlider from "@/modules/native/BeforeAfterSlider";
 
const MyPage = () => {
  return (
    <BeforeAfterSlider />
  );
}
 
export default MyPage;

This example will render the slider with default colors, text, and demo images.

Usage Example with Props

Here’s an example demonstrating how to customize the BeforeAfterSlider module with props:

import BeforeAfterSlider from "@/modules/native/BeforeAfterSlider";
 
const CustomPage = () => {
  return (
    <BeforeAfterSlider 
        sectionColors={{
            background: "bg-gray-200 dark:bg-gray-800",
            foreground: "text-gray-900 dark:text-gray-100",
            sliderBackground: "bg-blue-500",
            sliderForeground: "text-white"
        }}
        text={{
            heading: "Our Amazing Transformation",
            description: "Witness the dramatic change after our services!"
        }}
        images={{
            beforeImage: "/images/transform/before.jpg",
            afterImage: "/images/transform/after.jpg"
        }}
    />
  );
}
 
export default CustomPage;

In this example:

• The colors are customized to fit a gray and blue theme, with dark mode support.
• The heading and description are updated to match the content.
• Custom images are provided for the "before" and "after" views.

Conclusion

The BeforeAfterSlider module offers an elegant solution for showcasing transformations through a simple and intuitive slider interface. With customizable colors, text, and images, it is easy to integrate into any project. The separation of client-side code ensures that you retain maximum SEO benefits.