diff --git a/docs/case-page-blocks.md b/docs/case-page-blocks.md index 1f076ee..595c550 100644 --- a/docs/case-page-blocks.md +++ b/docs/case-page-blocks.md @@ -154,6 +154,14 @@ - ленивая подгрузка соседних кадров: у `` можно задать `data-src` (временный `src` — прозрачный GIF), скрипт подставит при подходе, как у галереи; пока есть `data-src`, клик по viewer не открывается; - клик по активному кадру открывает общий viewer кейса (`data-image-viewer`). +**Ширина слайдера подстраивается под ширину картинок** (высота — автоматически по контенту). Модификаторы как у статичных `.case-media`: + +- базовый (без модификатора) / `.case-media--content` — ширина = `--slider-natural-w` (по умолчанию 100% колонки контента). Задайте на `
` inline-стиль `--slider-natural-w: <ширина картинки>px`, чтобы слайдер точно встал в размер кадров и не превышал его; `max-width` ограничен вьюпортом, поэтому на узких экранах сжимается; +- `.case-media--wide` — слайдер выходит за колонку контента (как одиночные wide-картинки), центрируется по вьюпорту; +- `.case-media--natural` — как базовый, но `max-width` по умолчанию `600px` (переопределите `--slider-natural-w`). + +Кнопки «пред/след» и точки находятся **внутри** `.case-media-slider__viewport`, поэтому не участвуют в расчёте ширины блока. + **Разметка** (число `data-slider-dot` должно равняться числу `.case-media-slider__slide`; `aria-label` точек — «Перейти к изображению N»): ```html diff --git a/public/assets/template-elements-demo/slider-portrait-1.webp b/public/assets/template-elements-demo/slider-portrait-1.webp new file mode 100644 index 0000000..b0829e8 Binary files /dev/null and b/public/assets/template-elements-demo/slider-portrait-1.webp differ diff --git a/public/assets/template-elements-demo/slider-portrait-2.webp b/public/assets/template-elements-demo/slider-portrait-2.webp new file mode 100644 index 0000000..56c4d5d Binary files /dev/null and b/public/assets/template-elements-demo/slider-portrait-2.webp differ diff --git a/public/assets/template-elements-demo/slider-portrait-3.webp b/public/assets/template-elements-demo/slider-portrait-3.webp new file mode 100644 index 0000000..c9db02c Binary files /dev/null and b/public/assets/template-elements-demo/slider-portrait-3.webp differ diff --git a/public/assets/template-elements-demo/slider-portrait-4.webp b/public/assets/template-elements-demo/slider-portrait-4.webp new file mode 100644 index 0000000..fb6eb40 Binary files /dev/null and b/public/assets/template-elements-demo/slider-portrait-4.webp differ diff --git a/public/assets/template-elements-demo/slider-portrait-5.webp b/public/assets/template-elements-demo/slider-portrait-5.webp new file mode 100644 index 0000000..84d6332 Binary files /dev/null and b/public/assets/template-elements-demo/slider-portrait-5.webp differ diff --git a/public/assets/template-elements-demo/slider-portrait-6.webp b/public/assets/template-elements-demo/slider-portrait-6.webp new file mode 100644 index 0000000..6e4b136 Binary files /dev/null and b/public/assets/template-elements-demo/slider-portrait-6.webp differ diff --git a/public/assets/template-elements-demo/slider-portrait-7.webp b/public/assets/template-elements-demo/slider-portrait-7.webp new file mode 100644 index 0000000..6d9886f Binary files /dev/null and b/public/assets/template-elements-demo/slider-portrait-7.webp differ diff --git a/public/assets/template-elements-demo/slider-wide-1.webp b/public/assets/template-elements-demo/slider-wide-1.webp new file mode 100644 index 0000000..3fc9f41 Binary files /dev/null and b/public/assets/template-elements-demo/slider-wide-1.webp differ diff --git a/public/assets/template-elements-demo/slider-wide-2.webp b/public/assets/template-elements-demo/slider-wide-2.webp new file mode 100644 index 0000000..9a1bef3 Binary files /dev/null and b/public/assets/template-elements-demo/slider-wide-2.webp differ diff --git a/public/assets/template-elements-demo/slider-wide-3.webp b/public/assets/template-elements-demo/slider-wide-3.webp new file mode 100644 index 0000000..e2a37b8 Binary files /dev/null and b/public/assets/template-elements-demo/slider-wide-3.webp differ diff --git a/public/assets/template-elements-demo/slider-wide-4.webp b/public/assets/template-elements-demo/slider-wide-4.webp new file mode 100644 index 0000000..b55f39a Binary files /dev/null and b/public/assets/template-elements-demo/slider-wide-4.webp differ diff --git a/public/assets/template-elements-demo/slider-wide-5.webp b/public/assets/template-elements-demo/slider-wide-5.webp new file mode 100644 index 0000000..860ca13 Binary files /dev/null and b/public/assets/template-elements-demo/slider-wide-5.webp differ diff --git a/public/assets/template-elements-demo/slider-wide-6.webp b/public/assets/template-elements-demo/slider-wide-6.webp new file mode 100644 index 0000000..b88651a Binary files /dev/null and b/public/assets/template-elements-demo/slider-wide-6.webp differ diff --git a/public/assets/template-elements-demo/slider-wide-7.webp b/public/assets/template-elements-demo/slider-wide-7.webp new file mode 100644 index 0000000..df25fbf Binary files /dev/null and b/public/assets/template-elements-demo/slider-wide-7.webp differ diff --git a/public/cases/template-elements-demo/index.html b/public/cases/template-elements-demo/index.html index 373b3b2..ec7b4b5 100644 --- a/public/cases/template-elements-demo/index.html +++ b/public/cases/template-elements-demo/index.html @@ -470,6 +470,196 @@
+

+ Тот же слайдер, но с модификатором case-media--wide — выходит за колонку + контента, как одиночные широкие картинки. Кнопки пред/след и точки ведут себя так же. +

+
+
+
+
+ Слайдер wide, кадр 1 +
+
+ Слайдер wide, кадр 2 +
+
+ Слайдер wide, кадр 3 +
+
+ Слайдер wide, кадр 4 +
+
+ Слайдер wide, кадр 5 +
+
+ Слайдер wide, кадр 6 +
+
+ Слайдер wide, кадр 7 +
+
+
+ + +
+
+
+ + + + + + + +
+
+ +

+ Слайдер с горизонтальными (широкими) кадрами одного размера — все картинки + 1024×800. +

+
+
+
+
+ Широкий слайдер, кадр 1 +
+
+ Широкий слайдер, кадр 2 +
+
+ Широкий слайдер, кадр 3 +
+
+ Широкий слайдер, кадр 4 +
+
+ Широкий слайдер, кадр 5 +
+
+ Широкий слайдер, кадр 6 +
+
+ Широкий слайдер, кадр 7 +
+
+
+ + +
+
+
+ + + + + + + +
+
+ +

+ Тот же слайдер, но с вертикальными кадрами одного размера — все картинки + 600×800. +

+
+
+
+
+ Вертикальный слайдер, кадр 1 +
+
+ Вертикальный слайдер, кадр 2 +
+
+ Вертикальный слайдер, кадр 3 +
+
+ Вертикальный слайдер, кадр 4 +
+
+ Вертикальный слайдер, кадр 5 +
+
+ Вертикальный слайдер, кадр 6 +
+
+ Вертикальный слайдер, кадр 7 +
+
+
+ + +
+
+
+ + + + + + + +
+
+ +

+ Отдельный пример: переключатель режима анимации смены кадров — + slide (сдвиг), fade (кроссфейд) и none (без перехода). + Режим задаётся атрибутом data-slider-anim на фигуре. +

+
+
+ + + +
+
+
+
+ Пример анимации, кадр 1 +
+
+ Пример анимации, кадр 2 +
+
+ Пример анимации, кадр 3 +
+
+ Пример анимации, кадр 4 +
+
+
+ + +
+
+
+ + + + +
+
+

Callout: важный абзац с эмоджи