1. Add following code in between <head></head>. Be sure all external css and javascript files are in correct file folders
<link href="themes/default/default.css" media="screen" rel="stylesheet" type="text/css">
<link href="nivo-slider.css" media="screen" rel="stylesheet" type="text/css">
<script src="scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.nivo.slider.js" type="text/javascript">
</script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
- Must have two nested divs with class and id accordingly.
- All images to be included in slideshow should have a src and alt property/value.
- To affect slider transition add data-transition property and any one of the following acceptable values: (sliceDown, sliceDownLeft, sliceUp, sliceUpLeft, sliceUpDown, sliceUpDownLeft, fold, fade, random, slideInRight, slideInLeft, boxRandom, boxRain, boxRainReverse, boxRainGrow, boxRainGrowReverse)
<div class="slider-wrapper theme-default"> <div class="nivoSlider" id="slider"> <img alt="Tokyou Subway" data-transition="fade" src="images/image_1.jpg" title="Tokyo, Japan" /> <img alt="Osaka Signs" data-transition="fade" src="images/image_2.jpg" title="Osaka, Japan" /> <img alt="Palm Tree" data-transition="fade" src="images/image_3.jpg" title="Lahaina, Hawaii" /></div></div>
**Optional: Modify default.css to make minor changes to Nivo Slider interface (ie remove navigation dots and/or previous and next arrows.
**To stop slider from auto play add $('#slider').data('nivoslider').stop(); to window.load function in <script>...
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
$('#slider').data('nivoslider').stop();
});
</script>
No comments:
Post a Comment