ГлавнаяCSS, JQuery, JavaScript › Слайдер для сайта Интернет-Магазина. Jquery Slider!


Слайдер для сайта Интернет-Магазина. Jquery Slider!


Слайдер для сайта

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

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

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

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

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

 

Слайдер для сайта. CSS, Jquery Slider.

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» заработает.

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

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

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

 

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




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




34 комментарияА что думаете Вы?

  1. Олег

    Интересная идея, хотя заморачиваться с этими слайдерами для обычного блога смысла нет.

    [Ответить]

    Денис Черников ответил:

    Почему, нет?

    Слайдер предаст обычному блогу необычный вид, что поможет ему выделиться из толпы.

    [Ответить]

    Татьяна ответил:

    Магазина у меня нет, а вот для чего его пристроить у себя на сайте — пару идей уже в голове созрело. Благодарю, Денис, у вас как всегда полно свежей и нужной информации!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста, Татьяна! Заходите на огонёк за новыми идеями!

    [Ответить]

    Константин ответил:

    Не согласен с Вами, Денис. В обычном блоге с «серым» дизайном данный слайдер не подойдет. Здесь надо специально верстать почти под этот слайдер или перееопать его стили под другой дизайн.

    P.S. И не пора ли убрать снежинки на главной странице, а то вроде именно они замедляют загрузку

    [Ответить]

    Денис Черников ответил:

    Константин, кому потребуется этот слайдер тот сам решит, что ему переделать и подстроить под него.

    P.S. Как-то не замечал проблем с загрузкой.

    [Ответить]

  2. Артём

    Ошибка!

    В вставляем:

    В вставляем:

    [Ответить]

    Денис Черников ответил:

    Вы о чём?

    [Ответить]

  3. Артём

    В вставляем:

    В вставляем:

    [Ответить]

    Денис Черников ответил:

    Можете просто без кода сказать, что у Вас стряслось? Здесь код в комментариях отключен!

    [Ответить]

  4. Артём

    не отображается текс на английском, поэтому не видно кода

    [Ответить]

    Денис Черников ответил:

    Текст тут не при чём! Что Вы хотели!

    [Ответить]

  5. Артём

    отправил на почту

    [Ответить]

    Денис Черников ответил:

    На почте, тоже самое! Просто языком можете сказать что-то?

    [Ответить]

  6. Артём

    последнюю строчку из хеад нужно перенести в боди.

    [Ответить]

    Денис Черников ответил:

    С какой стати?

    [Ответить]

    Артём ответил:

    проверил, работает только так

    [Ответить]

    Денис Черников ответил:

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

    [Ответить]

  7. Влад

    Спасибо.

    Я кажется придумал куда я буду применять его. Супер!

    [Ответить]

    Денис Черников ответил:

    Пожалуйста! Может поделитесь своей идеей?

    [Ответить]

  8. Артём

    я делал не в вордпрессе

    [Ответить]

    Денис Черников ответил:

    Поэтому и не получилось, у меня на демонстрационной странице вообще без «body» работает.

    [Ответить]

  9. Vadar

    Классно то как смотрится!

    [Ответить]

    Денис Черников ответил:

    Полностью с Вами согласен!

    [Ответить]

    Николай ответил:

    Да, в принципе, симпатично смотрится довольно

    [Ответить]

    Денис Черников ответил:

    А то!

    [Ответить]

  10. Константин

    И еще скрипт «modernizr.custom.63321.js» нужен лишь в демонстрации, для предупреждении о «глупом» браузере! Внимательней надо быть при рерайте. А то RUSELLER только переводами занимается, а Вы у них суть заимствуете.

    [Ответить]

    Денис Черников ответил:

    Если Вы такой умный, то открутите это скрипт и запустите без него, посмотрим, что у Вас получится! На счёт «RUSELLER», понятия не имею кто это или что это! И про какую суть Вы имеете ввиду? Да ещё, не умеючи сами не учите других!

    [Ответить]

  11. SERGEY

    на вордпресс куда воткнуть?

    [Ответить]

    Денис Черников ответил:

    В посте подробно всё написано! Если Вы не знаете, где какие файлы и теги находятся в движке, начните изучение с первых статей. Так будет проще, чем сразу лезть в дебри.

    [Ответить]

  12. Владимир

    В Мозиле не работает... Даже ищак нормально показыват (восьмой)

    [Ответить]

    Денис Черников ответил:

    Всё замечательно работает!

    [Ответить]

  13. Алекс

    В Опера при наведении ховер (т.е. засветление картинки) работает только в разделе «Сумки».

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

    Было бы замечательно, если кто-нибудь выложил рабочую версию.

    [Ответить]

    Денис Черников ответил:

    В опере ничего путём не работает!

    [Ответить]

Оставить комментарий!

Вверх