jQuery ‘NivoSlider’

• Демо-просмотр
• Загрузить

Слайдер с различными уникальными эффектами перехода. Для более детальной информации посетите официальный сайт http://nivo.dev7studios.com

 

JavaScript

Мы должны подключить JQuery framework и jquery.nivo.slider.pack.js, указывая SRC атрибут в теге следующих .js файлов:

<script type="text/javascript" src="js/jquery-1.4.4.min.js" ></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>

Скрипт инициализации необходимо разместить в разделе

$(window).load(function() {
         $('#slider').nivoSlider();     
});

Вы также можете задать дополнительные параметры:

        effect:'random', //Specify sets like: 'fold,fade,sliceDown'
        slices:15,
        animSpeed:500,
        pauseTime:3000,
        startSlide:0, //Set starting Slide (0 index)
        directionNav:true, //Next & Prev
        directionNavHide:true, //Only show on hover
        controlNav:true, //1,2,3...
        controlNavThumbs:false, //Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, //Use image rel for thumbs
        controlNavThumbsSearch: '.jpg', //Replace this with...
        controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
        keyboardNav:true, //Use left & right arrows
        pauseOnHover:true, //Stop animation while hovering
        manualAdvance:false, //Force manual transitions
        captionOpacity:0.8, //Universal caption opacity
        beforeChange: function(){},
        afterChange: function(){},
        slideshowEnd: function(){} //Triggers after all slides have been shown

 

HTML

Ниже представлен простой HTML-скрипт. Чтобы добавить подпись к изображению, необходимо добавить заголовок атрибута к изображению. Чтобы добавить HTML-заголовок, нужно указать название атрибута для ID элемента, который содержит заголовок (с решеткой в префиксе). Обратите внимание, что HTML-элемент, который содержит подпись, должен иметь присвоенный CSS-класс nivo-html-caption и должен быть за пределами тега slider div.

    <img src="images/slide1.jpg" alt="" />
    <a href="#"><img src="images/slide2.jpg" alt="" title="#htmlcaption" />
    <img src="images/slide3.jpg" alt="" title="This is an example of a caption" />
    <img src="images/slide4.jpg" alt="" />



    Это пример HTML-заголовока  со ссылкой.

 

CSS

/* The Nivo Slider styles */
.nivoSlider {
	position:relative;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
}
/* If an image is wrapped in a link */
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:60;
	display:none;
}
/* The slices in the Slider */
.nivo-slice {
	display:block;
	position:absolute;
	z-index:50;
	height:100%;
}
/* Caption styles */
.nivo-caption {
	position:absolute;
	left:0px;
	bottom:0px;
	background:#000;
	color:#fff;
	opacity:0.8; /* Overridden by captionOpacity setting */
	width:100%;
	z-index:89;
}
.nivo-caption p {
	padding:5px;
	margin:0;
}
.nivo-caption a {
	display:inline !important;
}
.nivo-html-caption {
    display:none;
}
/* Direction nav styles (e.g. Next & Prev) */
.nivo-directionNav a {
	position:absolute;
	top:45%;
	z-index:99;
	cursor:pointer;
}
.nivo-prevNav {
	left:0px;
}
.nivo-nextNav {
	right:0px;
}
/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav a {
	position:relative;
	z-index:99;
	cursor:pointer;
}
.nivo-controlNav a.active {
	font-weight:bold;
}