→ При разработке сайта лендинг в подарок! ЖМИ! ←
Мар
18

Nivo Slider — ещё один Jquery слайдер, который я постоянно использую

Итак, продолжаю обзоры плагинов, которые я часто использую в работе. Сегодня на очереди Nivo Slider — отличный, а главное, простой слайдер картинок на JQuery. В чем же он хорош?

Nivo Slider - ещё один Jquery слайдер, который я постоянно использую

  • Он нетребователен к ресурсам, мало весит и легко инсталлируется. Для него даже не нужен php хостинг. Если сайт статичный, то вполне хватит хостинга без поддержки php.
  • Он очень легко подключается на страницу (см. ниже)
  • При всем этом у него большое количество настроек, которые могут изменить вывод картинок до неузнаваемости!

Теперь самое время рассказать о подключении плагинчика Nivo Slider на страницу. Итак, последовательность действий проста до безобразия:

  1. Качаем плагин.
  2. Подключаем сам плагин и необходимые стили оформления.
    1
    2
    3
    <link rel="stylesheet" href="nivo-slider.css" type="text/css" media="screen" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
    <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
  3. Делаем структуру HTML для вывода плагина на страницу.
    1
    2
    3
    4
    5
    6
    <div id="slider">
        <img src="images/slide1.jpg" alt="" />
        <a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" /></a>
        <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
        <img src="images/slide4.jpg" alt="" />
    </div>
  4. Вызываем плагин.
    1
    2
    3
    4
    5
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
  5. Указываем параметры по необходимости.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    $(window).load(function() {
        $('#slider').nivoSlider({
            effect:'random', //Может принимать значения: 'fold,fade,sliceDown'
    'fold,fade,sliceDow//Количество слайдов
     //Количество//Скорость смены кадров
    animSpeed:500, //Ско//Время отображения одного слайда
            pauseTime:3000//С какого слайда начинать показ (0 по умолчанию)
     слайда
            start//Показывать картинки Вперед Назад или нет
    чинать показ (0 п//Показывать только при наведении
    ctionNav:true, //Пока//1,2,3...
    картинки Вперед //Использовать превьюшки в навигации
    ctionNavHide:true, //Показыват//Использовать атрибут rel для превьюшек

            controlNav:true, //1,2,3...
       //Измените это...
    mbs:false, //Использовать прев//...для превьюшек
    игации
            contr//Использовать левые-правые стрелки на клавиатуре для навигации
    т rel для превью//Останавливать навигацию при наведении мыши
    , //Измените это..//Использовать ручной режим
    place: '_thumb.jpg', //...д//Степень прозрачности

            keyboardNav:true, //Использовать левые-правые стрелки на клав//Что показывать, когда показаны все слайды
       pauseOnH

Вот, в принципе, и всё. Пользуйтесь на здоровье, а я в скором времени буду ещё делать обзоры тех «фишек», которые использую в своей работе.

Прокомментировать

Рубрики

Наши услуги

В прямом эфире