Responsive jquery Slideshow Plug-in with multiple transition animations

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

effectYou 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	<linkrel="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	<imgsrc="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