js Nivo Slider картинок на JQuery 

Дата публикации  Дата изменения25.01.15  КомментарииНет   Просмотры3298

"Самый удивительный в мире плагин слайдера картинок на JQuery" – так его представляет автор. Качественный и простой в установке и использовании. В исходник включены версии на jquery_1_4_2 и jquery_1_9.

Характеристики:

  • 16 уникальных эффектов перехода
  • Чистая и валидная разметка
  • Множество параметров для настройки
  • Управление перелистыванием через стрелки направления, кнопки и клавиатурой
  • Весит всего 12kb (v.3_2 на jquery_1_9) и 7kb (версия на jquery_1_4_2)
  • Поддерживает ссылки на изображениях
  • HTML заголовки
  • Три темы в комплекте
  • Бесплатное использование по лицензии MIT

Пример использования (версия на jquery_1_4_2):

Между <head></head>:

<link rel="stylesheet" href="styles/nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.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="scripts/cufon-yui.js" type="text/javascript"></script>
<script src="scripts/Museo_Slab.font.js" type="text/javascript"></script>
<script src="scripts/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h2', { fontFamily:'Museo Slab' });// использование шрифта через скрипт Museo…js
Cufon.replace('h3', { fontFamily:'Museo Slab' });
//
$(window).load(function() {
	$('#slider1').nivoSlider({ pauseTime:5000, pauseOnHover:false });// слайдер первый – 5 сек. показ
	setTimeout(function(){
 $('#slider2').nivoSlider({ pauseTime:5000, pauseOnHover:false });
	}, 1000); // слайдер второй – 5 сек. показ, 1 сек. задержка
	setTimeout(function(){
 $('#slider3').nivoSlider({
 pauseTime:5000,
 pauseOnHover:false, // остановка картинки при наведении мыши (да или нет – true, false)
 controlNavThumbs:true // показ навигационных миниатюр (true или false)
 });
	}, 2000);// Слайдер третий – 5 сек. показ, 2 сек. задержка
	setTimeout(function(){
 $('#slider4').nivoSlider({
 effect:'random',
 animSpeed:1500,
 pauseTime:5000,
 startSlide:2,
 directionNav:false, // навигация по направлению (если мышка справа или слева)
 controlNav:true, // навигация ввиде стрелочек на картинке
 keyboardNav:false, // навигация с помощью клавиатуры
 pauseOnHover:false // остановка по наведении указателя
 });
	}, 3000); // Слайдер четвертый – скорость анимации 1.5 сек., 5 сек. показ, начать со второго слайда, задержка 3 сек.
});
</script>

Между <body></body>:


<div id="debug"></div>
<div id="wrapper">
<!---//-->
	<div id="header">
 <h1><a href="http://nivo.dev7studios.com">Nivo Slider Demos</a></h1>
<!---//-->
	</div>
<!---//-->
	<div id="content">
<!--- Слайдер первый//-->
 <h2>C дефолтными установками</h2>
 <div id="slider1" class="nivoSlider">
 <img src="images/up.jpg" alt="" />
 <img src="images/monstersinc.jpg" alt="" />
 <img src="images/nemo.jpg" alt="" />
 <img src="images/walle.jpg" alt="" /> </div>
<!---Слайдер второй//-->
 <h2>С заголовками иссылками</h2>
 <div id="slider2" class="nivoSlider">
 <a href="#link1"><img src="images/up.jpg" alt="" title="Caption 1" /></a>
 <a href="#link2"><img src="images/monstersinc.jpg" alt="" title="This is an example of a caption" /></a>
 <a href="#link3"><img src="images/nemo.jpg" alt="" title="Caption 3" /></a>
 <a href="#link4"><img src="images/walle.jpg" alt="" title="This is an example of a caption" /></a> </div>
<!---Слайдер третий//-->
 <h2>С иконками (миниатюрами)</h2>
 <div id="slider3" class="nivoSlider">
 <img src="images/up.jpg" alt="" />
 <img src="images/monstersinc.jpg" alt="" />
 <img src="images/nemo.jpg" alt="" />
 <img src="images/walle.jpg" alt="" /> </div>
<!---//-->
<!--- Слайдер четвертый//-->
 <h2>Случайные параметры всех видов</h2>
 <div id="slider4" class="nivoSlider">
 <img src="images/up.jpg" alt="" />
 <img src="images/monstersinc.jpg" alt="" />
 <img src="images/nemo.jpg" alt="" />
 <img src="images/walle.jpg" alt="" /> </div>
	</div>

Пример использования (версия 3_2 на jquery_1_9):

Между <head></head>:

<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" />

Между <body></body>:

    <div id="wrapper">
        <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>
<!---//-->
        <div class="slider-wrapper theme-default">
            <div id="slider" class="nivoSlider">
                <img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
                <a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="Пример с заголовком" /></a>
                <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">
                <strong>This</strong> is an example of a <em>HTML</em> заголовок со <a href="#">a ссылкой</a>. 
            </div>
        </div>
    </div>
<!--- Подключение jquery и слайдера//-->
    <script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
    <script type="text/javascript" src="../jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>

Источник

 Смотреть пример – версия на jquery_1_4_2

 Смотреть пример – версия на jquery_1_9

  Размер:  875,81kB | Изменен: 20.01.13 | Загрузок: 180
Бесплатные курсы

Категории

Теги: , ,

Оцените материал:

Рейтинг: 5.0/10 (1)


КомментарииКомментарии:

Нет комментариев к этой статье.


Поля, обозначенные как *, обязательны.





Максимальная длина сообщения 900 символов. Осталось   символов

 

Старые →← Новые