Overview

Take your website to the next level with ReuseSliderCarousel. Effortlessly create stunning image carousels and captivating slideshows. Customize slide intervals, enable looping, and add intuitive button controls. Engage your visitors with seamless transitions and eye-catching animations. Showcase your content in style and leave a lasting impression.

Installation

To use ReuseSliderCarousel or HeadlessSliderCarousel you need to install below packages. Install which one You want to use in your project.

yarn add@locoworks/reusejs-react-slider-carousel
or
npm install @locoworks/reusejs-react-slider-carousel

External Dependencies

ReuseSliderCarousel and HeadlessSliderCarousel user useSlider hook to achieve functionality of Changing slide. Need to install useSldier

yarn add @locoworks/reusejs-toolkit-react-hooks
or 
npm install @locoworks/reusejs-toolkit-react-hooks

Importing

import { ReuseSliderCarousel } from "@locoworks/reusejs-react-slider-carousel";
or
import { HeadlessSliderCarousel } from "@locoworks/reusejs-react-slider-carousel";

HeadlessSliderCarousel props

  • slides (required) : An array of ReactNode elements representing the individual slides to be displayed in the carousel.
  • dependency (required) : A dependency value that triggers the carousel to resume scrolling when it changes. This can be useful when you want to update the carousel based on external changes, such as data updates.
  • Apart from above it also accepts all the props a HTMLDivElement Accepts.

ReuseSliderCarousel Overview

The ReuseSliderCarousel component is a reusable carousel component that displays a collection of slides. It provides functionality for automatic slide transitions, navigation buttons, and customizable styles.

  • React component that renders a slider carousel using the ReuseSliderCarousel component from the @locoworks/reusejs-react-slider-carousel library. The slider displays a list of slides, and it automatically transitions between slides at a specified interval.
  • The slider component from ReuseSliderCarousel has the feature to go to the next or previous slide when clicked, based on the click position. It detects the click position relative to the slider container and determines whether the user clicked on the left or right side of the container.

ReuseSliderCarousel Props

  • slideInterval (number): The interval (in milliseconds) between slide transitions.
  • slides (React.ReactNode[]): An array of ReactNode elements representing the slides to be displayed.
  • loop (boolean): A boolean value indicating whether the carousel should loop back to the first slide after reaching the last slide.
  • wrapperClasses (string): Additional CSS classes to be applied to the wrapper container element.
  • enableButtons (boolean): A boolean value indicating whether navigation buttons should be displayed.
  • previousButton (React.ReactNode): Custom ReactNode element to be used as the previous button to back on the previous slide.
  • nextButton (React.ReactNode): Custom ReactNode element to be used as the next button to go to the next slide.
  • animationStyle (string): Determines the animation style of the slider. Set this prop to 'continue' to enable continuous looping with slide chaining. When set to 'continue', the slider will seamlessly transition from the last slide to the first slide, creating a continuous loop effect.
  • sliderContainerClasses (string): This custom class, "slide-right-to-left", is specifically created for animation purposes. You have the flexibility to create personalized animations by designing your own custom animations. Simply replace the default class name 'slide-right-to-left' with your own animation class name, allowing you to achieve your desired animation effects.

Examples

Slider without button

Slider 1

Monitor, manage, quote, compare, and conquer market surprises

import React from "react";
import { ReuseSliderCarousel } from "@locoworks/reusejs-react-slider-carousel";
interface ListInterface {
	heading: string;
	phrase: string;
}

const List: ListInterface[] = [
	{
		heading: "Slider 1",
		phrase: "Monitor, manage, quote, compare, and conquer market surprises",
	},
	{
		heading: "Slider 2",
		phrase:
			"Quantify risk on your exposures and plan ahead with real-time forex rates 24X5",
	},
	{
		heading: "Slider 3",
		phrase: "Let the system help you with hedge pickups vs cash rates",
	},
	{
		heading: "Slider 4",
		phrase:
			"Compute the viability of deals and prepare quotes to win new business",
	},
	{
		heading: "Slider 5",
		phrase: "Pay only when you need us on a per consult basis",
	},
];

