Оформление полной карточки о товаре, фото, и мини фото, плюс видео, как реализовывают?
Оформление полной карточки о товаре, фото, и мини фото, плюс видео, как лучше реализовать?
Может какой-то есть готовый скрипт, а то обычно я из слайдера делаю или что-то типа того, но не всегда хорошо.
Появилась задача вставлять видео, вот думаю, какой плагин подойдет.
Что-то хочет как на вб, основная фотка, маленькие и видео над фото маленькими.
Дополнительно:
любой слайдер с поддержкой thumbnails, тот же owl carousel, он поддерживает video
чтобы все нормально было и адаптивно
просто с ними надо возиться, как обычно я делал
Оказывается, у разных людей эти понятия различаются, поэтому с ними приходится возиться.
Но я бы сделал на swiper
Может какой-то есть готовый скрипт, а то обычно я из слайдера делаю или что-то типа того, но не всегда хорошо.
В целом, логично делать слайдер из слайдера. Он же готовый скрипт.
Owl когда-то нравился, но у него JQ в зависимостях и были проблемы с флексами и гридами. Возможно, пофиксили. Хотя, кажется, его кучу лет не обновляли.
Ответы:
Обычно такие штуки сами пишут. Таких либ не встречал, плюс от цмс зависит все. Там же выбор цвета, размера и тп. Попробуйте найти в шаблонах готовых или плагинах woocommerce то, что Вам нужно и посмотрите как там реализовано.
Например скачайте Product Gallery Slider. Посмотрите чо в нем.
- Я не про цвет, а фото, доп фото и видео.
Product Gallery Slider - это готовый модуль, для готовых решений.
- Антон Вебсайтовский, я тоже про фото и видео.
Да это готовый модуль. Из него можно взять js, html, css и адаптировать под себя. Или вообще либу сделать на его основе. Все от WordPress и php просто выкинуть и все.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для оформления полной карточки товара на веб-странице с фотографиями и видео рекомендуется использовать HTML, CSS и JavaScript.
Вот пример разметки HTML для карточки товара:
<div class="product-card"> <img src="main-photo.jpg" alt="Main Photo" class="main-photo"> <div class="thumbnails"> <img src="thumbnail1.jpg" alt="Thumbnail 1" class="thumbnail"> <img src="thumbnail2.jpg" alt="Thumbnail 2" class="thumbnail"> <img src="thumbnail3.jpg" alt="Thumbnail 3" class="thumbnail"> </div> <h2>Название товара</h2> <p>Описание товара</p> <p class="price">Цена: $50</p> <button class="add-to-cart">Добавить в корзину</button> <div class="video"> </div> </div><div class="product-card"> <img src="main-photo.jpg" alt="Main Photo" class="main-photo"> <div class="thumbnails"> <img src="thumbnail1.jpg" alt="Thumbnail 1" class="thumbnail"> <img src="thumbnail2.jpg" alt="Thumbnail 2" class="thumbnail"> <img src="thumbnail3.jpg" alt="Thumbnail 3" class="thumbnail"> </div> <h2>Название товара</h2> <p>Описание товара</p> <p class="price">Цена: $50</p> <button class="add-to-cart">Добавить в корзину</button> <div class="video"> </div> </div>
Для стилей CSS:
.product-card { display: flex; flex-direction: column; width: 300px; border: 1px solid #ccc; padding: 10px; } .main-photo { width: 100%; height: auto; } .thumbnails { display: flex; justify-content: space-between; margin-top: 10px; } .thumbnail { width: 30px; height: 30px; object-fit: cover; } .price { font-weight: bold; margin-top: 10px; } .add-to-cart { padding: 5px 10px; background-color: #007bff; color: #fff; border: none; cursor: pointer; margin-top: 10px; } .video { margin-top: 20px; } .video iframe { width: 100%; height: 300px; }
Используйте JavaScript для добавления интерактивности карточке товара, например, для создания слайдера с фотографиями или для отображения видео при нажатии на кнопку.
Таким образом, вы можете создать стильную и функциональную карточку товара на вашем сайте, которая привлечет внимание пользователей и поможет им лучше понять представленный товар.