Nivo Slider Slide plugin based on jquery

Source: Internet
Author: User
Tags prev

Main Features:

The world's best jquery slideshow Plugin

16 kinds of effects of slide change

Simple and flexible to configure

Small in size and consistent with semantics

jquery plug-ins are free (but WordPress: 20 USD)

Here I say a little bit, jquery plug-ins are everywhere, we need to choose the purpose of a plug-in, the site has its own independent site, the site is very formal, others do not say, use the rest assured. And there is a technical support team, but only to support paid users. Slide effect and efficiency are good, comparable to flash slide. For example, this Flash slide show.

JavaScript code

Class Library References:

The code is as follows Copy Code

<script type= "Text/javascript" src= "Scripts/jquery-1.6.4.min.js" ></script>
<script type= "Text/javascript" src= ". /jquery.nivo.slider.pack.js "></script>

Calling code:

The code is as follows Copy Code

$ (window). Load (function () {
$ (' #slider '). Nivoslider ();
});

You can customize the following options:

Effect: Set the slide change effect, you can use ' random ', or specify effects such as, ' Fold,fade,slicedown '

Slices:slice Animation effect Parameters

Boxcols:box Animation effect Parameters

Boxrows:box Animation effect Parameters

Animspeed: Animation Change speed

Pausetime: Each slide time

Startslide: Starting Slide

Directionnav: Show "prev" and "Next" navigation

Directionnavhide: Whether to hover display navigation

Controlnav: Whether to show navigation control

Controlnavthumbs: Navigate whether to use thumbnails

Controlnavthumbsfromrel: Do you want the picture to use rel

Controlnavthumbssearch: navigation thumbnail suffix

Controlnavthumbsreplace: Navigation thumbnail replacement

Keyboardnav: whether keyboard navigation

Pauseonhover: Whether suspension stops

Manualadvance: Whether to manually change the slide

Captionopacity: Title Transparency

Prevtext: Previous text set

Nexttext: Next Text set

Randomstart: Whether to start randomly

BeforeChange: function, calling before a slide change

AfterChange: function, calling after a slide change

SlideShowEnd: function, complete call in slide change

Lastslide: function, complete call at last slide change

Afterload: function, slider after load call

code example:

The code is as follows Copy Code
<script type= "Text/javascript" >
$ (window). Load (function () {
$ (' #slider '). Nivoslider ({
Effect: ' random ',//Specify sets like: ' Fold,fade,slicedown '
SLICES:15,//for slice animations
Boxcols:8,//For box animations
Boxrows:4,//For box animations
animspeed:500,//Slide transition speed
pausetime:3000,//How long each slide'll show
startslide:0,//Set starting Slide (0 index)
Directionnav:true,//Next & Prev Navigation
Directionnavhide:true,//Only show on hover
Controlnav:true,//1,2,3 ... Navigation
Controlnavthumbs:false,//Use thumbnails for control Nav
Controlnavthumbsfromrel:false,//Use image rel for thumbs
Controlnavthumbssearch: '. jpg ',//Replace this with ...
Controlnavthumbsreplace: ' _thumb.jpg ',//... this in thumb Image src
Keyboardnav:true,//Use Left & Right arrows
Pauseonhover:true,//Stop animation while hovering
Manualadvance:false,//Force manual transitions
captionopacity:0.8,//Universal caption Opacity
Prevtext: ' Prev ',//Prev Directionnav text
Nexttext: ' Next ',//Next Directionnav text
Randomstart:false,//Start on a random slide
Beforechange:function () {},//triggers before a slide transition
Afterchange:function () {},//triggers after a slide transition
Slideshowend:function () {},//Triggers after all slides have been shown
Lastslide:function () {},//triggers when last slide is shown
Afterload:function () {}//triggers when slider has loaded
});
});
</script>


HTML code

The code is as follows Copy Code

<div class= "Slider-wrapper theme-default" >
<div class= "Ribbon" ></div>
<div id= "Slider" class= "Nivoslider" >

<a href= "http://www.111cn.net" ><" /a>

</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>


How to customize the change effect for each slide:

The code is as follows Copy Code

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.