const Slide = ({ heading, phrase }: ListInterface) => {
	return (
		<div className="flex flex-col bg-red-300 cursor-pointer justify-center items-center h-full w-screen overflow-hidden slide-right-to-left mx-6">
			<div className="flex justify-center items-center flex-col h-96 w-full">
				<div className="flex flex-col justify-center items-center text-center">
					<h1 className={`text-4xl font-bold mt-3 ease-linear origin-left`}>
						{heading}
					</h1>
					<p
						className={`mt-2 text-lg font-normal text-fray-400 ease-linear origin-left`}
					>
						{phrase}
					</p>
				</div>
			</div>
		</div>
	);
};

const slidesArray: React.ReactNode[] = List.map(
	(element: ListInterface, index: number) => {
		return (
			<Slide
				heading={element.heading}
				phrase={element.phrase}
				key={"Slide" + index}
			/>
		);
	},
);

const SimpleSlider = () => {
	return (
		<div className="flex flex-col items-center gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseSliderCarousel
				slideInterval={2000}
				slides={slidesArray}
				loop={true}
			/>
		</div>
	);
};

export default SimpleSlider;

Slider With Buttons

  • If the enableButtons prop is set to true, the ReuseSliderCarousel component will display next and previous buttons instead of relying on the container click event. The container click event handling code can be removed in this case.
≪
≫

Slider 1

Monitor, manage, quote, compare, and conquer market surprises

import React from "react";
import { ReuseSliderCarousel } from "@locoworks/reusejs-react-slider-carousel";
interface ListInterface {
	heading: string;
	phrase: string;
}

const List: ListInterface[] = [
	{
		heading: "Slider 1",
		phrase: "Monitor, manage, quote, compare, and conquer market surprises",
	},
	{
		heading: "Slider 2",
		phrase:
			"Quantify risk on your exposures and plan ahead with real-time forex rates 24X5",
	},
	{
		heading: "Slider 3",
		phrase: "Let the system help you with hedge pickups vs cash rates",
	},
	{
		heading: "Slider 4",
		phrase:
			"Compute the viability of deals and prepare quotes to win new business",
	},
	{
		heading: "Slider 5",
		phrase: "Pay only when you need us on a per consult basis",
	},
];

const Slide = ({ heading, phrase }: ListInterface) => {
	return (
		<div className="flex flex-col bg-red-300 cursor-pointer justify-center items-center h-full w-screen overflow-hidden slide-right-to-left mx-6">
			<div className="flex justify-center items-center flex-col h-96 w-full">
				<div className="flex flex-col justify-center items-center text-center">
					<h1 className={`text-4xl font-bold mt-3 ease-linear origin-left`}>
						{heading}
					</h1>
					<p
						className={`mt-2 text-lg font-normal text-fray-400 ease-linear origin-left`}
					>
						{phrase}
					</p>
				</div>
			</div>
		</div>
	);
};
const slidesArray: React.ReactNode[] = List.map(
	(element: ListInterface, index: number) => {
		return (
			<Slide
				heading={element.heading}
				phrase={element.phrase}
				key={"Slide" + index}
			/>
		);
	},
);

const SliderWithButton = () => {
	return (
		<div className="flex flex-col items-center gap-x-3 justify-center py-10 mt-10 border rounded bg-gray-50">
			<ReuseSliderCarousel
				slideInterval={2000}
				slides={slidesArray}
				loop={true}
				enableButtons={true}
			/>
		</div>
	);
};

export default SliderWithButton;

Slider With LinearSlideChain

Slider 1

Monitor, manage, quote, compare, and conquer market surprises

Slider 2

Quantify risk on your exposures and plan ahead with real-time forex rates 24X5

Slider 3

Let the system help you with hedge pickups vs cash rates

Slider 4

Compute the viability of deals and prepare quotes to win new business

Slider 5

Pay only when you need us on a per consult basis

import React from "react";
import { useSlider } from "@locoworks/reusejs-toolkit-react-hooks";
import { HeadlessSliderCarousel } from "@locoworks/reusejs-react-slider-carousel";

interface ListInterface {
	heading: string;
	phrase: string;
}

