Ref : http://docs.dev7studios.com/category/9-nivo-slider
Install files
Installing the Nivo Slider jQuery plugin is actually pretty simple. You just need to add the Following code to the
<head> of your web page:
include css 和 jquery 和 jquery.nivo.slider.pack.js
<link rel="stylesheet" href="nivo-slider.css" type="text/css" /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> <script src="jquery.nivo.slider.pack.js" type="text/javascript"></script>
Add markup
The HTML markup for the Nivo Slider is also very simple. You simply need to create a div with an id (
#slider in this case) and add some images to it:<div id="slider" class="nivoSlider">
<img src="images/slide1.jpg" alt="" />
<a href="http://dev7studios.com"><img src="images/slide2.jpg" alt="" title="#htmlcaption" /></a>
<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>
It is good practice to add the
nivoSlider class to the #slider div. We've also shown in this example how to set up HTML captions (the title of the img should be id of the div containing the HTML caption).Hook up the slider
Finally you need to hook up the slider by adding the following code after the three links we included in the
<head>:<script type="text/javascript">
$(window).on('load', function() {
$('#slider').nivoSlider();
});
</script>
Note that the Nivo Slider uses the
$(window).on('load', function(){}) function and not $(document).ready() that most other jQuery plugins use.============================================================
來看sample code
demo.html
全部放在 ../themes/ 下面
還有一個 ../nivo-slider.css
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<html lang="en">
<head>
<title>Nivo Slider Demo</title>
<link rel="stylesheet" href="../themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="../nivo-slider.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper">
<a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7studios</a>
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<a href="http://dev7studios.com"><img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" /></a>
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
</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>
</div>
</div>
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="../jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</body>
</html>
在這裏面有 nivo slider 的設定
../jquery.nivo.slider.js
//Default settings
$.fn.nivoSlider.defaults = {
effect: 'random',
slices: 15,
boxCols: 8,
boxRows: 4,
animSpeed: 500,
pauseTime: 3000,
startSlide: 0,
directionNav: true,
controlNav: true,
controlNavThumbs: true,
pauseOnHover: true,
manualAdvance: false,
prevText: 'Prev',
nextText: 'Next',
randomStart: false,
beforeChange: function(){},
afterChange: function(){},
slideshowEnd: function(){},
lastSlide: function(){},
afterLoad: function(){}
};
for example :
Enabling Thumbnails with the Nivo Slider
To use thumbnails with your slider you need to make sure
controlNavThumbs is set to true. Then the slider will look for the URL of the thumbnail in the data-thumbattribute of the image. If no URL is provided, no thumbnail will be shown. For example:
底下跑出thumbs
for example
Custom Transitions per Slide
You can override a slides transition using the
data-transition attribute. For example:<img src="images/slide1.jpg" alt="" data-transition="slideInLeft" />
The above code will force this slide to use the
slideInLeft transition every time it appears. It overrides all other effect settings.
沒有留言:
張貼留言