Nivo-slider is a very powerful, responsive jquery slideshow plugin. The slide plug-in has 16 different animation transitions built into it. It provides a rich range of parameters to control the playback of the slideshow. It is simple to use and can be compatible with IE8 browsers.
Online preview Source Download
How to use
Using Nivo-slider slides requires the introduction of Nivo-slider.css,jquery (1.7+) and jquery.nivo.slider.js files.
123 |
<
link rel
=
"stylesheet" href
=
"css/nivo-slider.css" type
=
"text/css" />
<
script src
=
js
/jquery.min.js"
type
=
"text/javascript"
></
script
>
<
script src
=
"js/jquery.nivo.slider.js" type
=
"text/javascript"
></
script
>
|
HTML Structure
The HTML structure of the responsive slide is very simple, using a #slider
band <div>
as a container, where you can put the picture you need.
123456789 |
<
div id
=
"slider" class
=
"nivoSlider"
>
<
img src
=
"images/slide1.jpg" alt
=
"" />
<
a href
=
"#"
><
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 best to add class on the parcel container nivoSlider
. The above code also shows how to add a caption effect (such as a hyperlink) that can have HTML tags to the icon. Their association is the container in which the picture's title
properties point to as a picture label div#htmlcaption
.
calling plug-ins
After the page DOM element has finished loading, you can initialize the slide plug-in by using the following method.
12345 |
< script type Code class= "HTML plain" >= "Text/javascript" > &NBSP;&NBSP; $ (window). Load (function () { &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP; $ (' #slider '). Nivoslider (); &NBSP;&NBSP; </ script > |
Note The Nivo slider slide plug-in uses $(window).load()
functions instead $(document).ready()
of functions, which differs from the use of other jquery plugins.
Configuration Parameters
The following are the available configuration parameters for this responsive slide.
Parameters |
Default value |
Describe |
Effect |
' Random ' |
The transition animation effect of the slide can be specified similar to: ' Fold,fade,slicedown ' |
Slices |
15 |
Slice configuration of animation transitions |
Boxcols |
8 |
Configuration of box animation transitions |
Boxrows |
4 |
Configuration of box animation transitions |
Animspeed |
500 |
Time of slide Transition animation |
Pausetime |
3000 |
Each slide slide the time displayed |
Startslide |
0 |
Slide sequence number of the start of the slide |
Directionnav |
True |
Whether to show Next/prev navigation |
Controlnav |
True |
Whether to show dot navigation |
Controlnavthumbs |
False |
Use picture thumbnails instead of dot navigation buttons |
Pauseonhover |
True |
Whether to pause playback when the mouse slides over the slide |
Manualadvance |
False |
Force a transition animation manually |
Prevtext |
' Prev ' |
Prev text on a navigation button |
Nexttext |
' Next ' |
The text on the next navigation button |
Randomstart |
False |
Whether to start playing randomly |
BeforeChange |
function () {} |
A slide triggers before the transition animation starts |
AfterChange |
function () {} |
Trigger after a slide end transition animation |
SlideShowEnd |
function () {} |
All slides are displayed and then triggered |
Lastslide |
function () {} |
The last slide slide displayed after the trigger |
Afterload |
function () {} |
Trigger after slide is loaded |
effect
You can set the animation transition effect to the following:
sliceDown
sliceDownLeft
sliceUp
sliceUpLeft
sliceUpDown
sliceUpDownLeft
fold
fade
random
slideInRight
slideInLeft
boxRandom
boxRain
boxRainReverse
boxRainGrow
boxRainGrowReverse
Little Tricksworking with Slide themes
To use the various theme styles provided by the Nivo slider slide plug-in, you can do the following. First introduce the theme CSS file in the page.
1 |
< link rel = "stylesheet" href = "nivo-slider/themes/default/default.css" type = "text/css" /> |
Then you need to adjust some of your HTML tags in the following format.
123456 |
<
div class
=
"slider-wrapper theme-default"
>
<
div class
=
"ribbon"
></
div
>
<
div id
=
"slider" class
=
"nivoSlider"
>
...
</
div
>
</
div
>
|
Note that you can introduce multiple theme CSS style files in the page, but they will not be displayed until you set them on the slide wrap container theme-{theme name}
, and the theme will not be enabled.
Navigating with thumbnails
To use thumbnail navigation, you must make sure that controlNavThumbs
the parameter is set to true
. When this parameter is enabled, the plug-in examines the properties of the picture data-thumb
, using the image URL specified in the property as the thumbnail image.
123456 |
<
div id
=
"slider"
>
<
img src
=
"images/1.jpg" alt
=
"" data-thumb
=
"images/1_thumb.jpg" />
<
img src
=
"images/2.jpg" alt
=
"" data-thumb
=
"images/2_thumb.jpg" />
<
img src
=
"images/3.jpg" alt
=
"" data-thumb
=
"images/3_thumb.jpg" />
<
img src
=
"images/4.jpg" alt
=
"" data-thumb
=
"images/4_thumb.jpg" />
</
div
>
|
Customize animation transitions for each slide
You can use data-transition
properties to specify a transition animation effect for each slide of a slide, for example:
1 |
< img src = "images/slide1.jpg" alt = "" data-transition = "slideInLeft" /> |
The above code forces the slide to use the transition animation each time it appears slideInLeft
.
Via:http://www.w2bc.com/article/the-most-awesome-jquery-image-slider
Responsive jquery Slideshow Plug-in with multiple transition animations