Слайдер предварительного просмотра продукта в CSS и jQuery

Простой способ показать больше изображений и вариаций продуктов прямо в галерее продуктов.

Ранее мы уже подобное описывали в статье «Выбор продукта и быстрое добавление в корзину». Это еще один пример как сделать предварительный просмотр товара! 



ДЕМО
ИСХОДНИКИ


Просматривая страницы продуктов, вы часто основываете свое решение «узнать больше» о продукте только на фотографиях. Визуальное воздействие, особенно на мобильных устройствах, имеет важное значение для каждого процесса покупки.

Что делать, если товар доступен в разных цветах? Это часть информации, которая обычно недоступна пользователю, пока он / она не захочет перейти на страницу продукта. Другой подход UX, один из сегодняшних ресурсов, заключается в том, чтобы позволить пользователю взаимодействовать с предварительным просмотром продукта прямо на главной странице галереи. Простой слайдер для проверки вариантов продукта перед переходом на страницу продукта может быть способом повысить коэффициент конверсии.

Красивые картинки товаров от Ugmonk.


Создание структуры

Структура HTML представляет собой неупорядоченный список. Каждый элемент списка содержит вложенный неупорядоченный список (с изображениями продуктов) и информацию о продукте (название и цена).


<ul class="cd-gallery">
   <li>
      <a href="http://codyhouse.co/">
         <ul class="cd-item-wrapper">
            <li class="selected">
               <img src="img/ugmonk-tshirt-1.jpg" alt="Preview image">
            </li>

            <li class="move-right" data-sale="true" data-price="$22">
               <img src="img/ugmonk-tshirt-2.jpg" alt="Preview image">
            </li>

            <li>
               <img src="img/ugmonk-tshirt-3.jpg" alt="Preview image">
            </li>
         </ul> <!-- cd-item-wrapper -->
      </a>

      <div class="cd-item-info">
         <b><a href="#0">Mountains</a></b>

         <em class="cd-price">$26</em>
      </div> <!-- cd-item-info -->
   </li>

   <!-- other list items here -->
</ul> <!-- cd-gallery -->

Обратите внимание

Элементы .cd-dots (точки навигации для каждого слайдера продукта) и .cd-new-price (новая цена, если продукт продается) не вставляются напрямую в HTML, а создаются с помощью jQuery.


Добавление стиля

На маленьких экранах изображения для предварительного просмотра продуктов видны по умолчанию: мы предполагаем, что пользователь будет видеть по одному продукту за раз, поэтому он / она не будет отвлекаться. Затем пользователь может просматривать их оба, проводя пальцем или щелкая изображения предварительного просмотра.

По умолчанию элементы списка находятся в абсолютном положении и переводятся справа (за пределами родительской галереи .cd), поэтому они не видны. Затем мы объявили 4 класса, чтобы правильно их стилизовать:

Top

🔖 Выбор по тегам ×

💌 Написать сообщение ×

Все поля обязательны для заполнения!