@ahmed-osama-salem/swiper-react-component
v1.3.0
Published
  [;
export const metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
};
export default function RootLayout({
children,
}: {
children: React.ReactNode,
}) {
return (
<html lang="en">
<body className={nunito.className}>{children}</body>
</html>
);
}
🚀 Usage
your first swiper component
import { SwiperCarousel } from '@ahmed-osama-salem/swiper-react-component';
interface ShapeOneProps {
item?: { id: number };
}
// THIS IS YOUR SWIPERSLIDE COMPONENT THAT AUTOMATICALLY READ EVERY OBJECT OF YOUR DATA AS item prop
// YOU CAN CUSTOMIZE YOUR OWN
const ShapeOne = (props: ShapeOneProps) => {
return (
<div className="flex h-[250px] w-[100%] items-center justify-center bg-stone-300 rounded-lg ">
{props.item?.id}
</div>
);
};
const SwiperPagination = () => {
// Your custom data you can add any data like you want , but must have an id key
const data = [
{ id: 1 },
{ id: 2 },
{ id: 3 },
{ id: 4 },
{ id: 5 },
{ id: 6 },
{ id: 7 },
];
return (
<div className="w-full">
<SwiperCarousel
item={data}
slidesPerView={1}
pagination
navigation
spaceBetween={2}
direction="horizontal"
swiperContainerClass="w-[80%]"
>
<ShapeOne />
</SwiperCarousel>
</div>
);
};
export default SwiperPagination;
swiper component can easy handle api data by passing your api data state
import { SwiperCarousel } from '@ahmed-osama-salem/swiper-react-component';
import axios from 'axios';
import { useEffect, useState } from 'react';
const ShapeOne = ({
item,
}: {
item?: { id: number, urls: { raw: string } },
}) => {
return (
<div className="flex h-[250px] w-[250px] items-center justify-center bg-stone-300 rounded-full">
<img
alt="image"
src={item?.urls.raw}
className=" rounded-full object-cover w-full h-full"
/>
</div>
);
};
const SwiperWithApi = () => {
const [data, setData] = useState([]);
const getRandomData = async () => {
const res = await axios
.get(
'https://api.unsplash.com/photos/?client_id=9dfwtUcXdaD9C3I6HXgAq-3R4Ceyry8mv9ryFvd54dA'
)
.then(data => {
setData(data.data);
})
.catch(err => {
return err;
});
return res;
};
useEffect(() => {
getRandomData();
}, []);
return (
<SwiperCarousel
item={data}
navigation
slidesPerView={5}
spaceBetween={2}
direction="horizontal"
>
<ShapeOne />
</SwiperCarousel>
);
};
export default SwiperWithApi;
swiperProps
can provide any props from swiper lib from one prop
<SwiperCarousel
item={data}
slidesPerView={1}
pagination
spaceBetween={2}
direction="horizontal"
swiperContainerClass="w-[80%]"
swiperProps={{ pagination: { type: 'progressbar' } }} // HERE
>
<ShapeOne />
</SwiperCarousel>
Props
| Prop | Type | Description |
| :---------------------------- | :-----------------------: | :----------------------------------------------------------------------------------------------------------------------------------- |
| item(required) | object[] | slides data with the following keys: id
is the primary Example: [{id: 1, anything: 'sub'}, { id: 2, anything: "sub 2"}]
|
| children(required) | ReactElement<{ item: T }> | your component that will render every object in your data in a single slide of swiper that accept any shape of data. |
| direction(recommended) | string | by default is horizontal "horizontal" or "vertical"
|
| slidesPerView | number | number of how may slide show per view of swiper by default is 4
|
| spaceBetween | number | number of gaps between slides by default is 30
|
| pagination | boolean | true
if you want to add pagination |
| navigation | boolean | true
if you want to add navigation |
| swiperContainerClass | string | class of main swiper container accept any css class ,tailwind or bootstrap classes |
| swiperSlideClass | string | class of swiper slides accept any css class ,tailwind or bootstrap classes. |
| swiperProps | SwiperOptions | this prop catches any option or props in swiper lib and give you many option to handle your swiper . |
Browser Compatibility
| Browser | Works? | | :------ | :----- | | Chrome | Yes | | Firefox | Yes | | Safari | Yes | | IE 11 | Yes |
🤝 Contributing
Contributions, issues and feature requests are welcome. Feel free to check issues page if you want to contribute. Check the contributing guide.
Author
👤 Ahmed Osama
- Linkedin: @AhmedOsama
- Github: Ahmed Osama
Show your support
Please ⭐️ this repository if this package helped you!
📝 License
Copyright © 2023 Ahmed Osama. This project is MIT licensed.