Слайдер
Новый HTML-тег <cb-slider><cb-slider style="aspect-ratio: 1920/1080">
<cb-slide src="/my/image1.webp"></cb-slide>
<cb-slide src="/my/image2.webp"></cb-slide>
<cb-slide src="/my/image3.webp"></cb-slide>
<cb-slide src="/my/image4.webp"></cb-slide>
<cb-slide src="/my/image5.webp"></cb-slide>
</cb-slider>Атрибуты
effect
Более 20 визуальных эффектов при переходе между слайдами. Названия указываются через пробел, по умолчанию переход выбирается случайно. Возможные значения:
center ripple dreamy fade fadeBlack fadeGray blend unfoldForwards unfoldForwardsDown unfoldForwardsUp blur shine melt radar flow paints rollForwards rollUp windduration
Продолжительность паузы между переходами в миллисекундах. По умолчанию 4600 (4,6 сек.)
fit
Масштабирование слайда. Возможные значения:
contain cover fill. По умолчанию containsrc, srcset
Для установки источника изображения, те же, что и у тега
img. Применяются к внутренним тегам cb-slide.JavaScript
slider.addEventListener('setSlide', callback)Появление слайда.
Методы
.setSlide(from, to)
Установит слайд или начнет переход с одного слайда на другой. Если указать индекс слайда, то установится этот слайд. Если указать два индекса, то начнется переход между слайдами.
.duration
Продолжительность паузы между переходами.