Responsive jquery Slideshow Plug-in with multiple transition animations

Source: Internet
Author: User

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

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.