Horizontal Card Slider

A responsive and interactive horizontal card slider component for React applications.

WARNING: IMAGE LOADING CAUSES LAG. UPDATE IMAGE LOADING TO YOUR PREFERRED PREFERENCES

About

The Horizontal Card Slider component creates a visually appealing horizontal slider with cards that can display images. It features smooth animations, lazy loading of images, and interactive hover effects.

Installation

Copy the component file into your project:

"use client";
import React, { useState, useEffect, useRef } from "react";
import { StaticImageData } from "next/image";
import images from "./images";

interface Card {
  id: number;
  imgSrc: StaticImageData;
}

const HorizontalCardSlider: React.FC = () => {
  const [cards, setCards] = useState<Card[]>([]);
  const containerRef = useRef<HTMLDivElement | null>(null);

  useEffect(() => {
    const newCards = images.map((img: StaticImageData, index: number) => ({
      id: index + 1,
      imgSrc: img,
    }));
    setCards(newCards);
  }, []);

  const handleMouseOver = (e: React.MouseEvent<HTMLDivElement>) => {
    const currentTransform = e.currentTarget.style.transform;
    const translateY = currentTransform.match(/translateY\((.*?)\)/);
    const translateYValue = translateY ? translateY[1] : '0px';
    e.currentTarget.style.transform = `translateY(${translateYValue}) translateX(25%)`;
  };

  const handleMouseOut = (e: React.MouseEvent<HTMLDivElement>) => {
    const currentTransform = e.currentTarget.style.transform;
    const translateY = currentTransform.match(/translateY\((.*?)\)/);
    const translateYValue = translateY ? translateY[1] : '0px';
    e.currentTarget.style.transform = `translateY(${translateYValue}) translateX(0%)`;
  };

  // ... (rest of the component code)

  return (
    <div className="container" style={containerStyles} ref={containerRef}>
      <div className="slider" style={sliderStyles}>
        {cards.map((card, index) => (
          <div
            key={card.id}
            className="card"
            style={{
              ...cardStyles,
              left: `${(cards.length - 1 - index) * 60}px`,
              right: `${(cards.length - 1 - index) * 60}px`,
              opacity: 1,
            }}
            onMouseOver={handleMouseOver}
            onMouseOut={handleMouseOut}
          >
            <img
              src={card.imgSrc.src}
              alt={`img${card.id}`}
              style={imgStyles}
              loading="lazy"
              onLoad={(e) => {
                (e.currentTarget.parentElement as HTMLDivElement).style.opacity = "1";
              }}
            />
          </div>
        ))}
      </div>
    </div>
  );
};

export default HorizontalCardSlider;

Usage

Import and use the Horizontal Card Slider component in your React application:

import { HorizontalCardSlider } from '@/components/polyblock/HorizontalCardSlider'

export default function MyComponent() {
  return (
    <div>
      <h1>My Image Slider</h1>
      <HorizontalCardSlider />
    </div>
  )
}

Examples

Basic Usage

API Reference

The Horizontal Card Slider component doesn't accept any props currently, but it relies on an 'images' import for the card content.

Prop	Type	Description	Default
-	-	-	-

Advanced Usage

Customizing Images

To use custom images, modify the 'images' import to include your desired image files.

Styling

The component uses inline styles for layout and animations. To customize the appearance, you can modify the style objects within the component.

Performance Considerations

The component uses lazy loading for images to improve performance. For large sets of images, consider implementing pagination or infinite scrolling.