25.01.15 
7566 
"Самый удивительный в мире плагин слайдера картинок на 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
Нет комментариев к этой статье.