@tg-academy/carousel
v0.1.4
Published
A custom react component library for component sliding, it gives the ability to fully customize the sliding buttons.
Downloads
2
Maintainers
Readme
TG Carousel: React Component Library for Component Sliding
tg-carousel
is a versatile React component library designed to provide a simple and flexible solution for implementing sliding carousels in your React applications. It addresses the challenge of precise control over sliding buttons and offers a range of customization options.
Features
Responsive Design: Automatically adjusts to different screen sizes with customizable slides per page for an optimal viewing experience.
Media Query Support: Define specific settings for different screen widths using media queries, ensuring your carousel looks great across various devices.
Easy Integration: Integrate the carousel effortlessly into your React projects with a minimal setup process.
Installation
Install tg-carousel
using npm:
npm install @tg-academy/carousel
Usage
import React from "react";
import { Carousel, CarouselSlide } from "@tg-academy/carousel";
import "@tg-academy/carousel/css";
// Your custom Card component
import Card from "./Card";
function App() {
return (
<main>
<Carousel
options={{
default: {
slidesPerPage: 1,
justifyContent: "center",
},
mediaQueries: {
"680": {
slidesPerPage: 2,
justifyContent: "space-around",
},
"720": {
slidesPerPage: 3,
justifyContent: "space-around",
},
},
}}
>
{/* Your CarouselSlides with custom Card components */}
<CarouselSlide>
<Card
image="/1.jpg"
title="First Gaming Setup"
description="Your custom description here."
/>
</CarouselSlide>
{/* ... Add more slides here */}
</Carousel>
</main>
);
}
export default App;