glide-react 1.0.0 → 2.0.1
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 +19 -0
- package/dist/glide-theme.css +42 -0
- package/dist/glide.css +108 -0
- package/dist/index.d.mts +2 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +241 -102
- package/dist/index.mjs +241 -102
- package/package.json +18 -3
package/README.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
|
+
|
|
1
2
|
# glide-react
|
|
2
3
|
|
|
4
|
+
[](https://www.npmjs.com/package/glide-react)
|
|
5
|
+
[](https://www.npmjs.com/package/glide-react)
|
|
6
|
+
|
|
7
|
+
Official npm package: [glide-react](https://www.npmjs.com/package/glide-react)
|
|
8
|
+
|
|
9
|
+
[](https://bundlephobia.com/result?p=glide-react)
|
|
10
|
+
[](https://github.com/coozywana/glide-react/blob/main/LICENSE)
|
|
11
|
+
|
|
3
12
|
A modern, minimalistic, lightweight React carousel component built with TypeScript, hooks, and functional components.
|
|
4
13
|
|
|
5
14
|
## Features
|
|
@@ -23,6 +32,16 @@ yarn add glide-react
|
|
|
23
32
|
pnpm add glide-react
|
|
24
33
|
```
|
|
25
34
|
|
|
35
|
+
## Styling
|
|
36
|
+
|
|
37
|
+
Import the default styles (optional):
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import 'glide-react/dist/glide.css';
|
|
41
|
+
// or import the theme variant
|
|
42
|
+
import 'glide-react/dist/glide-theme.css';
|
|
43
|
+
```
|
|
44
|
+
|
|
26
45
|
## Quick Start
|
|
27
46
|
|
|
28
47
|
```tsx
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
/* Glide React Theme */
|
|
2
|
+
|
|
3
|
+
.glide-arrow {
|
|
4
|
+
background-color: #00558B;
|
|
5
|
+
color: white;
|
|
6
|
+
width: 50px;
|
|
7
|
+
height: 50px;
|
|
8
|
+
border-radius: 50%;
|
|
9
|
+
font-size: 20px;
|
|
10
|
+
line-height: 50px;
|
|
11
|
+
text-align: center;
|
|
12
|
+
transition: background-color 0.3s ease;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.glide-arrow:hover {
|
|
16
|
+
background-color: #003d66;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.glide-arrow.glide-disabled {
|
|
20
|
+
opacity: 0.25;
|
|
21
|
+
cursor: not-allowed;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.glide-dots {
|
|
25
|
+
padding: 10px 0;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.glide-dots li button {
|
|
29
|
+
transition: all 0.3s ease;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.glide-dots li button:hover {
|
|
33
|
+
background-color: #999;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.glide-dots li.glide-active button {
|
|
37
|
+
background-color: #00558B;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.glide-dots li.glide-active button:hover {
|
|
41
|
+
background-color: #003d66;
|
|
42
|
+
}
|
package/dist/glide.css
ADDED
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
/* Glide React Core Styles */
|
|
2
|
+
|
|
3
|
+
.glide-slider {
|
|
4
|
+
position: relative;
|
|
5
|
+
display: block;
|
|
6
|
+
box-sizing: border-box;
|
|
7
|
+
user-select: none;
|
|
8
|
+
touch-action: pan-y;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
.glide-list {
|
|
12
|
+
position: relative;
|
|
13
|
+
display: block;
|
|
14
|
+
overflow: hidden;
|
|
15
|
+
margin: 0;
|
|
16
|
+
padding: 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.glide-track {
|
|
20
|
+
position: relative;
|
|
21
|
+
display: flex;
|
|
22
|
+
width: 100%;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.glide-slide {
|
|
26
|
+
position: relative;
|
|
27
|
+
float: left;
|
|
28
|
+
height: 100%;
|
|
29
|
+
min-height: 1px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.glide-slide img {
|
|
33
|
+
display: block;
|
|
34
|
+
width: 100%;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.glide-arrow {
|
|
38
|
+
display: block;
|
|
39
|
+
position: absolute;
|
|
40
|
+
top: 50%;
|
|
41
|
+
transform: translateY(-50%);
|
|
42
|
+
cursor: pointer;
|
|
43
|
+
border: none;
|
|
44
|
+
outline: none;
|
|
45
|
+
z-index: 1;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.glide-arrow.glide-prev {
|
|
49
|
+
left: 10px;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.glide-arrow.glide-next {
|
|
53
|
+
right: 10px;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.glide-dots {
|
|
57
|
+
display: flex !important;
|
|
58
|
+
justify-content: center;
|
|
59
|
+
margin: 20px 0;
|
|
60
|
+
padding: 0;
|
|
61
|
+
list-style: none;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.glide-slider.glide-vertical .glide-dots {
|
|
65
|
+
margin-bottom: 60px;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.glide-dots li {
|
|
69
|
+
display: inline-block;
|
|
70
|
+
margin: 0 5px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.glide-dots li button {
|
|
74
|
+
display: block;
|
|
75
|
+
width: 12px;
|
|
76
|
+
height: 12px;
|
|
77
|
+
padding: 0;
|
|
78
|
+
border: none;
|
|
79
|
+
border-radius: 50%;
|
|
80
|
+
background-color: #d4d4d4;
|
|
81
|
+
cursor: pointer;
|
|
82
|
+
font-size: 0;
|
|
83
|
+
line-height: 0;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.glide-dots li.glide-active button {
|
|
87
|
+
background-color: #000;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* Fade Effect */
|
|
91
|
+
.glide-slider.glide-fade .glide-slide {
|
|
92
|
+
position: absolute;
|
|
93
|
+
top: 0;
|
|
94
|
+
left: 0;
|
|
95
|
+
opacity: 0;
|
|
96
|
+
transition: opacity 0.5s ease;
|
|
97
|
+
z-index: 0;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.glide-slider.glide-fade .glide-slide.glide-active {
|
|
101
|
+
opacity: 1;
|
|
102
|
+
z-index: 1;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/* Vertical Mode */
|
|
106
|
+
.glide-slider.glide-vertical .glide-track {
|
|
107
|
+
flex-direction: column;
|
|
108
|
+
}
|
package/dist/index.d.mts
CHANGED
package/dist/index.d.ts
CHANGED