Слайдер для html сайта
Скрипт слайдер для сайта "Nivo Slider" позволит тебе получить невероятные эффекты при пролистывании изображений, за счет использования библиотеки jQuery.
Простой слайдер для сайта, который можно легко подключить к себе на страницу, блог или полноценный сайт, использует минимум ресурсов, постоянно совершенствуется, а также обладает высокой надежностью работы.
Почему именно Nivo Slider ообычно используют для престижных проектов? Он очень легок в установке, настройке и адаптации под различные движки с CMS. Всего пару строчек кода, и Ниво Слайдер начнет свою работу. Как подключить слайдер для сайта? Все очень просто. Приступим:
Для начала подключим CSS:
<link rel="stylesheet" href="/nivo-slider.css" type="text/css" />
Затем библиотеки jQuery и непосредственно скрипт самого Nivo Slider:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script>
<script src="/jquery.nivo.slider.pack.js" type="text/javascript"></script>
Какой должен быть код html, чтобы слайдер отображался? Все тоже просто:
<div id="slider" class="nivoSlider">
<img src="/images/slide1.jpg" alt="" />
<a target="_blank" href="https://link.inverser.pro/r2?l=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>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with <a href="#">a link</a>.
</div>
Для того, чтобы активировать слайдер на сайте, тебе необходимо прописать следующий код прямо на странице, где появляется слайдер:
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
Использование функций в файле :
$('#slider').nivoSlider({
effect: 'random', // Можно использовать значения: 'fold,fade,sliceDown'
slices: 15, // Для срезов анимации
boxCols: 8, // Для коробки анимации
boxRows: 4, // Для коробки анимации
animSpeed: 500, // Скорость прокрутки слайда
pauseTime: 3000, // Сколько отображаться слайду
startSlide: 0, // Установить значение начала показа слайдов (0 по умолчанию)
directionNav: true, // Навигация < >
controlNav: true, // 1,2,3... навигация
controlNavThumbs: false, // Использовать миниатюры для управления
pauseOnHover: true, // Остановить во время активации мышью
manualAdvance: false, // Только ручные переходы
prevText: 'Prev', // Имя кнопки Пердыдущий
nextText: 'Next', // Имя кнопки Следующий
randomStart: false, // Начинать со случайного слайда
beforeChange: function(){}, // Действие перед переходом между слайдами
afterChange: function(){}, // Действие после перехода между слайдами
slideshowEnd: function(){}, // Действие после всех показов слайдов
lastSlide: function(){}, // Действие во время отображения последнего слайда
afterLoad: function(){} // Действие после загрузки слайда
});
Использование миниатюр:
<div id="slider">
<img src="/images/up.jpg" alt="" data-thumb="images/up_thumb.jpg" />
<img src="/images/monstersinc.jpg" alt="" data-thumb="images/monstersinc_thumb.jpg" />
<img src="/images/nemo.jpg" alt="" data-thumb="images/nemo_thumb.jpg" />
<img src="/images/walle.jpg" alt="" data-thumb="images/walle_thumb.jpg" />
</div>