const List: ListInterface[] = [
	{
		heading: "Slider 1",
		phrase: "Monitor, manage, quote, compare, and conquer market surprises",
	},
	{
		heading: "Slider 2",
		phrase:
			"Quantify risk on your exposures and plan ahead with real-time forex rates 24X5",
	},
	{
		heading: "Slider 3",
		phrase: "Let the system help you with hedge pickups vs cash rates",
	},
	{
		heading: "Slider 4",
		phrase:
			"Compute the viability of deals and prepare quotes to win new business",
	},
	{
		heading: "Slider 5",
		phrase: "Pay only when you need us on a per consult basis",
	},
];

const Slide = ({ heading, phrase }: ListInterface) => {
	return (
		<div className="flex flex-col bg-red-300 cursor-pointer justify-center items-center h-full w-screen overflow-hidden slide-right-to-left mx-6">
			<div className="flex justify-center items-center flex-col h-96 w-full">
				<div className="flex flex-col justify-center items-center text-center">
					<h1 className={`text-4xl font-bold mt-3 ease-linear origin-left`}>
						{heading}
					</h1>
					<p
						className={`mt-2 text-lg font-normal text-fray-400 ease-linear origin-left`}
					>
						{phrase}
					</p>
				</div>
			</div>
		</div>
	);
};

const slidesArray: React.ReactNode[] = List.map(
	(element: ListInterface, index: number) => [
		<div className="w-full h-full flex bg-green-300 shrink-0" key={index}>
			<Slide
				heading={element.heading}
				phrase={element.phrase}
				key={"Slide" + index}
			/>
		</div>,
	],
);

const HeadlessSlider = () => {
	const { currentSlideIndex } = useSlider({
		slideInterval: 2000,
		slides: slidesArray,
		loop: true,
	});
	return (
		<div>
			<HeadlessSliderCarousel
				slides={slidesArray}
				dependency={currentSlideIndex}
				className="flex h-full w-full items-center align-center  overflow-hidden text-center"
			/>
		</div>
	);
};

export default HeadlessSlider;

HeadlessSliderCarousel Props Table

PropTypeDescription
slidesArray of ReactNodeAn array of ReactNode elements representing the individual slides to be displayed in the carousel.
dependencyAnyA dependency value that triggers the carousel to resume scrolling when it changes.
This can be useful when you want to update the carousel based on external changes, such as data updates.
HTMLDivPropsAnyApart from the above, it also accepts all the props that an HTMLDivElement accepts.

ReuseSliderCarousel Props Table

PropTypeDescription
slideIntervalnumberThe interval (in milliseconds) between slide transitions.
slidesArray of ReactNodeAn array of ReactNode elements representing the slides to be displayed.
loopbooleanA boolean value indicating whether the carousel should loop back to the first slide after reaching the last slide.
wrapperClassesstringAdditional CSS classes to be applied to the wrapper container element.
enableButtonsbooleanA boolean value indicating whether navigation buttons should be displayed.
previousButtonReact.ReactNodeCustom ReactNode element to be used as the previous button to go back to the previous slide.
nextButtonReact.ReactNodeCustom ReactNode element to be used as the next button to go to the next slide.
animationStylestringDetermines the animation style of the slider. Set this prop to 'continue' to enable continuous looping with slide chaining.
sliderContainerClassesstringThis custom class, "slide-right-to-left", is specifically created for animation purposes.

HeadlessSliderCarousel Functionality

  • Automatic Scrolling: The carousel automatically scrolls through the slides horizontally. It uses the scrollLeft property and scrollTo method to control the scrolling behavior.

  • Slide Resizing: The component adjusts the size of the slides dynamically based on the width of the parent container. This ensures that the slides are responsive and fill the available space.

  • Looping: The carousel loops back to the beginning once it reaches the end of the slides. This creates a seamless scrolling experience.

  • Customizability: The component is designed to be headless, allowing you to customize the presentation and styling of the slides as per your requirements. You can provide any React components or content as slides.

Node

  • The HeadlessSliderCarousel component is a customizable carousel/slider component for displaying a set of slides. It provides automatic scrolling functionality and is designed to be headless, meaning it handles the core functionality of the slider while allowing you to control the presentation and styling.