Товарные карточки
Товарная подборка с фотографиями одежды, ценами, скидками и выбором размера — как в настоящем интернет-магазине.
Товарные карточки
Что можно попробовать
- Перелистывать товары стрелками, точками или перетаскиванием.
- Выбрать размер и добавить товар в демонстрационную корзину. Счётчик учитывает количество, а кнопка показывает товары выбранного размера.
- Добавить товар в избранное кнопкой с сердцем.
- Нажать «Мобильный вид · 375 px», чтобы проверить карточку на узком экране.
Корзина и избранное работают в пределах этой демонстрации. Для настоящего магазина обработчики кнопок подключаются к его API.
Адаптивность
| Ширина окна примера | Карточек в кадре |
|---|---|
| Более 720 px | 3 |
| От 481 до 720 px | 2 |
| До 480 px включительно | 1 |
Брейкпоинты реагируют на ширину окна примера. При переключении мобильного вида обновляется тот же экземпляр Tvist: выбранные размеры, корзина и избранное сохраняются.
Разметка и управление
Каждый слайд — самостоятельная карточка article с изображением, названием, ценой, выбором размера и кнопкой покупки. Стрелки и контейнер пагинации находятся в HTML и передаются через опции arrows и pagination.
Полный исполняемый HTML, CSS и JavaScript доступны во вкладках над кодом. Кнопка «Скопировать всю страницу» собирает готовую страницу с подключённым Tvist.
Фотографии и ссылки на товары взяты из демонстрационного магазина Newtone. Для своей подборки замените изображения, названия, цены и ссылки в HTML.