Слайдер для сайта Интернет-Магазина. Jquery Slider!
Здравствуйте, дорогие друзья и читатели – Sozdaiblog.ru!
В этом посте я хочу Вам показать, как сделать слайдер для сайта «Интернет-магазина», с помощью нескольких элементов CSS анимации и библиотеки JQuery.
Идея этого «Jquery Slider» была позаимствована у зарубежных разработчиков, которые в свою очередь спёрли её у международной компании «Aplle».
Вся прелесть данного слайдера в том, что все его категории представлены в виде товаров определённой марки.
Такой способ наглядной демонстрации необходимого продукта, несомненно, привлечёт внимание любого клиента.
Слайдер для сайта. CSS, Jquery Slider.
Первым делом, нужно отредактировать список категорий слайдера:
<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» заработает.
Конечно, этот слайдер для сайта, можно использовать не только в Интернет-магазинах. Включите свою фантазию, и Вы найдёте ему достойное применение.
Если у Вас появятся собственные идеи, обязательно поделитесь ими в комментариях.
На сегодня это всё. До новых статей…
С уважением, Денис Черников!
-
Реальный заработок на Контекстной Рекламе Яндекса!
-
7 наиболее часто задаваемых вопросов по ведению блога
-
Как красиво вывести HTML, PHP код в статье блога?
- 3 Эффекта CSS анимации для Рекламных Мотиваций!
-
Как эффективно вести корпоративный блог?
-
Обязательные Wordpress плагины, которые должны быть установлены
-
Как увеличить скорость загрузки сайта до 1 секунды?
-
Кнопка вверх для сайта. 1001 статья в Интернете!
-
Как получить обратные ссылки на сайт?
-
Seo оптимизация изображений и картинок на сайте!
