Слайдер продуктов для интернет-магазина на JSВ то время как мы просматриваем страницу товаров в интернет-магазине, часто возникает желание узнать больше об этом товаре, при этом вам приходится переходить на новую страницу, но что делать, если вы хотите создать простую манипуляцию с изображениями просто перематывая их вид, и узнавая цену на различные вариации данного продукта, при этом не переходя на дополнительную вкладку. В данном уроке мы расскажем, как можно осуществить такой слайдер с изображения, при этом с панелью навигации и ценовой политикой.

 

Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:

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

Шаг 1. HTML

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

Обратите внимание, что .cd-dots элементы это точки навигации для каждого ползунка продукции и .cd-new-price -новая цена, если продукт со скидкой, данный код непосредственно не выполняется ​​в HTML, но создана при помощи JQuery.

Слайдер продуктов для интернет-магазина на JS

Шаг 2. CSS

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

По умолчанию, элементы списка в имеют абсолютное позиционирование и перевел исключая .cd-gallery дочерних элементов, поэтому они не видны. Затем мы по очередности устанавливаем значения для каждого элемента слайдера

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

При наведении курсора мыши на наше изображение мы хотим донести пользователю информацию, что имеются еще изображения для просмотра, при этом они будут плавно появляться по этому мы использовали дополнительные .hover:

Шаг 3. JS

Мы использовали JQuery, чтобы реализовать ползунок изображения продукта (с сенсорной навигацией предыдущий / следующий и навигации точек).
Кроме того, мы определили updatePrice () функцию для обновления цены продукта (если есть изменения цены продукта). Эта функция проверяет, если выбранный элемент в продаже ( data-sale=»true» ), и, если это так, добавляет к продаже  класс в .cd-price элемента (старая цена будет перечеркнута) и вставками нового класса .cd-new-price- элемент (данная цена будет отображаться в замен старой).

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

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.