Страница 1 из 11
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Анимация и флеш(Flash) » Nivo Slider
Nivo Slider
VedmaK
/avatar/01/464426.png
1');return false;" rel="nofollow" href="javascript://" name="4732">
15.12.2012 в 21:58 Итак смотрим DEMO ничему не удивляемся потому что вроде бы ничего особого нет и читаем дальше потому что вы видите самый универсальный из придуманных до сих пор слайдеров, в котором можно изменить что угодно

Скачиваем последнюю версию. Если ссылка оказалась битая, то вышла новая версия и переходим на официальный сайт и скачиваем оттуда

Внутри архива уже все лежит, но продублирую все что там есть

В HEAD мы запихиваем скрипты:
Code

<!-- Обычно располагается в разделе <head> -->
<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"></script>
<script src="jquery.nivo.slider.pack.js"></script>


Сам слайдер распологается в BODY и его код
Code
<!-- Располагаются в разделе <body> -->
<div id="slider">
      <img src="images/slide1.jpg" alt="" />
      <a href="http://dev7studios.com">
       <img src="images/slide2.jpg" alt="" title="#htmlcaption" />
      </a>
      <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
      <img src="images/slide4.jpg" alt="" />
</div>


Однако если вы не хотите использовать различные заголовки дополнительный текст и т д, то вы можете упростить этот код до такого:
Code

<div id="slider-wrapper">
      <div id="slider">
          <img src="images/slide1.jpg" alt="" />
          <img src="images/slide2.jpg" alt="" />
          <img src="images/slide3.jpg" alt="" />
          <img src="images/slide4.jpg" alt="" />
      </div>
</div>


Далее смотрим прикрепленный архив папку /demo/images/
Там вы обнаружите файлы:

arrows.png (стрелки влево/вправо)
bullets.png (точечный индикатор)
slider.png (фоновая рамка)
background.png (фон, по желанию)
loading.gif (индикатор загрузки, по желанию)

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

Обратите внимание на CSS а конкретно на
#slider-wrapper
#slider
.nivo-controlNav
.nivo-directionNav

В них без проблем меняются размеры слайдера расположение в нем кнопок и т д
Обратите внимание отдельно настраивается размер изображений и всего слайдера в общем

Стандартно в слайдере не видно кнопки переключения слайдом пока на него не навели мышь
Это можно исправить
В файле demo.html найдите строки
Code
<script>
      $(window).load(function() {
         $('#slider').nivoSlider();
     });      


И замените на
Code

<script>
      $(window).load(function() {
          $('#slider').nivoSlider({directionNavHide:false});
      });      


Вот и все smile

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

Эксперементируйте все в ваших руках smile
exclusiv...
/avatar/01/4333-414916.png
2');return false;" rel="nofollow" href="javascript://" name="4741">
15.12.2012 в 23:55 VedmaK, благодарю за столь полезный материал но я всеравно поклонник параллакса biggrin yes
VedmaK
/avatar/01/464426.png
3');return false;" rel="nofollow" href="javascript://" name="4742">
15.12.2012 в 23:57 exclusive37, поэтому внизу я приписал дополнительные его функции biggrin
Форум CREWEBIK.ru » design studio for uCoz » ФОРУМ ВЕБ МАСТЕРОВ » Анимация и флеш(Flash) » Nivo Slider
Страница 1 из 11
Поиск: