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.