Здравствуйте, дорогие друзья и читатели – 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» заработает.

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

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

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

 

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