Скролл
Новый HTML-тег <cb-scroll> дополняет CSS свойство scroll-snap-align кнопками навигации с изменяемым шагом.<cb-scroll class="cb-exmplscroll">
<cb-scroll-content>
<img draggable="false" src="/exmpl/stone-yellow-700.png">
<img draggable="false" src="/exmpl/stone-green-700.png">
<img draggable="false" src="/exmpl/stone-blue-700.png">
<img draggable="false" src="/exmpl/stone-purple-700.png">
<img draggable="false" src="/exmpl/stone-aqua-700.png">
<img draggable="false" src="/exmpl/stone-red-700.png">
</cb-scroll-content>
<div class="cb-button cb-nav cb-neutral" prev></div>
<div class="cb-button cb-nav cb-neutral" next></div>
</cb-scroll>
CSS
--step: 1;
Шаг — CSS переменная. Количество прокручиваемых элементов; по умолчанию один. Подбирайте шаг в зависимости от того, сколько вмещается на экране элементов. К примеру для мониторов
--step: 3 и для мобильных --step: 1.Стили CSS из примера выше
.cb-exmplscroll {
width: 500px;
--step: 2;
}
.cb-exmplscroll img {
width: 200px;
height: 200px;
scroll-snap-align: none center;
aspect-ratio: 1;
}
@media (max-width: 700px) {
.cb-exmplscroll img {
width: 100%;
height: auto;
--step: 1;
}
}