http://wm-monitoring.ru/ ')) {alert('Спасибо за то что установили нашу кнопку! =)');} else {alert('Очень жаль! =(');}"> http://wm-monitoring.ru/

Главная › Новости

Слайдер для сайта Интернет-Магазина: JQuery Slider

Опубликовано: 23.08.2018

видео Слайдер для сайта Интернет-Магазина: JQuery Slider

слайдер для интернет магазина

Здравствуйте, дорогие друзья и читатели – Sozdaiblog.ru!



В этом посте я хочу Вам показать, как сделать слайдер для сайта «Интернет-магазина», с помощью нескольких элементов CSS анимации и библиотеки JQuery .

Идея этого « Jquery Slider » была позаимствована у зарубежных разработчиков, которые в свою очередь спёрли её у международной компании « Aplle ».


1. Адаптивный слайдер для сайта - Slick.js

Вся прелесть данного слайдера в том, что все его категории представлены в виде товаров определённой марки.

Такой способ наглядной демонстрации необходимого продукта, несомненно, привлечёт внимание любого клиента.

 

 

Первым делом, нужно отредактировать список  категорий слайдера:

 

<div class="main"> <div id="mi-slider" class="mi-slider"> <ul> <li><a href="#"><img src="images/1.jpg" alt="img01"><h4>Ботинки</h4></a></li> <li><a href="#"><img src="images/2.jpg" alt="img02"><h4>Полуботинки</h4></a></li> <li><a href="#"><img src="images/3.jpg" alt="img03"><h4>Мокасины</h4></a></li> <li><a href="#"><img src="images/4.jpg" alt="img04"><h4>Кроссовки</h4></a></li> </ul> <ul> <li><a href="#"><img src="images/5.jpg" alt="img05"><h4>Ремни</h4></a></li> <li><a href="#"><img src="images/6.jpg" alt="img06"><h4>Шляпы и шапки</h4></a></li> <li><a href="#"><img src="images/7.jpg" alt="img07"><h4>Солнечные очки</h4></a></li> <li><a href="#"><img src="images/8.jpg" alt="img08"><h4>Шарфы</h4></a></li> </ul> <ul> <li><a href="#"><img src="images/9.jpg" alt="img09"><h4>Казуальные</h4></a></li> <li><a href="#"><img src="images/10.jpg" alt="img10"><h4>Люкс</h4></a></li> <li><a href="#"><img src="images/11.jpg" alt="img11"><h4>Спортивные</h4></a></li> </ul> <ul> <li><a href="#"><img src="images/12.jpg" alt="img12"><h4>Ручной клади</h4></a></li> <li><a href="#"><img src="images/13.jpg" alt="img13"><h4>Большие вещевые</h4></a></li> <li><a href="#"><img src="images/14.jpg" alt="img14"><h4>Сумки для ноутбуков</h4></a></li> <li><a href="#"><img src="images/15.jpg" alt="img15"><h4>Портфели</h4></a></li> </ul> <nav> <a href="#">Обувь</a> <a href="#">Аксессуары</a> <a href="#">Часы</a> <a href="#">Сумки</a> </nav> </div> </div>

 

Вы должны вписать все названия разделов, адреса картинок и проставить ссылки перенаправления.

Затем, его нужно поместить в необходимое место между тегами <body></body> .

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

Теперь, их нужно подключить.

Для этого, в любом месте между тегами <head></head> , вписываем следующее:

 

<link rel="stylesheet" type="text/css" href="Путь к файлу/style.css" /> <script src="Путь к файлу/modernizr.custom.63321.js"></script> <script src="Путь к файлу/jQuery.js"></script>

 

Внутри каждого кода нужно прописать путь к одному из файлов, ранее загруженных на сервер.

Прошу обратить внимание. Этими действиями мы подключаем « CSS стили », библиотеку « JQuery » и ещё один необходимый код. Если эти файлы у Вас уже подключены, то все стили можно скопировать в основной файл Вашего ресурса, а « JQuery » удалить.

Далее, чуть ниже кода списка категорий, который мы поместили в <body> , прописываем следующие скрипты:

 

<script src="Путь к файлу/jquery.catslider.js"></script> <script src="Путь к файлу/new.js"></script>

 

Как и раньше, в них нужно прописать путь к файлам на сервере.

Если Вы всё выполнили верно, то Ваш « Jquery Slider » заработает.

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

Если у Вас появятся собственные идеи, обязательно поделитесь ими в комментариях.

На сегодня это всё. До новых статей…

 

С уважением, Денис Черников!

Интересное по теме:

Сделайте, пожалуйста, доброе дело, расскажите о блоге своим друзьям:
Карта
rss