Advertisement
Html/Css/Jquery

[Eng] How To Make Slideshow with Nivo Slider

Now, we will share to you How to make slideshow with nivo slider. Before it, sory if we tell you with bad english. We make this website just focus to indonesian. But Now we want to share all tutorial in our blog can apply to global community. Not just to Indonesian, but all people who understand english.

Okay, why we share tutorial about it? when we search tutorial about how to make slide show with nivo slider, We don’t get it. We keep on to try and exploration about this knowledge. And we get it from many source. And now we share it.

The first step you must download nivo slider and jquery plugin. But if you don’t get it, we already provide it in download source.

Next the script how you can build it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How To Make Slide Show with Nivo Slider</title>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<link type="text/css" rel="stylesheet" href="css/slide.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
jQuery(window).load(function() {
	$('#slider').nivoSlider({
		effect:'fade', //Specify sets like: 'fold,fade,sliceDown'
		slices:20,
		animSpeed:900,
		pauseTime:4000,
		startSlide:0, //Set starting Slide (0 index)
		directionNav:false, //Next & Prev
		directionNavHide:false, //Only show on hover
		controlNav:true, //1,2,3...
        controlNavThumbs:false, //Use thumbnails for Control Nav
        controlNavThumbsFromRel:false, //Use image rel for thumbs
		keyboardNav:true, //Use left & right arrows
		pauseOnHover:true, //Stop animation while hovering
		manualAdvance:false, //Force manual transitions
		captionOpacity:0.8 //Universal caption opacity
	});
});

/*]]>*/
</script>
</head>
<body>
<center><h2>How To Make Slide Show with Nivo Slider</h2></center>
<div id="slider">
<img src="img/iceland.jpg" />
<img src="img/loch-nevis.jpg" />
<img src="img/snow.jpg"/>
</div>
</body>
</html>

CSS

Now, you must create the css file. We call it slide.css. The Script we get from nivo demo. Look at bellow.

#slider {
 position:relative;
 background: #fff url(images/loading.gif) no-repeat 50% 50%;
 width:960px;
 height: 300px !important;
 margin: auto;
 z-index: 888;
}
#slider .desc {
 margin: 0px 0 0 0px;
 padding:0;
 color:#fff !important;
}
.tit {
 font-size: 14px;
 color: #fff;
 margin-bottom: -10px;
 display: block;
}
/* 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:6;
 display:none;
}
/* The slices and boxes in the Slider */
.nivo-slice {
 display:block;
 position:absolute;
 z-index:5;
 height:100%;
}
.nivo-box {
 display:block;
 position:absolute;
 z-index:5;
}
.nivo-caption {
 position:absolute;
 left:28px;
 background:#343434;
 opacity:0.7; /* Overridden by captionOpacity setting */
 filter: alpha(opacity=70);
 width: 840px !important;
 z-index:89;
 bottom: 20px;
 padding: 10px 20px;
}
.nivo-caption p {
 padding:5px;
 margin:0;
 color: #000 !important;
}
.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:9;
 cursor:pointer;
}
.nivo-prevNav {
 left:0px;
}
.nivo-nextNav {
 right:0px;
}

/* Control nav styles (e.g. 1,2,3...) */
.nivo-controlNav {
 position: absolute;
 bottom: 0px;
 left: 45%;
 z-index: 888;
}
.nivo-controlNav a {
 position:relative;
 float:left;
 -webkit-border-radius: 30px;
 -moz-border-radius: 30px;
 -ms-border-radius: 30px;
 -o-border-radius: 30px;
 border-radius: 30px;
 display: block;
 text-decoration: none;
 border: 2px solid #fff;
 color: white;
 font-weight: bold;
 font-size: 0px;
 margin: 3px 5px;
 text-shadow: 0 1px 1px #000;
 text-align: center;
 height: 10px;
 width: 10px;
 top:-10px;
 -webkit-box-shadow: 0 1px 1px black;
 -moz-box-shadow: 0 1px 1px black;
 box-shadow: 0 1px 1px black;
 -webkit-transition: background 0.15s ease;
 -moz-transition: background 0.15s ease;
 -o-transition: background 0.15s ease;
 transition: background 0.15s ease;
 text-indent:-9999;
 text-indent:-9999px;
}
.nivo-controlNav a.active {
 position:relative;
 background: #fff;

}
#slider img {
 display: none !important;
}

If you have problem with that source code, you can make discussion in the Comment box.

Demo Download Source

Editorial Team

Editorial Team adalah mereka yang menulis artikel untuk blog PinDexain.

Related Stories

Leave a Reply

Your email address will not be published. Required fields are marked *