Nivo Slider - один из самых известных и лучших бесплатных слайдеров картинок. Он продолжает совершенствоваться с каждым днем, набирая все большее число поклонников. Подключить его очень просто. Он поддерживает скины/темы, которые очень просто менять. В этой заметке я попробую показать как подключить слайдер и как менять его параметры.
И так, как же правильно его использовать?
На страничке должны быть подключены:
- jQuery
- Nivo Slider script
- Nivo Slider CSS
Обычно код в заголовке <head> должно быть прописано:
<link href="nivo-slider.css" rel="stylesheet" media="screen" type="text/css" /> <link href="nivo-slider/themes/default/default.css" rel="stylesheet" media="screen" type="text/css" /><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script><script type="text/javascript" src="jquery.nivo.slider.pack.js"></script>
И где-то в самом теле документа <body> наши картинки для слайдера:
</pre> <div class="slider-wrapper theme-default"> <div class="nivoSlider" id="slider"><img alt="" src="images/img1.jpg" /> <a href="http://dev7studios.com"><img title="#htmlcaption" alt="" src="images/img2.jpg" /></a> <img title="This is an example of a caption" alt="" src="images/img3.jpg" /> <img alt="" src="images/img4.jpg" /></div> </div> <div class="nivo-html-caption" id="htmlcaption"><strong>Это</strong> пример <em>HTML</em> заголовка <a href="#">с ссылкой</a>.</div> <pre>
Чтобы добавить заголов для слайда, вам нужно просто заполнить тег title у нужной картинки. Для отображения подписи, обязательно после слайдов должен быть еще один DIV с классом nivo-html-caption.
Для запуска скрипта, нужно запустить этот скрипт с минимальными параметрами:
<script type="text/javascript">// <![CDATA[
$(window).load(function() {
$('#slider').nivoSlider();
});
// ]]></script>
Ниже перечислим все возможные параметры для более тонкой настройки:
<script type="text/javascript">// <![CDATA[
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'random', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 3000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
controlNav: true, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
prevText: 'Prev', // Prev directionNav text
nextText: 'Next', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
});
// ]]></script>
Перечислим возможные эффекты переходов:
- sliceDown
- sliceDownLeft
- sliceUp
- sliceUpLeft
- sliceUpDown
- sliceUpDownLeft
- fold
- fade
- random
- slideInRight
- slideInLeft
- boxRandom
- boxRain
- boxRainReverse
- boxRainGrow
- boxRainGrowReverse
С версии 2.7 можно указывать для отдельного слайда свой эффект перехода добавив тег data-transition:
<img src="images/slide1.jpg" alt="" data-transition="sliceDown" />
Также для Nivo Slider-а разработано несколько тем. Помимо тем по умолчанию есть еще темы сделанные разными людьми. Здесь я например нашел еще несколько тем. Если у вас есть красивые темы или вы знаете где их искать, пожалуйста поделитесь с народом. И если кто-то может предложить более лучший слайдер, так же предлагаю об этом рассказать.
Покупай дешевые, со скидкой 5 евро! видеокарты, компьютерное и другое оборудование
А как джиквери подключить?
Я предпочитаю использовать свежую версию с сайта google. Для этого где-нибудь между тегами <head></head> пропишите:
<script type=”text/javascript” src="“> </script>
Если у вас локально лежит файл этой библиотеки, то поменяйте ссылку на гугл на локальный путь к ней. Есть также вариант
подключения с оффициального сайта или сайта microsoft.
Спасибо большое, очень полезная статья
Один вопрос. При загрузке страницы, слайдер не воспроизводится, а если нажать любую кнопку-сразу работать начинает.
а как указать ширину слайда? по умолчанию, в подгружаемых стилях он ставит 1310px?