react-styled-slider-component 0.1.8 → 0.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +120 -52
- package/dist/App.d.ts +1 -1
- package/dist/App.js +98 -4
- package/dist/App.test.js +4 -4
- package/dist/components/Slider/Slider.d.ts +11 -0
- package/dist/components/Slider/Slider.js +84 -0
- package/dist/components/Slider/SliderButton.d.ts +4 -0
- package/dist/components/Slider/SliderButton.js +29 -0
- package/dist/components/Slider/SliderDots.d.ts +6 -0
- package/dist/components/Slider/SliderDots.js +23 -0
- package/dist/components/Slider/SliderStyles.styles.d.ts +19 -0
- package/dist/components/Slider/SliderStyles.styles.js +60 -0
- package/dist/components/Slider/SliderTrack.d.ts +5 -0
- package/dist/components/Slider/SliderTrack.js +45 -0
- package/dist/components/Slider/index.d.ts +4 -0
- package/dist/components/Slider/index.js +4 -0
- package/dist/components/Slider.d.ts +8 -41
- package/dist/components/Slider.js +48 -92
- package/dist/components/SliderStyles.styles.d.ts +1 -1
- package/dist/components/SliderStyles.styles.js +17 -20
- package/dist/context/SliderContext.d.ts +4 -0
- package/dist/context/SliderContext.js +9 -0
- package/dist/export.d.ts +2 -0
- package/dist/export.js +2 -0
- package/dist/types/Slider.types.d.ts +37 -0
- package/dist/types/Slider.types.js +1 -0
- package/package.json +9 -1
package/README.md
CHANGED
|
@@ -1,74 +1,142 @@
|
|
|
1
|
-
#
|
|
1
|
+
# react-styled-slider-component
|
|
2
2
|
|
|
3
|
-
A customizable
|
|
3
|
+
A highly customizable, responsive React slider component built with TypeScript and Styled Components.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## 🚀 Features
|
|
6
6
|
|
|
7
|
-
|
|
7
|
+
- **Compound Components:** Full control over slider layout (`Slider.Track`, `Slider.Button`, `Slider.Dots`).
|
|
8
|
+
- **Responsive Breakpoints:** Easily adjust visible slides for Mobile, Tablet, and Desktop.
|
|
9
|
+
- **Touch & Swipe Support:** Native feel on mobile devices.
|
|
10
|
+
- **Infinite Loop:** Seamless back-to-start navigation.
|
|
11
|
+
- **Autoplay:** Smart timer with pause on interaction.
|
|
12
|
+
- **Customizable Arrows:** Multiple styles (`minimal`, `filled`, `outlined`, `plain`) and custom icons.
|
|
13
|
+
- **Gap Support:** Add consistent spacing between slides.
|
|
14
|
+
- **TypeScript Ready:** Fully typed for a better developer experience.
|
|
15
|
+
|
|
16
|
+
## 📦 Installation
|
|
8
17
|
|
|
9
18
|
```bash
|
|
10
19
|
npm install react-styled-slider-component
|
|
20
|
+
# or
|
|
21
|
+
yarn add react-styled-slider-component
|
|
11
22
|
```
|
|
12
23
|
|
|
13
|
-
## Usage
|
|
24
|
+
## 🛠 Usage Examples
|
|
25
|
+
|
|
26
|
+
### 1. Full Width Hero Slider (Autoplay)
|
|
27
|
+
|
|
28
|
+
Perfect for landing pages. Shows one large image at a time.
|
|
14
29
|
|
|
15
|
-
|
|
30
|
+
<img src= "https://res.cloudinary.com/dxqyvjf5r/image/upload/v1772570316/npm%20package/full_width_slider_v2vcbh.png"/>
|
|
16
31
|
|
|
17
32
|
```tsx
|
|
18
|
-
import
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
<
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
export default App;
|
|
33
|
+
import { Slider } from "react-styled-slider-component";
|
|
34
|
+
|
|
35
|
+
const HeroSlider = () => (
|
|
36
|
+
<Slider
|
|
37
|
+
visibleSlides={1}
|
|
38
|
+
infinite={true}
|
|
39
|
+
autoplay={true}
|
|
40
|
+
autoplaySpeed={4000}
|
|
41
|
+
>
|
|
42
|
+
<Slider.Button type="prev" style="minimal" />
|
|
43
|
+
<Slider.Track>
|
|
44
|
+
<div style={{ height: "400px" }}>
|
|
45
|
+
<img
|
|
46
|
+
src="image1.jpg"
|
|
47
|
+
style={{ width: "100%", height: "100%", objectFit: "cover" }}
|
|
48
|
+
/>
|
|
49
|
+
</div>
|
|
50
|
+
<div style={{ height: "400px" }}>
|
|
51
|
+
<img
|
|
52
|
+
src="image2.jpg"
|
|
53
|
+
style={{ width: "100%", height: "100%", objectFit: "cover" }}
|
|
54
|
+
/>
|
|
55
|
+
</div>
|
|
56
|
+
</Slider.Track>
|
|
57
|
+
<Slider.Button type="next" style="minimal" />
|
|
58
|
+
<Slider.Dots position="bottom" />
|
|
59
|
+
</Slider>
|
|
60
|
+
);
|
|
47
61
|
```
|
|
48
62
|
|
|
49
|
-
|
|
63
|
+
### 2. Multi-Item Responsive Carousel
|
|
50
64
|
|
|
51
|
-
|
|
65
|
+
Shows multiple items at once and adjusts automatically based on screen size.
|
|
66
|
+
<img src= "https://res.cloudinary.com/dxqyvjf5r/image/upload/v1772570315/npm%20package/multi_Item_slider_ittwfh.png"/>
|
|
67
|
+
|
|
68
|
+
```tsx
|
|
69
|
+
const Carousel = () => (
|
|
70
|
+
<Slider
|
|
71
|
+
visibleSlides={1}
|
|
72
|
+
infinite={true}
|
|
73
|
+
gap={20}
|
|
74
|
+
breakpoints={{
|
|
75
|
+
768: { visibleSlides: 2 },
|
|
76
|
+
1024: { visibleSlides: 4 },
|
|
77
|
+
}}
|
|
78
|
+
>
|
|
79
|
+
<Slider.Button type="prev" style="filled" />
|
|
80
|
+
<Slider.Track>
|
|
81
|
+
<div style={{ height: "200px", background: "#FFD700" }}>Item 1</div>
|
|
82
|
+
<div style={{ height: "200px", background: "#FF8C00" }}>Item 2</div>
|
|
83
|
+
<div style={{ height: "200px", background: "#FF4500" }}>Item 3</div>
|
|
84
|
+
<div style={{ height: "200px", background: "#FF0000" }}>Item 4</div>
|
|
85
|
+
<div style={{ height: "200px", background: "#C71585" }}>Item 5</div>
|
|
86
|
+
</Slider.Track>
|
|
87
|
+
<Slider.Button type="next" style="filled" />
|
|
88
|
+
<Slider.Dots position="bottom" />
|
|
89
|
+
</Slider>
|
|
90
|
+
);
|
|
91
|
+
```
|
|
52
92
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
93
|
+
### 3. Vertical Slider
|
|
94
|
+
|
|
95
|
+
Slides items from bottom to top. Ideal for sidebars or vertical lists.
|
|
96
|
+
|
|
97
|
+
<img src= "https://res.cloudinary.com/dxqyvjf5r/image/upload/v1772570316/npm%20package/vertical_slider_oagp8i.png"/>
|
|
98
|
+
|
|
99
|
+
```tsx
|
|
100
|
+
const VerticalSlider = () => (
|
|
101
|
+
<div style={{ height: "500px" }}>
|
|
102
|
+
<Slider direction="vertical" visibleSlides={2} infinite={true} gap={10}>
|
|
103
|
+
<Slider.Button type="prev" style="outlined" />
|
|
104
|
+
<Slider.Track>
|
|
105
|
+
<div style={{ height: "200px", background: "#f0f0f0" }}>Vertical 1</div>
|
|
106
|
+
<div style={{ height: "200px", background: "#e0e0e0" }}>Vertical 2</div>
|
|
107
|
+
<div style={{ height: "200px", background: "#d0d0d0" }}>Vertical 3</div>
|
|
108
|
+
</Slider.Track>
|
|
109
|
+
<Slider.Button type="next" style="outlined" />
|
|
110
|
+
<Slider.Dots position="right" />
|
|
111
|
+
</Slider>
|
|
112
|
+
</div>
|
|
113
|
+
);
|
|
114
|
+
```
|
|
64
115
|
|
|
116
|
+
## ⚙️ Props
|
|
65
117
|
|
|
66
|
-
|
|
118
|
+
### Slider (Main Container)
|
|
67
119
|
|
|
68
|
-
|
|
120
|
+
| Prop | Type | Default | Description |
|
|
121
|
+
| :-------------- | :--------------------------- | :------------- | :-------------------------------------------------------- |
|
|
122
|
+
| `visibleSlides` | `number` | `1` | Number of slides to show at once. |
|
|
123
|
+
| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | Sliding orientation. |
|
|
124
|
+
| `infinite` | `boolean` | `false` | Enable infinite looping. |
|
|
125
|
+
| `autoplay` | `boolean` | `false` | Automatically transition slides. |
|
|
126
|
+
| `autoplaySpeed` | `number` | `3000` | Delay in ms for autoplay. |
|
|
127
|
+
| `gap` | `number` | `0` | Spacing between slides in pixels. |
|
|
128
|
+
| `breakpoints` | `object` | `undefined` | Responsive rules (e.g., `{ 768: { visibleSlides: 2 } }`). |
|
|
69
129
|
|
|
70
|
-
|
|
130
|
+
### Slider.Button
|
|
71
131
|
|
|
72
|
-
|
|
132
|
+
| Prop | Type | Default | Description |
|
|
133
|
+
| :--------- | :----------------------------------------------- | :------------ | :------------------------------------- |
|
|
134
|
+
| `type` | `'prev' \| 'next'` | **Required** | Direction of the button. |
|
|
135
|
+
| `style` | `'minimal' \| 'filled' \| 'outlined' \| 'plain'` | `'minimal'` | Visual style of the button. |
|
|
136
|
+
| `children` | `ReactNode` | Default Icons | Custom text or icon inside the button. |
|
|
73
137
|
|
|
138
|
+
### Slider.Dots
|
|
74
139
|
|
|
140
|
+
| Prop | Type | Default | Description |
|
|
141
|
+
| :--------- | :--------------------------------------- | :--------- | :---------------------------- |
|
|
142
|
+
| `position` | `'top' \| 'bottom' \| 'left' \| 'right'` | `'bottom'` | Placement of navigation dots. |
|
package/dist/App.d.ts
CHANGED
package/dist/App.js
CHANGED
|
@@ -10,11 +10,105 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
import Slider from
|
|
13
|
+
import { Slider } from "./components/Slider";
|
|
14
14
|
var App = function () {
|
|
15
|
-
return (_jsxs("div", __assign({ style: {
|
|
15
|
+
return (_jsxs("div", __assign({ style: {
|
|
16
|
+
padding: "50px",
|
|
17
|
+
maxWidth: "1200px",
|
|
18
|
+
margin: "0 auto",
|
|
19
|
+
fontFamily: "Arial, sans-serif",
|
|
20
|
+
} }, { children: [_jsx("h1", __assign({ style: { textAlign: "center", marginBottom: "50px" } }, { children: "Slider Component Test Lab" })), _jsxs("section", __assign({ style: { marginBottom: "80px" } }, { children: [_jsx("h3", { children: "1. Full Width Hero (1 slide at a time)" }), _jsxs(Slider, __assign({ visibleSlides: 1, infinite: true, autoplay: true, autoplaySpeed: 4000, gap: 0 }, { children: [_jsx(Slider.Button, { type: "prev", style: "minimal" }), _jsxs(Slider.Track, { children: [_jsx("div", __assign({ style: { width: "100%", height: "400px" } }, { children: _jsx("img", { src: "https://picsum.photos/1200/400?random=11", alt: "1", style: { width: "100%", height: "100%", objectFit: "cover" } }) })), _jsx("div", __assign({ style: { width: "100%", height: "400px" } }, { children: _jsx("img", { src: "https://picsum.photos/1200/400?random=12", alt: "2", style: { width: "100%", height: "100%", objectFit: "cover" } }) })), _jsx("div", __assign({ style: { width: "100%", height: "400px" } }, { children: _jsx("img", { src: "https://picsum.photos/1200/400?random=13", alt: "3", style: { width: "100%", height: "100%", objectFit: "cover" } }) }))] }), _jsx(Slider.Button, { type: "next", style: "minimal" }), _jsx(Slider.Dots, { position: "bottom" })] }))] })), _jsxs("section", __assign({ style: { marginBottom: "80px" } }, { children: [_jsx("h3", { children: "2. Multi-Item Carousel (8 items total)" }), _jsxs(Slider, __assign({ visibleSlides: 1, infinite: true, gap: 20, breakpoints: {
|
|
16
21
|
768: { visibleSlides: 2 },
|
|
17
|
-
1024: { visibleSlides: 4 }
|
|
18
|
-
} }, { children: [_jsx(Slider.Button, { type: "prev", style: "filled" }), _jsxs(Slider.Track, { children: [_jsx("div", __assign({ style: {
|
|
22
|
+
1024: { visibleSlides: 4 },
|
|
23
|
+
} }, { children: [_jsx(Slider.Button, { type: "prev", style: "filled" }), _jsxs(Slider.Track, { children: [_jsx("div", __assign({ style: {
|
|
24
|
+
height: "200px",
|
|
25
|
+
background: "#FFD700",
|
|
26
|
+
display: "flex",
|
|
27
|
+
alignItems: "center",
|
|
28
|
+
justifyContent: "center",
|
|
29
|
+
borderRadius: "8px",
|
|
30
|
+
} }, { children: "Item 1" })), _jsx("div", __assign({ style: {
|
|
31
|
+
height: "200px",
|
|
32
|
+
background: "#FF8C00",
|
|
33
|
+
display: "flex",
|
|
34
|
+
alignItems: "center",
|
|
35
|
+
justifyContent: "center",
|
|
36
|
+
borderRadius: "8px",
|
|
37
|
+
} }, { children: "Item 2" })), _jsx("div", __assign({ style: {
|
|
38
|
+
height: "200px",
|
|
39
|
+
background: "#FF4500",
|
|
40
|
+
display: "flex",
|
|
41
|
+
alignItems: "center",
|
|
42
|
+
justifyContent: "center",
|
|
43
|
+
borderRadius: "8px",
|
|
44
|
+
} }, { children: "Item 3" })), _jsx("div", __assign({ style: {
|
|
45
|
+
height: "200px",
|
|
46
|
+
background: "#FF0000",
|
|
47
|
+
display: "flex",
|
|
48
|
+
alignItems: "center",
|
|
49
|
+
justifyContent: "center",
|
|
50
|
+
borderRadius: "8px",
|
|
51
|
+
} }, { children: "Item 4" })), _jsx("div", __assign({ style: {
|
|
52
|
+
height: "200px",
|
|
53
|
+
background: "#C71585",
|
|
54
|
+
display: "flex",
|
|
55
|
+
alignItems: "center",
|
|
56
|
+
justifyContent: "center",
|
|
57
|
+
borderRadius: "8px",
|
|
58
|
+
} }, { children: "Item 5" })), _jsx("div", __assign({ style: {
|
|
59
|
+
height: "200px",
|
|
60
|
+
background: "#8B008B",
|
|
61
|
+
display: "flex",
|
|
62
|
+
alignItems: "center",
|
|
63
|
+
justifyContent: "center",
|
|
64
|
+
borderRadius: "8px",
|
|
65
|
+
} }, { children: "Item 6" })), _jsx("div", __assign({ style: {
|
|
66
|
+
height: "200px",
|
|
67
|
+
background: "#483D8B",
|
|
68
|
+
display: "flex",
|
|
69
|
+
alignItems: "center",
|
|
70
|
+
justifyContent: "center",
|
|
71
|
+
borderRadius: "8px",
|
|
72
|
+
} }, { children: "Item 7" })), _jsx("div", __assign({ style: {
|
|
73
|
+
height: "200px",
|
|
74
|
+
background: "#2F4F4F",
|
|
75
|
+
display: "flex",
|
|
76
|
+
alignItems: "center",
|
|
77
|
+
justifyContent: "center",
|
|
78
|
+
borderRadius: "8px",
|
|
79
|
+
} }, { children: "Item 8" }))] }), _jsx(Slider.Button, { type: "next", style: "filled" }), _jsx(Slider.Dots, { position: "bottom" })] }))] })), _jsxs("section", __assign({ style: { marginBottom: "80px" } }, { children: [_jsx("h3", { children: "3. Vertical Slider (2 slides visible)" }), _jsx("div", __assign({ style: {
|
|
80
|
+
height: "500px",
|
|
81
|
+
border: "1px solid #ddd",
|
|
82
|
+
borderRadius: "12px",
|
|
83
|
+
padding: "20px",
|
|
84
|
+
} }, { children: _jsxs(Slider, __assign({ direction: "vertical", visibleSlides: 2, infinite: true, gap: 10 }, { children: [_jsx(Slider.Button, { type: "prev", style: "outlined" }), _jsxs(Slider.Track, { children: [_jsx("div", __assign({ style: {
|
|
85
|
+
height: "200px",
|
|
86
|
+
backgroundColor: "#f0f0f0",
|
|
87
|
+
borderRadius: "8px",
|
|
88
|
+
display: "flex",
|
|
89
|
+
alignItems: "center",
|
|
90
|
+
justifyContent: "center",
|
|
91
|
+
} }, { children: "Vertical 1" })), _jsx("div", __assign({ style: {
|
|
92
|
+
height: "200px",
|
|
93
|
+
backgroundColor: "#e0e0e0",
|
|
94
|
+
borderRadius: "8px",
|
|
95
|
+
display: "flex",
|
|
96
|
+
alignItems: "center",
|
|
97
|
+
justifyContent: "center",
|
|
98
|
+
} }, { children: "Vertical 2" })), _jsx("div", __assign({ style: {
|
|
99
|
+
height: "200px",
|
|
100
|
+
backgroundColor: "#d0d0d0",
|
|
101
|
+
borderRadius: "8px",
|
|
102
|
+
display: "flex",
|
|
103
|
+
alignItems: "center",
|
|
104
|
+
justifyContent: "center",
|
|
105
|
+
} }, { children: "Vertical 3" })), _jsx("div", __assign({ style: {
|
|
106
|
+
height: "200px",
|
|
107
|
+
backgroundColor: "#c0c0c0",
|
|
108
|
+
borderRadius: "8px",
|
|
109
|
+
display: "flex",
|
|
110
|
+
alignItems: "center",
|
|
111
|
+
justifyContent: "center",
|
|
112
|
+
} }, { children: "Vertical 4" }))] }), _jsx(Slider.Button, { type: "next", style: "outlined" }), _jsx(Slider.Dots, { position: "right" })] })) }))] })), _jsx("footer", __assign({ style: { textAlign: "center", paddingBottom: "50px" } }, { children: _jsx("p", { children: "All sliders are working with the same component logic!" }) }))] })));
|
|
19
113
|
};
|
|
20
114
|
export default App;
|
package/dist/App.test.js
CHANGED
|
@@ -10,11 +10,11 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
-
import { render, screen } from
|
|
14
|
-
import Slider from
|
|
15
|
-
describe(
|
|
13
|
+
import { render, screen } from "@testing-library/react";
|
|
14
|
+
import { Slider } from "./components/Slider";
|
|
15
|
+
describe("Slider Component Test", function () {
|
|
16
16
|
// Step 2: Test for the Slider component
|
|
17
|
-
test(
|
|
17
|
+
test("renders correct number of slides", function () {
|
|
18
18
|
render(_jsxs(Slider, __assign({ visibleSlides: 1 }, { children: [_jsx("div", { children: "Slide 1" }), _jsx("div", { children: "Slide 2" }), _jsx("div", { children: "Slide 3" })] })));
|
|
19
19
|
// Selecting the slides by their text content
|
|
20
20
|
var slide1 = screen.getByText("Slide 1");
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { SliderProps } from "../../types/Slider.types";
|
|
3
|
+
import SliderTrack from "./SliderTrack";
|
|
4
|
+
import SliderButton from "./SliderButton";
|
|
5
|
+
import SliderDots from "./SliderDots";
|
|
6
|
+
declare const Slider: React.FC<SliderProps> & {
|
|
7
|
+
Track: typeof SliderTrack;
|
|
8
|
+
Button: typeof SliderButton;
|
|
9
|
+
Dots: typeof SliderDots;
|
|
10
|
+
};
|
|
11
|
+
export default Slider;
|
|
@@ -0,0 +1,84 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import { useState, useCallback, useMemo, useEffect } from "react";
|
|
14
|
+
import { SliderContext } from "../../context/SliderContext";
|
|
15
|
+
import { SliderWrapper } from "./SliderStyles.styles";
|
|
16
|
+
import SliderTrack from "./SliderTrack";
|
|
17
|
+
import SliderButton from "./SliderButton";
|
|
18
|
+
import SliderDots from "./SliderDots";
|
|
19
|
+
var Slider = function (_a) {
|
|
20
|
+
var children = _a.children, _b = _a.visibleSlides, defaultVisibleSlides = _b === void 0 ? 1 : _b, _c = _a.direction, direction = _c === void 0 ? "horizontal" : _c, _d = _a.initialIndex, initialIndex = _d === void 0 ? 0 : _d, _e = _a.infinite, infinite = _e === void 0 ? false : _e, _f = _a.autoplay, autoplay = _f === void 0 ? false : _f, _g = _a.autoplaySpeed, autoplaySpeed = _g === void 0 ? 3000 : _g, _h = _a.gap, gap = _h === void 0 ? 0 : _h, breakpoints = _a.breakpoints;
|
|
21
|
+
var _j = useState(initialIndex), currentIndex = _j[0], setCurrentIndex = _j[1];
|
|
22
|
+
var _k = useState(defaultVisibleSlides), visibleSlides = _k[0], setVisibleSlides = _k[1];
|
|
23
|
+
var _l = useState(0), totalSlides = _l[0], setTotalSlides = _l[1];
|
|
24
|
+
// Handle responsive breakpoints
|
|
25
|
+
useEffect(function () {
|
|
26
|
+
var handleResize = function () {
|
|
27
|
+
var width = window.innerWidth;
|
|
28
|
+
var activeVisibleSlides = defaultVisibleSlides;
|
|
29
|
+
if (breakpoints) {
|
|
30
|
+
var sorted = Object.keys(breakpoints)
|
|
31
|
+
.map(Number)
|
|
32
|
+
.sort(function (a, b) { return a - b; });
|
|
33
|
+
for (var _i = 0, sorted_1 = sorted; _i < sorted_1.length; _i++) {
|
|
34
|
+
var b = sorted_1[_i];
|
|
35
|
+
if (width >= b)
|
|
36
|
+
activeVisibleSlides = breakpoints[b].visibleSlides;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
setVisibleSlides(activeVisibleSlides);
|
|
40
|
+
};
|
|
41
|
+
handleResize();
|
|
42
|
+
window.addEventListener("resize", handleResize);
|
|
43
|
+
return function () { return window.removeEventListener("resize", handleResize); };
|
|
44
|
+
}, [breakpoints, defaultVisibleSlides]);
|
|
45
|
+
var maxIndex = useMemo(function () { return Math.max(0, totalSlides - visibleSlides); }, [totalSlides, visibleSlides]);
|
|
46
|
+
var goToNext = useCallback(function () {
|
|
47
|
+
setCurrentIndex(function (prev) {
|
|
48
|
+
return infinite
|
|
49
|
+
? prev >= maxIndex
|
|
50
|
+
? 0
|
|
51
|
+
: prev + 1
|
|
52
|
+
: Math.min(prev + 1, maxIndex);
|
|
53
|
+
});
|
|
54
|
+
}, [maxIndex, infinite]);
|
|
55
|
+
var goToPrev = useCallback(function () {
|
|
56
|
+
setCurrentIndex(function (prev) {
|
|
57
|
+
return infinite ? (prev <= 0 ? maxIndex : prev - 1) : Math.max(prev - 1, 0);
|
|
58
|
+
});
|
|
59
|
+
}, [maxIndex, infinite]);
|
|
60
|
+
var goToSlide = useCallback(function (index) { return setCurrentIndex(index); }, []);
|
|
61
|
+
// Autoplay effect
|
|
62
|
+
useEffect(function () {
|
|
63
|
+
var interval;
|
|
64
|
+
if (autoplay && totalSlides > visibleSlides)
|
|
65
|
+
interval = setInterval(goToNext, autoplaySpeed);
|
|
66
|
+
return function () { return clearInterval(interval); };
|
|
67
|
+
}, [autoplay, autoplaySpeed, goToNext, totalSlides, visibleSlides]);
|
|
68
|
+
return (_jsx(SliderContext.Provider, __assign({ value: {
|
|
69
|
+
currentIndex: currentIndex,
|
|
70
|
+
totalSlides: totalSlides,
|
|
71
|
+
setTotalSlides: setTotalSlides,
|
|
72
|
+
visibleSlides: visibleSlides,
|
|
73
|
+
direction: direction,
|
|
74
|
+
infinite: infinite,
|
|
75
|
+
gap: gap,
|
|
76
|
+
goToNext: goToNext,
|
|
77
|
+
goToPrev: goToPrev,
|
|
78
|
+
goToSlide: goToSlide,
|
|
79
|
+
} }, { children: _jsx(SliderWrapper, __assign({ direction: direction }, { children: children })) })));
|
|
80
|
+
};
|
|
81
|
+
Slider.Track = SliderTrack;
|
|
82
|
+
Slider.Button = SliderButton;
|
|
83
|
+
Slider.Dots = SliderDots;
|
|
84
|
+
export default Slider;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import { useSlider } from "../../context/SliderContext";
|
|
14
|
+
import { Arrow } from "./SliderStyles.styles";
|
|
15
|
+
var SliderButton = function (_a) {
|
|
16
|
+
var type = _a.type, children = _a.children, _b = _a.style, style = _b === void 0 ? "minimal" : _b;
|
|
17
|
+
var _c = useSlider(), goToNext = _c.goToNext, goToPrev = _c.goToPrev, direction = _c.direction;
|
|
18
|
+
var isHorizontal = direction === "horizontal";
|
|
19
|
+
var handleClick = type === "next" ? goToNext : goToPrev;
|
|
20
|
+
var defaultIcon = type === "next" ? (isHorizontal ? ">" : "˅") : isHorizontal ? "<" : "˄";
|
|
21
|
+
return (_jsx(Arrow, __assign({ direction: type === "next"
|
|
22
|
+
? isHorizontal
|
|
23
|
+
? "right"
|
|
24
|
+
: "down"
|
|
25
|
+
: isHorizontal
|
|
26
|
+
? "left"
|
|
27
|
+
: "up", arrowStyle: style, arrowColor: "black", onClick: handleClick }, { children: children || defaultIcon })));
|
|
28
|
+
};
|
|
29
|
+
export default SliderButton;
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import { useSlider } from "../../context/SliderContext";
|
|
14
|
+
import { DotsWrapper, Dot } from "./SliderStyles.styles";
|
|
15
|
+
var SliderDots = function (_a) {
|
|
16
|
+
var _b = _a.position, position = _b === void 0 ? "bottom" : _b;
|
|
17
|
+
var _c = useSlider(), totalSlides = _c.totalSlides, visibleSlides = _c.visibleSlides, currentIndex = _c.currentIndex, goToSlide = _c.goToSlide;
|
|
18
|
+
var numberOfDots = Math.max(0, totalSlides - visibleSlides + 1);
|
|
19
|
+
if (numberOfDots <= 1)
|
|
20
|
+
return null;
|
|
21
|
+
return (_jsx(DotsWrapper, __assign({ position: position }, { children: Array.from({ length: numberOfDots }).map(function (_, index) { return (_jsx(Dot, { active: index === currentIndex, onClick: function () { return goToSlide(index); } }, index)); }) })));
|
|
22
|
+
};
|
|
23
|
+
export default SliderDots;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const SliderWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
3
|
+
direction: 'horizontal' | 'vertical';
|
|
4
|
+
}>> & string;
|
|
5
|
+
export declare const SlideTrack: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
6
|
+
export declare const Slide: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
7
|
+
visibleSlides: number;
|
|
8
|
+
}>> & string;
|
|
9
|
+
export declare const DotsWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
10
|
+
position: 'top' | 'bottom' | 'left' | 'right';
|
|
11
|
+
}>> & string;
|
|
12
|
+
export declare const Dot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
13
|
+
active: boolean;
|
|
14
|
+
}>> & string;
|
|
15
|
+
export declare const Arrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
16
|
+
direction: 'left' | 'right' | 'up' | 'down';
|
|
17
|
+
arrowStyle: 'minimal' | 'filled' | 'outlined' | 'plain';
|
|
18
|
+
arrowColor: 'black' | 'white';
|
|
19
|
+
}>> & string;
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
5
|
+
import styled from 'styled-components';
|
|
6
|
+
export var SliderWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n overflow: hidden;\n height: ", ";\n\n ", "\n"], ["\n position: relative;\n width: 100%;\n overflow: hidden;\n height: ", ";\n\n ", "\n"])), function (_a) {
|
|
7
|
+
var direction = _a.direction;
|
|
8
|
+
return (direction === 'vertical' ? '100%' : 'auto');
|
|
9
|
+
}, function (_a) {
|
|
10
|
+
var direction = _a.direction;
|
|
11
|
+
return direction === 'vertical' && "\n display: flex;\n flex-direction: column;\n ";
|
|
12
|
+
});
|
|
13
|
+
export var SlideTrack = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n transition: transform 0.3s ease-in-out;\n /* Track width will be set dynamically via inline styles */\n"], ["\n display: flex;\n transition: transform 0.3s ease-in-out;\n /* Track width will be set dynamically via inline styles */\n"])));
|
|
14
|
+
export var Slide = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n flex-shrink: 0; /* Important: prevents slides from squeezing */\n width: 100%;\n height: 100%;\n"], ["\n box-sizing: border-box;\n flex-shrink: 0; /* Important: prevents slides from squeezing */\n width: 100%;\n height: 100%;\n"])));
|
|
15
|
+
export var DotsWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n justify-content: center;\n z-index: 5;\n flex-direction: ", ";\n \n ", "\n ", "\n ", "\n ", "\n"], ["\n position: absolute;\n display: flex;\n justify-content: center;\n z-index: 5;\n flex-direction: ", ";\n \n ", "\n ", "\n ", "\n ", "\n"])), function (_a) {
|
|
16
|
+
var position = _a.position;
|
|
17
|
+
return (position === 'left' || position === 'right' ? 'column' : 'row');
|
|
18
|
+
}, function (_a) {
|
|
19
|
+
var position = _a.position;
|
|
20
|
+
return position === 'top' && "top: 10px; left: 50%; transform: translateX(-50%);";
|
|
21
|
+
}, function (_a) {
|
|
22
|
+
var position = _a.position;
|
|
23
|
+
return position === 'bottom' && "bottom: 10px; left: 50%; transform: translateX(-50%);";
|
|
24
|
+
}, function (_a) {
|
|
25
|
+
var position = _a.position;
|
|
26
|
+
return position === 'left' && "left: 10px; top: 50%; transform: translateY(-50%);";
|
|
27
|
+
}, function (_a) {
|
|
28
|
+
var position = _a.position;
|
|
29
|
+
return position === 'right' && "right: 10px; top: 50%; transform: translateY(-50%);";
|
|
30
|
+
});
|
|
31
|
+
export var Dot = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: ", ";\n margin: 5px;\n cursor: pointer;\n transition: background-color 0.2s;\n"], ["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: ", ";\n margin: 5px;\n cursor: pointer;\n transition: background-color 0.2s;\n"])), function (_a) {
|
|
32
|
+
var active = _a.active;
|
|
33
|
+
return (active ? 'black' : 'lightgray');
|
|
34
|
+
});
|
|
35
|
+
export var Arrow = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 10;\n user-select: none;\n transition: all 0.2s ease-in-out;\n\n ", "\n ", "\n ", "\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"], ["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index: 10;\n user-select: none;\n transition: all 0.2s ease-in-out;\n\n ", "\n ", "\n ", "\n ", "\n\n ", "\n\n ", "\n\n ", "\n\n ", "\n"])), function (_a) {
|
|
36
|
+
var direction = _a.direction;
|
|
37
|
+
return direction === 'left' && 'left: 15px; top: 50%; transform: translateY(-50%);';
|
|
38
|
+
}, function (_a) {
|
|
39
|
+
var direction = _a.direction;
|
|
40
|
+
return direction === 'right' && 'right: 15px; top: 50%; transform: translateY(-50%);';
|
|
41
|
+
}, function (_a) {
|
|
42
|
+
var direction = _a.direction;
|
|
43
|
+
return direction === 'up' && 'top: 15px; left: 50%; transform: translateX(-50%);';
|
|
44
|
+
}, function (_a) {
|
|
45
|
+
var direction = _a.direction;
|
|
46
|
+
return direction === 'down' && 'bottom: 15px; left: 50%; transform: translateX(-50%);';
|
|
47
|
+
}, function (_a) {
|
|
48
|
+
var arrowStyle = _a.arrowStyle;
|
|
49
|
+
return arrowStyle !== 'plain' && "\n width: 45px;\n height: 45px;\n border-radius: 50%;\n font-size: 20px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n &:hover { transform: scale(1.1) ".concat(function (props) { return props.direction === 'left' || props.direction === 'right' ? 'translateY(-45%)' : 'translateX(-45%)'; }, "; }\n ");
|
|
50
|
+
}, function (_a) {
|
|
51
|
+
var arrowStyle = _a.arrowStyle, arrowColor = _a.arrowColor;
|
|
52
|
+
return arrowStyle === 'minimal' && "\n background-color: rgba(255, 255, 255, 0.8);\n backdrop-filter: blur(4px);\n color: ".concat(arrowColor === 'white' ? 'white' : '#333', ";\n ");
|
|
53
|
+
}, function (_a) {
|
|
54
|
+
var arrowStyle = _a.arrowStyle, arrowColor = _a.arrowColor;
|
|
55
|
+
return arrowStyle === 'filled' && "\n background-color: ".concat(arrowColor === 'white' ? '#fff' : '#222', ";\n color: ").concat(arrowColor === 'white' ? '#222' : '#fff', ";\n ");
|
|
56
|
+
}, function (_a) {
|
|
57
|
+
var arrowStyle = _a.arrowStyle, arrowColor = _a.arrowColor;
|
|
58
|
+
return arrowStyle === 'plain' && "\n background: none;\n font-size: 32px;\n font-weight: bold;\n color: ".concat(arrowColor === 'white' ? '#fff' : '#222', ";\n &:hover { opacity: 0.7; transform: scale(1.2) ").concat(function (props) { return props.direction === 'left' || props.direction === 'right' ? 'translateY(-42%)' : 'translateX(-42%)'; }, "; }\n ");
|
|
59
|
+
});
|
|
60
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
+
import React, { useEffect } from "react";
|
|
14
|
+
import { useSlider } from "../../context/SliderContext";
|
|
15
|
+
import { SlideTrack, Slide } from "./SliderStyles.styles";
|
|
16
|
+
var SliderTrack = function (_a) {
|
|
17
|
+
var children = _a.children;
|
|
18
|
+
var _b = useSlider(), currentIndex = _b.currentIndex, direction = _b.direction, visibleSlides = _b.visibleSlides, setTotalSlides = _b.setTotalSlides, gap = _b.gap;
|
|
19
|
+
var isHorizontal = direction === "horizontal";
|
|
20
|
+
var count = React.Children.count(children);
|
|
21
|
+
useEffect(function () {
|
|
22
|
+
setTotalSlides(count);
|
|
23
|
+
}, [count, setTotalSlides]);
|
|
24
|
+
if (count === 0)
|
|
25
|
+
return null;
|
|
26
|
+
var trackWidth = (count / visibleSlides) * 100;
|
|
27
|
+
var transformPercentage = (currentIndex / count) * 100;
|
|
28
|
+
var transformValue = isHorizontal
|
|
29
|
+
? "translateX(-".concat(transformPercentage, "%)")
|
|
30
|
+
: "translateY(-".concat(transformPercentage, "%)");
|
|
31
|
+
return (_jsx("div", __assign({ style: {
|
|
32
|
+
overflow: "hidden",
|
|
33
|
+
width: "100%",
|
|
34
|
+
height: isHorizontal ? "auto" : "100%",
|
|
35
|
+
} }, { children: _jsx(SlideTrack, __assign({ style: {
|
|
36
|
+
transform: transformValue,
|
|
37
|
+
flexDirection: isHorizontal ? "row" : "column",
|
|
38
|
+
width: isHorizontal ? "".concat(trackWidth, "%") : "100%",
|
|
39
|
+
height: isHorizontal ? "auto" : "".concat(trackWidth, "%"),
|
|
40
|
+
} }, { children: React.Children.map(children, function (child, index) { return (_jsx(Slide, __assign({ visibleSlides: visibleSlides, style: {
|
|
41
|
+
flex: "0 0 ".concat(100 / count, "%"),
|
|
42
|
+
padding: isHorizontal ? "0 ".concat(gap / 2, "px") : "".concat(gap / 2, "px 0"),
|
|
43
|
+
} }, { children: child }), index)); }) })) })));
|
|
44
|
+
};
|
|
45
|
+
export default SliderTrack;
|
|
@@ -1,47 +1,14 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
interface SliderContextProps {
|
|
3
|
-
currentIndex: number;
|
|
4
|
-
totalSlides: number;
|
|
5
|
-
visibleSlides: number;
|
|
6
|
-
direction: "horizontal" | "vertical";
|
|
7
|
-
infinite: boolean;
|
|
8
|
-
gap: number;
|
|
9
|
-
setTotalSlides: (count: number) => void;
|
|
10
|
-
goToNext: () => void;
|
|
11
|
-
goToPrev: () => void;
|
|
12
|
-
goToSlide: (index: number) => void;
|
|
13
|
-
}
|
|
14
|
-
export declare const useSlider: () => SliderContextProps;
|
|
15
2
|
interface SliderProps {
|
|
16
3
|
children: React.ReactNode;
|
|
17
4
|
visibleSlides?: number;
|
|
5
|
+
showDots?: boolean;
|
|
6
|
+
showArrows?: boolean;
|
|
7
|
+
dotsPosition?: "top" | "bottom" | "left" | "right";
|
|
8
|
+
slideStep?: number;
|
|
18
9
|
direction?: "horizontal" | "vertical";
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
autoplay?: boolean;
|
|
22
|
-
autoplaySpeed?: number;
|
|
23
|
-
gap?: number;
|
|
24
|
-
breakpoints?: {
|
|
25
|
-
[key: number]: {
|
|
26
|
-
visibleSlides: number;
|
|
27
|
-
};
|
|
28
|
-
};
|
|
29
|
-
}
|
|
30
|
-
declare const SliderMain: React.FC<SliderProps> & {
|
|
31
|
-
Track: typeof SliderTrack;
|
|
32
|
-
Button: typeof SliderButton;
|
|
33
|
-
Dots: typeof SliderDots;
|
|
34
|
-
};
|
|
35
|
-
declare const SliderTrack: React.FC<{
|
|
36
|
-
children: React.ReactNode;
|
|
37
|
-
}>;
|
|
38
|
-
interface ButtonProps {
|
|
39
|
-
type: "prev" | "next";
|
|
40
|
-
children?: React.ReactNode;
|
|
41
|
-
style?: "minimal" | "filled" | "outlined" | "plain";
|
|
10
|
+
arrowStyle?: "minimal" | "filled" | "outlined";
|
|
11
|
+
arrowColor?: "black" | "white";
|
|
42
12
|
}
|
|
43
|
-
declare const
|
|
44
|
-
|
|
45
|
-
position?: "top" | "bottom" | "left" | "right";
|
|
46
|
-
}>;
|
|
47
|
-
export default SliderMain;
|
|
13
|
+
declare const Slider: React.FC<SliderProps>;
|
|
14
|
+
export default Slider;
|
|
@@ -9,99 +9,55 @@ var __assign = (this && this.__assign) || function () {
|
|
|
9
9
|
};
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
import React, {
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import React, { useState } from "react";
|
|
14
14
|
import { SliderWrapper, SlideTrack, Slide, DotsWrapper, Dot, Arrow, } from "./SliderStyles.styles";
|
|
15
|
-
var
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
var Slider = function (_a) {
|
|
16
|
+
var children = _a.children, _b = _a.visibleSlides, visibleSlides = _b === void 0 ? 1 : _b, _c = _a.showDots, showDots = _c === void 0 ? true : _c, _d = _a.showArrows, showArrows = _d === void 0 ? true : _d, _e = _a.dotsPosition, dotsPosition = _e === void 0 ? "bottom" : _e, _f = _a.slideStep, slideStep = _f === void 0 ? 1 : _f, _g = _a.direction, direction = _g === void 0 ? "horizontal" : _g, _h = _a.arrowStyle, arrowStyle = _h === void 0 ? "minimal" : _h, _j = _a.arrowColor, arrowColor = _j === void 0 ? "black" : _j;
|
|
17
|
+
// Hooks must always be called unconditionally
|
|
18
|
+
var _k = useState(0), currentIndex = _k[0], setCurrentIndex = _k[1];
|
|
19
|
+
if (!children || React.Children.count(children) === 0) {
|
|
20
|
+
return null; // Return null if children is null, avoiding rendering anything
|
|
20
21
|
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var
|
|
24
|
-
|
|
25
|
-
var
|
|
26
|
-
var _k = useState(defaultVisibleSlides), visibleSlides = _k[0], setVisibleSlides = _k[1];
|
|
27
|
-
var _l = useState(0), totalSlides = _l[0], setTotalSlides = _l[1];
|
|
28
|
-
// Responsive logic
|
|
29
|
-
useEffect(function () {
|
|
30
|
-
var handleResize = function () {
|
|
31
|
-
var width = window.innerWidth;
|
|
32
|
-
var activeVisibleSlides = defaultVisibleSlides;
|
|
33
|
-
if (breakpoints) {
|
|
34
|
-
var sorted = Object.keys(breakpoints).map(Number).sort(function (a, b) { return a - b; });
|
|
35
|
-
for (var _i = 0, sorted_1 = sorted; _i < sorted_1.length; _i++) {
|
|
36
|
-
var b = sorted_1[_i];
|
|
37
|
-
if (width >= b)
|
|
38
|
-
activeVisibleSlides = breakpoints[b].visibleSlides;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
setVisibleSlides(activeVisibleSlides);
|
|
42
|
-
};
|
|
43
|
-
handleResize();
|
|
44
|
-
window.addEventListener("resize", handleResize);
|
|
45
|
-
return function () { return window.removeEventListener("resize", handleResize); };
|
|
46
|
-
}, [breakpoints, defaultVisibleSlides]);
|
|
47
|
-
var maxIndex = useMemo(function () { return Math.max(0, totalSlides - visibleSlides); }, [totalSlides, visibleSlides]);
|
|
48
|
-
var goToNext = useCallback(function () {
|
|
49
|
-
setCurrentIndex(function (prev) { return (infinite ? (prev >= maxIndex ? 0 : prev + 1) : Math.min(prev + 1, maxIndex)); });
|
|
50
|
-
}, [maxIndex, infinite]);
|
|
51
|
-
var goToPrev = useCallback(function () {
|
|
52
|
-
setCurrentIndex(function (prev) { return (infinite ? (prev <= 0 ? maxIndex : prev - 1) : Math.max(prev - 1, 0)); });
|
|
53
|
-
}, [maxIndex, infinite]);
|
|
54
|
-
var goToSlide = useCallback(function (index) { return setCurrentIndex(index); }, []);
|
|
55
|
-
useEffect(function () {
|
|
56
|
-
var interval;
|
|
57
|
-
if (autoplay && totalSlides > visibleSlides)
|
|
58
|
-
interval = setInterval(goToNext, autoplaySpeed);
|
|
59
|
-
return function () { return clearInterval(interval); };
|
|
60
|
-
}, [autoplay, autoplaySpeed, goToNext, totalSlides, visibleSlides]);
|
|
61
|
-
return (_jsx(SliderContext.Provider, __assign({ value: { currentIndex: currentIndex, totalSlides: totalSlides, setTotalSlides: setTotalSlides, visibleSlides: visibleSlides, direction: direction, infinite: infinite, gap: gap, goToNext: goToNext, goToPrev: goToPrev, goToSlide: goToSlide } }, { children: _jsx(SliderWrapper, __assign({ direction: direction }, { children: children })) })));
|
|
62
|
-
};
|
|
63
|
-
// --- Sub-Components ---
|
|
64
|
-
var SliderTrack = function (_a) {
|
|
65
|
-
var children = _a.children;
|
|
66
|
-
var _b = useSlider(), currentIndex = _b.currentIndex, direction = _b.direction, visibleSlides = _b.visibleSlides, setTotalSlides = _b.setTotalSlides, gap = _b.gap, goToNext = _b.goToNext, goToPrev = _b.goToPrev;
|
|
67
|
-
var isHorizontal = direction === "horizontal";
|
|
68
|
-
var count = React.Children.count(children);
|
|
69
|
-
// Sync totalSlides count back to context
|
|
70
|
-
useEffect(function () {
|
|
71
|
-
setTotalSlides(count);
|
|
72
|
-
}, [count, setTotalSlides]);
|
|
73
|
-
if (count === 0)
|
|
74
|
-
return null;
|
|
75
|
-
var transformPercentage = (currentIndex / count) * 100;
|
|
76
|
-
var transformValue = isHorizontal ? "translateX(-".concat(transformPercentage, "%)") : "translateY(-".concat(transformPercentage, "%)");
|
|
77
|
-
var trackWidth = (count / visibleSlides) * 100;
|
|
78
|
-
return (_jsx("div", __assign({ style: { overflow: "hidden", width: "100%", height: isHorizontal ? "auto" : "100%" } }, { children: _jsx(SlideTrack, __assign({ style: {
|
|
79
|
-
transform: transformValue,
|
|
80
|
-
flexDirection: isHorizontal ? "row" : "column",
|
|
81
|
-
width: isHorizontal ? "".concat(trackWidth, "%") : "100%",
|
|
82
|
-
height: isHorizontal ? "auto" : "".concat(trackWidth, "%"),
|
|
83
|
-
} }, { children: React.Children.map(children, function (child, index) { return (_jsx(Slide, __assign({ visibleSlides: visibleSlides, style: {
|
|
84
|
-
flex: "0 0 ".concat(100 / count, "%"),
|
|
85
|
-
padding: isHorizontal ? "0 ".concat(gap / 2, "px") : "".concat(gap / 2, "px 0"),
|
|
86
|
-
} }, { children: child }), index)); }) })) })));
|
|
87
|
-
};
|
|
88
|
-
var SliderButton = function (_a) {
|
|
89
|
-
var type = _a.type, children = _a.children, _b = _a.style, style = _b === void 0 ? "minimal" : _b;
|
|
90
|
-
var _c = useSlider(), goToNext = _c.goToNext, goToPrev = _c.goToPrev, direction = _c.direction;
|
|
22
|
+
var totalSlides = React.Children.count(children);
|
|
23
|
+
// Maximum index value, preventing overflow when navigating through slides.
|
|
24
|
+
var maxIndex = totalSlides - visibleSlides;
|
|
25
|
+
// Calculate the number of dots based on the total number of slides and the number of visible slides.
|
|
26
|
+
var numberOfDots = Math.ceil((totalSlides - visibleSlides + 1) / slideStep);
|
|
91
27
|
var isHorizontal = direction === "horizontal";
|
|
92
|
-
var
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
var
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
28
|
+
var goToNext = function () {
|
|
29
|
+
setCurrentIndex(function (prevIndex) { return Math.min(prevIndex + slideStep, maxIndex); });
|
|
30
|
+
};
|
|
31
|
+
var goToPrev = function () {
|
|
32
|
+
setCurrentIndex(function (prevIndex) { return Math.max(prevIndex - slideStep, 0); });
|
|
33
|
+
};
|
|
34
|
+
var goToSlide = function (index) {
|
|
35
|
+
setCurrentIndex(index);
|
|
36
|
+
};
|
|
37
|
+
var slidePercentage = isHorizontal
|
|
38
|
+
? 100 / visibleSlides
|
|
39
|
+
: 100 / totalSlides;
|
|
40
|
+
return (_jsxs(SliderWrapper, __assign({ direction: direction, style: {
|
|
41
|
+
height: isHorizontal ? "auto" : "".concat(visibleSlides * 200, "px"),
|
|
42
|
+
display: isHorizontal ? "block" : "flex",
|
|
43
|
+
flexDirection: isHorizontal ? "row" : "column",
|
|
44
|
+
} }, { children: [showArrows && (_jsx(Arrow, __assign({ direction: isHorizontal ? "left" : "up", arrowStyle: arrowStyle, arrowColor: arrowColor, onClick: goToPrev }, { children: isHorizontal ? "<" : "˄" }))), _jsx(SlideTrack, __assign({ style: {
|
|
45
|
+
transform: isHorizontal
|
|
46
|
+
? "translateX(-".concat(currentIndex * slidePercentage, "%)")
|
|
47
|
+
: "translateY(-".concat((currentIndex * slideStep * 100) / totalSlides, "%)"),
|
|
48
|
+
display: "flex",
|
|
49
|
+
flexDirection: isHorizontal ? "row" : "column",
|
|
50
|
+
width: isHorizontal ? "100%" : "100%",
|
|
51
|
+
height: isHorizontal ? "auto" : "".concat(totalSlides * 100, "%"),
|
|
52
|
+
transition: "transform 0.3s ease-in-out",
|
|
53
|
+
boxSizing: "border-box",
|
|
54
|
+
} }, { children: React.Children.map(children, function (child, index) { return (_jsx(Slide, __assign({ visibleSlides: visibleSlides, style: {
|
|
55
|
+
flex: isHorizontal ? "0 0 ".concat(slidePercentage, "%") : "1",
|
|
56
|
+
width: isHorizontal ? "".concat(slidePercentage, "%") : "100%",
|
|
57
|
+
height: isHorizontal ? "auto" : "".concat(100 / totalSlides, "%"),
|
|
58
|
+
boxSizing: "border-box",
|
|
59
|
+
margin: "0",
|
|
60
|
+
padding: "0",
|
|
61
|
+
} }, { children: child }), index)); }) })), showArrows && (_jsx(Arrow, __assign({ direction: isHorizontal ? "right" : "down", arrowStyle: arrowStyle, arrowColor: arrowColor, onClick: goToNext }, { children: isHorizontal ? ">" : "˅" }))), showDots && (_jsx(DotsWrapper, __assign({ position: dotsPosition }, { children: Array.from({ length: numberOfDots }).map(function (_, index) { return (_jsx(Dot, { active: index * slideStep === currentIndex, onClick: function () { return goToSlide(index * slideStep); } }, index)); }) })))] })));
|
|
103
62
|
};
|
|
104
|
-
|
|
105
|
-
SliderMain.Button = SliderButton;
|
|
106
|
-
SliderMain.Dots = SliderDots;
|
|
107
|
-
export default SliderMain;
|
|
63
|
+
export default Slider;
|
|
@@ -14,6 +14,6 @@ export declare const Dot: import("styled-components/dist/types").IStyledComponen
|
|
|
14
14
|
}>> & string;
|
|
15
15
|
export declare const Arrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
|
|
16
16
|
direction: 'left' | 'right' | 'up' | 'down';
|
|
17
|
-
arrowStyle: 'minimal' | 'filled' | 'outlined'
|
|
17
|
+
arrowStyle: 'minimal' | 'filled' | 'outlined';
|
|
18
18
|
arrowColor: 'black' | 'white';
|
|
19
19
|
}>> & string;
|
|
@@ -3,58 +3,55 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
5
|
import styled from 'styled-components';
|
|
6
|
-
export var SliderWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n overflow: hidden;\n height: ", "
|
|
6
|
+
export var SliderWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: relative;\n width: 100%;\n overflow: hidden;\n height: ", "; // Ensure full height for vertical sliders\n\n ", "\n"], ["\n position: relative;\n width: 100%;\n overflow: hidden;\n height: ", "; // Ensure full height for vertical sliders\n\n ", "\n"])), function (_a) {
|
|
7
7
|
var direction = _a.direction;
|
|
8
8
|
return (direction === 'vertical' ? '100%' : 'auto');
|
|
9
9
|
}, function (_a) {
|
|
10
10
|
var direction = _a.direction;
|
|
11
11
|
return direction === 'vertical' && "\n display: flex;\n flex-direction: column;\n ";
|
|
12
12
|
});
|
|
13
|
-
export var SlideTrack = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n transition: transform 0.3s ease-in-out;\n
|
|
14
|
-
export var Slide = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n box-sizing: border-box;\n
|
|
15
|
-
export var DotsWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n justify-content: center;\n
|
|
13
|
+
export var SlideTrack = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n transition: transform 0.3s ease-in-out;\n"], ["\n display: flex;\n transition: transform 0.3s ease-in-out;\n"])));
|
|
14
|
+
export var Slide = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n margin: 0; \n padding: 0; \n"], ["\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n margin: 0; \n padding: 0; \n"])));
|
|
15
|
+
export var DotsWrapper = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n justify-content: center;\n flex-direction: ", ";\n \n ", "\n \n ", "\n \n ", "\n \n ", "\n"], ["\n position: absolute;\n display: flex;\n justify-content: center;\n flex-direction: ", ";\n \n ", "\n \n ", "\n \n ", "\n \n ", "\n"])), function (_a) {
|
|
16
16
|
var position = _a.position;
|
|
17
17
|
return (position === 'left' || position === 'right' ? 'column' : 'row');
|
|
18
18
|
}, function (_a) {
|
|
19
19
|
var position = _a.position;
|
|
20
|
-
return position === 'top' && "top: 10px
|
|
20
|
+
return position === 'top' && "\n top: 10px;\n left: 50%;\n transform: translateX(-50%);\n ";
|
|
21
21
|
}, function (_a) {
|
|
22
22
|
var position = _a.position;
|
|
23
|
-
return position === 'bottom' && "bottom: 10px
|
|
23
|
+
return position === 'bottom' && "\n bottom: 10px;\n left: 50%;\n transform: translateX(-50%);\n ";
|
|
24
24
|
}, function (_a) {
|
|
25
25
|
var position = _a.position;
|
|
26
|
-
return position === 'left' && "left: 10px
|
|
26
|
+
return position === 'left' && "\n left: 10px;\n top: 50%;\n transform: translateY(-50%);\n ";
|
|
27
27
|
}, function (_a) {
|
|
28
28
|
var position = _a.position;
|
|
29
|
-
return position === 'right' && "right: 10px
|
|
29
|
+
return position === 'right' && "\n right: 10px;\n top: 50%;\n transform: translateY(-50%);\n ";
|
|
30
30
|
});
|
|
31
|
-
export var Dot = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: ", ";\n margin: 5px;\n cursor: pointer;\n
|
|
31
|
+
export var Dot = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: ", ";\n margin: 5px;\n cursor: pointer;\n"], ["\n width: 10px;\n height: 10px;\n border-radius: 50%;\n background-color: ", ";\n margin: 5px;\n cursor: pointer;\n"])), function (_a) {
|
|
32
32
|
var active = _a.active;
|
|
33
33
|
return (active ? 'black' : 'lightgray');
|
|
34
34
|
});
|
|
35
|
-
export var Arrow = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n z-index:
|
|
35
|
+
export var Arrow = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n font-size: 24px;\n cursor: pointer;\n z-index: 1;\n user-select: none;\n\n // Horizontal arrows\n ", "\n ", "\n\n // Vertical arrows\n ", "\n ", "\n\n // Minimal style: no background or border\n ", "\n\n // Filled style: solid background and white arrow\n ", "\n\n // Outlined style: transparent background with colored border and arrow\n ", "\n"], ["\n position: absolute;\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n font-size: 24px;\n cursor: pointer;\n z-index: 1;\n user-select: none;\n\n // Horizontal arrows\n ", "\n ", "\n\n // Vertical arrows\n ", "\n ", "\n\n // Minimal style: no background or border\n ", "\n\n // Filled style: solid background and white arrow\n ", "\n\n // Outlined style: transparent background with colored border and arrow\n ", "\n"])), function (_a) {
|
|
36
36
|
var direction = _a.direction;
|
|
37
|
-
return direction === 'left' && 'left:
|
|
37
|
+
return direction === 'left' && 'left: 10px; top: 50%; transform: translateY(-50%);';
|
|
38
38
|
}, function (_a) {
|
|
39
39
|
var direction = _a.direction;
|
|
40
|
-
return direction === 'right' && 'right:
|
|
40
|
+
return direction === 'right' && 'right: 10px; top: 50%; transform: translateY(-50%);';
|
|
41
41
|
}, function (_a) {
|
|
42
42
|
var direction = _a.direction;
|
|
43
|
-
return direction === 'up' && 'top:
|
|
43
|
+
return direction === 'up' && 'top: 10px; left: 50%; transform: translateX(-50%);';
|
|
44
44
|
}, function (_a) {
|
|
45
45
|
var direction = _a.direction;
|
|
46
|
-
return direction === 'down' && 'bottom:
|
|
46
|
+
return direction === 'down' && 'bottom: 10px; left: 50%; transform: translateX(-50%);';
|
|
47
47
|
}, function (_a) {
|
|
48
48
|
var arrowStyle = _a.arrowStyle;
|
|
49
|
-
return arrowStyle
|
|
49
|
+
return arrowStyle === 'minimal' && "\n background-color: transparent;\n border: none;\n ";
|
|
50
50
|
}, function (_a) {
|
|
51
51
|
var arrowStyle = _a.arrowStyle, arrowColor = _a.arrowColor;
|
|
52
|
-
return arrowStyle === '
|
|
52
|
+
return arrowStyle === 'filled' && "\n background-color: ".concat(arrowColor === 'white' ? 'white' : 'black', ";\n color: ").concat(arrowColor === 'white' ? 'black' : 'white', ";\n ");
|
|
53
53
|
}, function (_a) {
|
|
54
54
|
var arrowStyle = _a.arrowStyle, arrowColor = _a.arrowColor;
|
|
55
|
-
return arrowStyle === '
|
|
56
|
-
}, function (_a) {
|
|
57
|
-
var arrowStyle = _a.arrowStyle, arrowColor = _a.arrowColor;
|
|
58
|
-
return arrowStyle === 'plain' && "\n background: none;\n font-size: 32px;\n font-weight: bold;\n color: ".concat(arrowColor === 'white' ? '#fff' : '#222', ";\n &:hover { opacity: 0.7; transform: scale(1.2) ").concat(function (props) { return props.direction === 'left' || props.direction === 'right' ? 'translateY(-42%)' : 'translateX(-42%)'; }, "; }\n ");
|
|
55
|
+
return arrowStyle === 'outlined' && "\n background-color: transparent;\n border: 2px solid ".concat(arrowColor === 'white' ? 'white' : 'black', ";\n color: ").concat(arrowColor === 'white' ? 'white' : 'black', ";\n ");
|
|
59
56
|
});
|
|
60
57
|
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { createContext, useContext } from "react";
|
|
2
|
+
export var SliderContext = createContext(undefined);
|
|
3
|
+
export var useSlider = function () {
|
|
4
|
+
var context = useContext(SliderContext);
|
|
5
|
+
if (!context) {
|
|
6
|
+
throw new Error("Slider sub-components must be used within a <Slider />");
|
|
7
|
+
}
|
|
8
|
+
return context;
|
|
9
|
+
};
|
package/dist/export.d.ts
ADDED
package/dist/export.js
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export type SliderDirection = "horizontal" | "vertical";
|
|
3
|
+
export type ArrowStyle = "minimal" | "filled" | "outlined" | "plain";
|
|
4
|
+
export type DotsPosition = "top" | "bottom" | "left" | "right";
|
|
5
|
+
export interface Breakpoints {
|
|
6
|
+
[key: number]: {
|
|
7
|
+
visibleSlides: number;
|
|
8
|
+
};
|
|
9
|
+
}
|
|
10
|
+
export interface SliderProps {
|
|
11
|
+
children: React.ReactNode;
|
|
12
|
+
visibleSlides?: number;
|
|
13
|
+
direction?: SliderDirection;
|
|
14
|
+
initialIndex?: number;
|
|
15
|
+
infinite?: boolean;
|
|
16
|
+
autoplay?: boolean;
|
|
17
|
+
autoplaySpeed?: number;
|
|
18
|
+
gap?: number;
|
|
19
|
+
breakpoints?: Breakpoints;
|
|
20
|
+
}
|
|
21
|
+
export interface SliderContextProps {
|
|
22
|
+
currentIndex: number;
|
|
23
|
+
totalSlides: number;
|
|
24
|
+
visibleSlides: number;
|
|
25
|
+
direction: SliderDirection;
|
|
26
|
+
infinite: boolean;
|
|
27
|
+
gap: number;
|
|
28
|
+
setTotalSlides: (count: number) => void;
|
|
29
|
+
goToNext: () => void;
|
|
30
|
+
goToPrev: () => void;
|
|
31
|
+
goToSlide: (index: number) => void;
|
|
32
|
+
}
|
|
33
|
+
export interface ButtonProps {
|
|
34
|
+
type: "prev" | "next";
|
|
35
|
+
children?: React.ReactNode;
|
|
36
|
+
style?: ArrowStyle;
|
|
37
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-styled-slider-component",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.9",
|
|
4
4
|
"description": "A customizable React slider component built with react ts and styled-components.",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -68,5 +68,13 @@
|
|
|
68
68
|
"last 1 firefox version",
|
|
69
69
|
"last 1 safari version"
|
|
70
70
|
]
|
|
71
|
+
},
|
|
72
|
+
"overrides": {
|
|
73
|
+
"nth-check": "^2.0.1",
|
|
74
|
+
"postcss": "^8.4.31",
|
|
75
|
+
"serialize-javascript": "^7.0.3",
|
|
76
|
+
"webpack-dev-server": "^5.2.0",
|
|
77
|
+
"underscore": "^1.13.7",
|
|
78
|
+
"jsonpath": "^1.1.1"
|
|
71
79
|
}
|
|
72
80
|
}
|