Как установить Nivo Slider к себе на сайт

nivosliderВ этом уроке мы расскажем вам, как просто и быстро установить слайдер изображений Nivo Slider к себе на сайт.

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

Скачать архив можно по ссылке: nivoslider.rar.

Теперь, когда у нас есть все нужные файлы можно приступить к установке.

Шаг 1. Подключаем стили

Первым делом нужно подключить файлы стилей. Для этого пишем код:



Шаг 2. Подключаем скрипты

Теперь нужно подключить скрипты и добавить пару строк кода, для того, чтобы слайдер начал работать. Для этого пишем:




Шаг 3. HTML-разметка

Далее нужно сделать HTML-разметку. Разметка будет простой:

<div class="theme-default">
  <div id="slider" class="nivoSlider">
   <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
   <img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="Пример заголовка изображения" />
   <img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
   <img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
  </div>

 <div id="htmlcaption" class="nivo-html-caption">
  Пример заголовка <a href="#">с ссылкой</a>.
 </div>
</div>

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

Шаг 4. Финальный результат

Если вы все сделали правильно, то на данном шаге слайдер должен начать работать.

Настройки слайдера

При желании вы можете изменить настройки слайдера (скорость анимации, эффект перехода и т.п). Для этого откройте файл jquery.nivo.slider.js и в самом конце странице найдите строку, которая прокомментирована так: //Default settings.

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

На этом урок окончен. Спасибо за внимание!

Автор урока: редакция REDSTAR
Урок для Вас подготовлен командой сайта red-star.pro.