react-scroll-snap-anime-slider 1.2.0 → 1.3.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 +22 -20
- package/dist/index.d.ts +4 -2
- package/dist/index.js +1 -839
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +1 -822
- package/dist/index.module.js.map +1 -1
- package/dist/lib/Carousel.d.ts +2 -4
- package/dist/lib/CarouselContext.d.ts +12 -2
- package/dist/lib/Slide.d.ts +3 -0
- package/dist/lib/Slider.d.ts +20 -9
- package/dist/lib/Utility.d.ts +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -14,26 +14,28 @@ Works natively on touchable devices
|
|
|
14
14
|
|
|
15
15
|
## :star: Features
|
|
16
16
|
|
|
17
|
-
| Features |
|
|
18
|
-
| ------------------------------------ |
|
|
19
|
-
| **Multiple slides per view** |
|
|
20
|
-
| **Customized DOM structure** |
|
|
21
|
-
| **
|
|
22
|
-
| **
|
|
23
|
-
| **
|
|
24
|
-
| **Scroll
|
|
25
|
-
| **
|
|
26
|
-
| **Scroll with
|
|
27
|
-
| **Scroll with
|
|
28
|
-
| **
|
|
29
|
-
| **
|
|
30
|
-
| **
|
|
31
|
-
| **
|
|
32
|
-
| **
|
|
33
|
-
| **
|
|
34
|
-
| **
|
|
35
|
-
| **
|
|
36
|
-
| **
|
|
17
|
+
| Features | Comment | Status |
|
|
18
|
+
| ------------------------------------ | :---------------------------------------------: | :-----------------: |
|
|
19
|
+
| **Multiple slides per view** | Can adjust multiple slides per step | :heavy_check_mark: |
|
|
20
|
+
| **Customized DOM structure** | Construct the slider components by yourself | :heavy_check_mark: |
|
|
21
|
+
| **Customized slides margin** | Using margin props | :heavy_check_mark: |
|
|
22
|
+
| **Customized slide tray offset** | Using offset props | :heavy_check_mark: |
|
|
23
|
+
| **Touch scrolling** | Built-in | :heavy_check_mark: |
|
|
24
|
+
| **Scroll and snap** | Snap to slide's edge | :heavy_check_mark: |
|
|
25
|
+
| **Free scrolling** | | :heavy_check_mark: |
|
|
26
|
+
| **Scroll with touch pad** | Built-in | :heavy_check_mark: |
|
|
27
|
+
| **Scroll with keyboard < and >** | Built-in | :heavy_check_mark: |
|
|
28
|
+
| **Scroll with mouse drag** | Scroll end with inheria effect | :heavy_check_mark: |
|
|
29
|
+
| **Scroll with mouse wheel** | | :x: |
|
|
30
|
+
| **Navigation Buttons** | Support multiple clicks | :heavy_check_mark: |
|
|
31
|
+
| **Dynamic scrollbar** | | :heavy_check_mark: |
|
|
32
|
+
| **Dynamic & Customizable dot group** | Customize using [`renderDots()`](fdf) callback | :heavy_check_mark: |
|
|
33
|
+
| **Bounce on boundary** | Built-in on touchable devices | :large_blue_circle: |
|
|
34
|
+
| **Responsive style** | Built-in | :heavy_check_mark: |
|
|
35
|
+
| **Customized Style** | Use class-name or style to override basic style | :heavy_check_mark: |
|
|
36
|
+
| **Inifinite scrolling** | | :x: |
|
|
37
|
+
| **Auto play** | Can implement it by using [Slider ref]() | :x: |
|
|
38
|
+
| **Vertical scrolling** | Pending | :clock3: |
|
|
37
39
|
|
|
38
40
|
## :neutral_face: Motivation
|
|
39
41
|
The reason to start creating my own JS slider is because I couldn't find a slider that works smoothly on both desktop browser and mobile device. There are a ton of wonderfull sliders out there such as [Swiper](https://swiperjs.com/), [Pure React Carousel](https://express-labs.github.io/pure-react-carousel/) and a lot, but they are not utilizing the native scrolling feature, and so not work natively on iOS browser (the animation not works smoothly).
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
export { Carousel } from "./lib/Carousel";
|
|
2
|
-
export {
|
|
3
|
-
export type {
|
|
2
|
+
export type { IProps as ICarouselProps } from "./lib/Carousel";
|
|
3
|
+
export type { OnSlideProps, ICarouselContextProps } from "./lib/CarouselContext";
|
|
4
|
+
export { Slider } from "./lib/Slider";
|
|
5
|
+
export type { IProps as ISliderProps } from "./lib/Slider";
|
|
4
6
|
export { Slide } from "./lib/Slide";
|
|
5
7
|
export type { IProps as SlideProps } from "./lib/Slide";
|
|
6
8
|
export { ButtonBack } from "./lib/ButtonBack";
|