cards-slider-react-lib: A Customizable and Responsive React Slider Component

The card-slider-react-lib library provides a powerful and versatile React component for creating interactive and visually appealing card sliders in your web applications. This article delves into the features, usage, and customization options offered by card-slider-react-lib.

Key Features:

• Responsive Design: card-slider-react-lib automatically adapts the layout to display an optimal number of cards per view based on the user's screen size. This ensures a seamless experience across various devices.
• Highly Customizable: The library allows you to define the content of your cards, customize the number of cards displayed per view, and configure various other properties to match your specific requirements. You can even create custom card components for a truly unique look and feel.
• Effortless Card Management: card-slider-react-lib efficiently arranges your cards dynamically based on the current index, creating a smooth and continuous sliding effect.
• Interactive Navigation: The component comes with built-in navigation buttons that enable users to easily navigate through the cards, either forward or backward. You can also customize the color of these buttons for better integration with your application's design.

Properties (Props) for Customization:

array (Required): This is a mandatory property that takes an array of objects. Each object represents the content of a single card in your slider. The properties within these objects will be available as props in your custom card component.

cardNumPerView (Optional): This prop allows you to control the number of cards displayed per view. It provides manual control over the layout.

autoArrange (Optional, default: false): When enabled, this prop automatically adjusts the number of cards displayed based on the screen size, ensuring responsiveness. It overrides cardNumPerView when set to true.

buttonColor (Optional, default: '#000000'): This prop lets you customize the color of the navigation buttons to match your application's color scheme.

buttonWidth (Optional, default: '54px'): Set the width of the navigation buttons using CSS measurements (e.g., 'px', 'em').

buttonHeight (Optional, default: '54px'): Set the height of the navigation buttons using CSS measurements.

CustomCard: This is where you define your custom card component. It receives any props you pass within the <CardSlider>tag. Refer to the implementation of your CustomCard component for specific prop usage.

LeftSvgIcon (Optional): This prop allows you to override the default left navigation button with your custom SVG icon component.

RightSvgIcon (Optional): Similarly, you can override the default right navigation button with your custom SVG icon component.

slideTimeInterval (Optional, default: 3240): This prop sets the interval (in milliseconds) at which the slider auto-slides in an infinite loop.

allowSlidePerInterval (Optional): When enabled (true), this prop allows the slider to auto-slide without requiring users to click the navigation buttons. It also pauses auto-sliding when the user hovers over the slider, improving performance.

New Update

cardSpacing: this is use to give space to each card or image-card for customized display "gap"

buttonPosition: used to position the button around the slider, middle or middle-bottom or middle-top , default positioned at the right and left end of the slider container.

buttonPositionGap: when a value is passed here, it gives space to the navigation button relative to the buttonPosition

Custom Card Example

The provided example demonstrates the structure of a custom card component (CustomCard) that you can use with cards-slider-react-lib. This component renders the card content based on the props received from the CardSlidercomponent.

Basic Usage:

The usage section showcases how to integrate the CardSlider component into your React application. It demonstrates how to define card data, customize props, and create a custom card component.

Installation:

To install cards-slider-react-lib, use npm or yarn:

Bash
npm install cards-slider-react-lib

or

Bash
yarn add cards-slider-react-lib

Basic Usage:

Here's an example of integrating CardSlider into your React application:

import React from 'react';
import { CardSlider } from 'cards-slider-react-lib';
import CustomCard from './CustomCard'; // Your custom card component

const cardData = [
  { id: 1, title: 'Card 1', content: 'Content 1' },
  { id: 2, title: 'Card 2', content: 'Content 2' },
  { id: 3, title: 'Card 3', content: 'Content 3' },
  // ... more card data
];

function App() {
  return (
    <div className="App">
      <CardSlider
        `array={cardData}`
        `cardNumPerView={3}` // Or use autoArrange={true} for auto- 
        adjustment
        `buttonColor="#ff5733"`
        `buttonWidth="50px"`
        `buttonHeight="50px"`
        `CardComponent={(props) => <CustomCard {...props}
        additionalProp="1" />}`
        `cardSpacing={'30px'}` //this is use to give space to each card or 
        image-card for customized display "gap"
        `buttonPosition={'middle'}` or middle-bottom or middle-top, default 
        positioned at the end of the slider container 
        `buttonPositionGap={'10px'}` //when a value is passed here, it 
        gives space to the navigation button relative to the 
        buttonPosition
        // Other customization options...
      />
    </div>
  );
}

Comparison to Other Card Slider Libraries:

Several React libraries offer card slider functionalities. Here's a brief comparison of cards-slider-react-lib with two popular alternatives:

cs = cards-slider-react-lib
rsp=React Swiper
rs=React Slick


Feature             cs              rsp           rs
Responsiveness          Yes         Yes       Yes
Customization           High            High          High
Navigation Btn          Built-in    Optional      Optional
Autoplay            Optional    Yes       Yes
Touch Support           Yes         Yes       Yes
Documentation           Moderate    Good          Good
Ease of Use         Moderate    Moderate      Moderate

Additional Details:

Dynamic Screen Size Handling: As mentioned earlier, card-slider-react-lib employs breakpoints to automatically adjust the number of cards displayed per view based on screen size. Here's a breakdown of the default breakpoints:

Extra Small: 1 card
Small: 2 cards
Medium: 3 cards
Large: 4 cards

By leveraging card-slider-react-lib , you can create visually appealing and interactive card sliders that enhance the user experience in your React applications. Its flexibility and customization options allow you to tailor the component to your specific design needs and data structures.