@snack-uikit/carousel 0.6.8-preview-d1ce0cc3.0 → 0.6.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/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,24 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## <small>0.6.9 (2026-01-21)</small>
|
|
7
|
+
|
|
8
|
+
* fix(SITE-10515): carousel item provider hide x overflow ([42ad236](https://github.com/cloud-ru-tech/snack-uikit/commit/42ad236))
|
|
9
|
+
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
## <small>0.6.8 (2026-01-19)</small>
|
|
15
|
+
|
|
16
|
+
* chore(FF-6693): migrate tests from TestCafe to Playwright ([f32aff8](https://github.com/cloud-ru-tech/snack-uikit/commit/f32aff8))
|
|
17
|
+
* chore(FF-6693): tune test configs ([d194f4d](https://github.com/cloud-ru-tech/snack-uikit/commit/d194f4d))
|
|
18
|
+
* docs(FF-7788): readme update ([e3142b8](https://github.com/cloud-ru-tech/snack-uikit/commit/e3142b8))
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
6
24
|
## <small>0.6.7 (2025-11-28)</small>
|
|
7
25
|
|
|
8
26
|
### Only dependencies have been changed
|
package/README.md
CHANGED
|
@@ -6,6 +6,47 @@
|
|
|
6
6
|
|
|
7
7
|
[Changelog](./CHANGELOG.md)
|
|
8
8
|
|
|
9
|
+
## Description
|
|
10
|
+
|
|
11
|
+
- Пакет `@snack-uikit/carousel` предоставляет компонент `Carousel` для создания каруселей и слайдеров с поддержкой навигации по элементам.
|
|
12
|
+
- Компонент позволяет отображать несколько элементов одновременно, настраивать количество видимых элементов и шаг прокрутки, поддерживает свайп-жесты для мобильных устройств и автоматическую прокрутку слайдов.
|
|
13
|
+
- Карусель включает встроенные элементы управления: стрелки навигации (prev/next) и пагинацию для переключения между страницами, которые можно включать или отключать по необходимости.
|
|
14
|
+
- Поддерживает цикличную прокрутку (`infiniteScroll`) для бесконечного переключения слайдов, контролируемое и неконтролируемое состояние через проп `state`, а также настройку видимости стрелок управления (по ховеру или всегда).
|
|
15
|
+
- Компонент автоматически рассчитывает размеры элементов на основе контейнера и количества отображаемых элементов, адаптируется к изменению размеров окна и скрывает невидимые элементы из DOM для оптимизации производительности.
|
|
16
|
+
- Figma: [`Carousel`](https://www.figma.com/file/jtGxAPvFJOMir7V0eQFukN/Snack-UI-Kit-1.1.0?node-id=44%3A7537&mode=design).
|
|
17
|
+
|
|
18
|
+
## Example
|
|
19
|
+
|
|
20
|
+
```tsx
|
|
21
|
+
import { Carousel } from '@snack-uikit/carousel';
|
|
22
|
+
import { Card } from '@snack-uikit/card';
|
|
23
|
+
|
|
24
|
+
function Example() {
|
|
25
|
+
const items = Array.from({ length: 12 }).map((_, i) => (
|
|
26
|
+
<Card key={i} header={<Card.Header title={`Item ${i + 1}`} />}>
|
|
27
|
+
Content for item {i + 1}
|
|
28
|
+
</Card>
|
|
29
|
+
));
|
|
30
|
+
|
|
31
|
+
return (
|
|
32
|
+
<Carousel
|
|
33
|
+
showItems={2.5}
|
|
34
|
+
scrollBy={2}
|
|
35
|
+
transition={0.4}
|
|
36
|
+
swipe={true}
|
|
37
|
+
arrows={true}
|
|
38
|
+
pagination={true}
|
|
39
|
+
infiniteScroll={true}
|
|
40
|
+
autoSwipe={5}
|
|
41
|
+
controlsVisibility="hover"
|
|
42
|
+
gap="var(--dimension-2m)"
|
|
43
|
+
>
|
|
44
|
+
{items}
|
|
45
|
+
</Carousel>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
9
50
|
[//]: DOCUMENTATION_SECTION_START
|
|
10
51
|
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
|
|
11
52
|
## Carousel
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
padding-bottom:var(--space-carousel-content-layout-padding, 4px);
|
|
5
5
|
padding-left:var(--space-carousel-content-layout-padding, 4px);
|
|
6
6
|
padding-right:var(--space-carousel-content-layout-padding, 4px);
|
|
7
|
-
overflow:hidden;
|
|
7
|
+
overflow-x:hidden;
|
|
8
8
|
width:100%;
|
|
9
9
|
margin:calc(0px - var(--space-carousel-content-layout-padding, 4px));
|
|
10
10
|
}
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
padding-bottom:var(--space-carousel-content-layout-padding, 4px);
|
|
5
5
|
padding-left:var(--space-carousel-content-layout-padding, 4px);
|
|
6
6
|
padding-right:var(--space-carousel-content-layout-padding, 4px);
|
|
7
|
-
overflow:hidden;
|
|
7
|
+
overflow-x:hidden;
|
|
8
8
|
width:100%;
|
|
9
9
|
margin:calc(0px - var(--space-carousel-content-layout-padding, 4px));
|
|
10
10
|
}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
7
|
-
"version": "0.6.
|
|
7
|
+
"version": "0.6.9",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -36,13 +36,13 @@
|
|
|
36
36
|
"license": "Apache-2.0",
|
|
37
37
|
"scripts": {},
|
|
38
38
|
"dependencies": {
|
|
39
|
-
"@snack-uikit/icons": "0.27.5
|
|
40
|
-
"@snack-uikit/pagination": "0.10.22
|
|
41
|
-
"@snack-uikit/utils": "4.0.
|
|
39
|
+
"@snack-uikit/icons": "0.27.5",
|
|
40
|
+
"@snack-uikit/pagination": "0.10.22",
|
|
41
|
+
"@snack-uikit/utils": "4.0.1",
|
|
42
42
|
"classnames": "2.5.1",
|
|
43
43
|
"lodash.debounce": "4.0.8",
|
|
44
44
|
"merge-refs": "1.3.0",
|
|
45
45
|
"uncontrollable": "8.0.4"
|
|
46
46
|
},
|
|
47
|
-
"gitHead": "
|
|
47
|
+
"gitHead": "13978ffd85835799833e9334ca1d72903a62f7d1"
|
|
48
48
|
}
|