Responsiveslides.js The most lightweight slide plug-in

Source: Internet
Author: User

Summary: Responsiveslides.js is a lightweight, responsive jquery slide plug-in that shows images in the same container it supports almost all browsers including IE6, and supports the maximum width attribute in IE6, but is not natively supported in other browsers.

Responsiveslides.js is a lightweight, responsive jquery slide plug-in that shows pictures in the same container (tiny responsive slideshow jquery plugin). It supports almost all browsers, including IE6, and supports the maximum width attribute in IE6, but is not natively supported in other browsers. All you need to do is link jquery and crop the image to the same size.

You can click on the link or picture to see the effect

Maximum features compared to other slide show plugins:

1. Smaller file size (only 792 bytes by reduction and GZ compression)

2. Simple function (R.js only supports two modes: The picture automatically fades in and uses the page number label to manually switch the picture. )

Usage:

First step: Add a link

    1. <script src="Http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></ Script>
    2. <script src="Responsiveslides.min.js"></script>

Step Two: Add tags

  1. <div id="slides">
  2. <img src="1.jpg" alt= "" />
  3. <img src="2.jpg" alt= "" />
  4. <img src="3.jpg" alt= "" />
  5. </div>

Step three: Link up the slide (Hook up the slideshow)

    1. <script>
    2. $ (function () {
    3. $ ("#slides"). Responsiveslides ();
    4. });
    5. </Script>

Fourth Step: Customizing settings

    1. $ ("#slides"). Responsiveslides ({
    2. speed:4000,//integer: Slide transition interval, Unit is MS
    3. fade:1000,//integer: Fade in time, in milliseconds
    4. Auto:true,//Boolean type: Whether to manually switch pictures ("Auto:false" automatically adds page labels)
    5. maxwidth:800,//integer: The maximum width of the slide and picture area, in pixels px
    6. Namespace: ' rs '//string: Modify the default namespace for slide classes and IDs (for example, if you want to add multiple slides to a page)
    7. });

If you don't need the page number property, it's done!

Example of modifying the property "Auto:false" (Display page number label) Effect:

You can click on the link or picture to see the effect

The following browsers have passed the test:

Internet Explorer 6,7,8,9

Firefox 2,3,6,8

Safari 5

Chrome 15

Opera 11.5

iOS Safari

Opera Mobile 10.1

Opera Mini for IOS

IE7 Mobile

Firefox Mobile

Android Browser

Kindle Browser

(Copy, record every day!!!!) )

Responsiveslides.js The most lightweight slide plug-in

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.