Слайдер товаров с анимацией и категориями для интернет-магазинов

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

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

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

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

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

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

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

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

Посмотреть работу слайдера можно на демо-странице, ссылку на которую найдете в конце статьи. Обратите внимание, что вся анимация (появление изображений при клике на категорию) и эффект непрозрачности при наведении курсора на картинку реализованы с помощью CSS. Небольшой java-скрипт используется лишь для сортировки изображений по категориям.

Инструкция по установке слайдера на сайт

Шаг 1. Скачать и распаковать архив с файлами. В архиве будет всего три папки: css, images, js и текстовый файл "html".

Шаг 2. В папке с картинками заменить исходные изображения на свои. Размер всех картинок - 280 х 280 рх.

Шаг 3. Создать на хостинге отдельную для слайдера папку, назвав её tov_slaider и в неё перетянуть все парки из архива. Можно обойтись и без создания папки, в таком случае вам придется скопировать код из style.css и добавить его в конец файла стилей вашего сайта. А картинки для слайдера загрузить в общую папку images на хостинге.

Шаг 4. Подключить стили и viewport для адаптивной верстки, разместив на странице между тегами <head> и </head> следуюшие строки кода:

Шаг 5. Скопировать код слайдера из текстового файла "html" и вставить в основной код страницы между тегами <body> и </body>. В коде подкорректировать пути к картинкам. Поскольку у меня они загружены в отдельную папку tov_slaider и имеют названия от 1.jpg до 15.jpg, то путь к первому изображению будет таким:

<a href="#"><img src="tov_slaider/images/1.jpg" alt="Мужская обувь"><h4>Ботинки</h4></a></li>,

где <a href="#"> - ссылка на страницу с товаром, в которой вместо знака решетки нужно прописать соответствующий URL,

1.jpg - название картинки,

alt="Мужская обувь" - альтернативное описание,

<h4>Ботинки</h4> - заголовок, который будет отображаться под картинкой на слайдере.

Если вы закинули картинки в общую папку images, то путь к картинкам у вас будет немного короче:

<a href="#"><img src="images/1.jpg" alt="Мужская обувь"><h4>Ботинки</h4></a></li>

Шаг 6. Загрузить страницу с установленным слайдером на хостинг и проверить работоспособность.

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

Я видела такой слайдер на сайте инфопродуктов, где видеокурсы и электронные книги были разбиты на несколько категорий и в слайдере крутились обложки самых продающихся ТОПовых продуктов.

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

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

Скачать архив Смотреть демо

Всем желаю удачных проектов! До новых встреч!

С ув. Светлана (SvetLana_TSV).

P.S. Подписчики в этом выпуске рассылки бесплатно получат руководство по таргетированной рекламе ВКонтакте. Как правильно настроить рекламу в социальной сети ВК с минимальными вложениями и максимальным результатом - именно об этом рассказывается и показывается в мануале.

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

WebPageMaker, Wordpress, Joomla - инструкции для

новичков по установке CMS и шаблонов к ним.

Пошаговое руководство для новичков по созданию,

раскрутке и монетизации собственного сайта.

Добро пожаловать в проект "Сайт с нуля" !

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

Здесь вы можете скачать русские версии WebPageMaker, WordPress, Joomla, Adobe Muse, а также инструкции по установке WordPress и Joomla на хостинг и мануалы по установке тем (шаблонов) для этих CMS.

Всем желаю удачи и смелых воплощений идей на вашем сайте !

2010 - 2018 © Сайт с нуля: пошаговое руководство для новичков по созданию, раскрутке и монетизации собственного сайта. WebPageMaker, WordPress, Joomla - русские версии.

Автор и администратор данного проекта - SvetLana_TSV. Копирование материалов сайта разрешено только при наличии активной ссылки на данный проект.