- Web templates
- E-commerce Templates
- CMS & Blog Templates
- Facebook Templates
- Website Builders
FAQs
General Tutorials
MonsterONE Subscrioption
jQuery ‘NivoSlider’
March 18, 2011
A slider with a variety of unique transition effects. For full specifications visit the official website http://nivo.dev7studios.com
Initialization script we place in the section of the document
You can also define some additional parameters
JavaScript
We should include jQuery framework and jquery.nivo.slider.pack.js by pointing src attribute in the script tag to those .js files.1 2 | <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> |
1 2 3 | $(window).load(function() { $('#slider').nivoSlider(); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | effect:'random', //Specify sets like: 'fold,fade,sliceDown'slices:15,animSpeed:500,pauseTime:3000,startSlide:0, //Set starting Slide (0 index)directionNav:true, //Next & PrevdirectionNavHide:true, //Only show on hovercontrolNav:true, //1,2,3...controlNavThumbs:false, //Use thumbnails for Control NavcontrolNavThumbsFromRel:false, //Use image rel for thumbscontrolNavThumbsSearch: '.jpg', //Replace this with...controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image srckeyboardNav:true, //Use left & right arrowspauseOnHover:true, //Stop animation while hoveringmanualAdvance:false, //Force manual transitionscaptionOpacity:0.8, //Universal caption opacitybeforeChange: function(){},afterChange: function(){},slideshowEnd: function(){} //Triggers after all slides have been shown |
HTML
Below you can see general HTML script representation. To add a caption to an image you simply need to add a title attribute to the image. To add an HTML Caption simply set the title attribute to the ID of a element that contains your caption (prefixed with a hash). Note that the HTML element that contains your caption must have the CSS class nivo-html-caption applied and must be outside of the slider div.1 2 3 4 5 6 7 8 9 10 | <div id="slider"> <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="" /></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> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 | /* 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;} |
