Sozdaiblog.ru
Назад

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

Опубликовано: 26.01.2013
Время на чтение: 13 мин
34
5

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

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

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

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

 

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

Поделиться
Похожие записи
Комментарии:
  • Олег
    Опубликовано: 27.01.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 27.01.2013 Ответить на сообщение

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

      • Татьяна
        Опубликовано: 27.01.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 27.01.2013 Ответить на сообщение

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

          • Константин
            Опубликовано: 30.01.2013 Ответить на сообщение

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

          • Денис Черников
            Опубликовано: 30.01.2013 Ответить на сообщение

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

  • Артём
    Опубликовано: 27.01.2013 Ответить на сообщение

    Ошибка!
    В вставляем:
    В вставляем:

    • Денис Черников
      Опубликовано: 27.01.2013 Ответить на сообщение

      Вы о чём?

  • Артём
    Опубликовано: 27.01.2013 Ответить на сообщение

    В вставляем:
    В вставляем:

    • Денис Черников
      Опубликовано: 27.01.2013 Ответить на сообщение

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

  • Артём
    Опубликовано: 27.01.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 27.01.2013 Ответить на сообщение

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

  • Артём
    Опубликовано: 27.01.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 27.01.2013 Ответить на сообщение

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

  • Артём
    Опубликовано: 27.01.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 27.01.2013 Ответить на сообщение

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

      • Артём
        Опубликовано: 27.01.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 27.01.2013 Ответить на сообщение

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

  • Влад
    Опубликовано: 27.01.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 27.01.2013 Ответить на сообщение

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

  • Артём
    Опубликовано: 27.01.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 27.01.2013 Ответить на сообщение

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

  • Vadar
    Опубликовано: 27.01.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 27.01.2013 Ответить на сообщение

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

      • Николай
        Опубликовано: 29.01.2013 Ответить на сообщение

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

        • Денис Черников
          Опубликовано: 29.01.2013 Ответить на сообщение

          А то!

  • Константин
    Опубликовано: 30.01.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 30.01.2013 Ответить на сообщение

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

  • SERGEY
    Опубликовано: 03.02.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 03.02.2013 Ответить на сообщение

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

  • Владимир
    Опубликовано: 22.03.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 22.03.2013 Ответить на сообщение

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

  • Алекс
    Опубликовано: 15.08.2013 Ответить на сообщение

    В Опера при наведении ховер(т.е. засветление картинки) работает только в разделе «Сумки».
    В остальных в Опера разделах при наведении нет засветления и курсор не кликабельный.
    Было бы замечательно, если кто-нибудь выложил рабочую версию.

    • Денис Черников
      Опубликовано: 15.08.2013 Ответить на сообщение

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

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.