Описание тега responsive-slides

ResponsiveSlides.js is a tiny jQuery plugin that creates a responsive slider using list items inside <ul>. It works with wide range of browsers including all IE versions from IE6 and up.

It also adds css max-width support for IE6 and other browsers that don't natively support it. Only dependency is jQuery (1.6 and up supported) and that all the images are the same size.

Features

• Fully responsive
• 1kb minified and gzipped
• CSS3 transitions with JavaScript fallback
• Simple markup using unordered list
• Settings for transition and timeout durations
• Multiple slideshows supported
• Automatic and manual fade
• Works in all major desktop and mobile browsers
• Captions and other html-elements supported inside slides
• Separate pagination and next/prev controls
• Possibility to choose where the controls append to
• Possibility to randomize the order of the slides
• Possibility to use custom markup for pagination
• Can be paused while hovering slideshow and/or controls
• Images can be wrapped inside links
• Optional 'before' and 'after' callbacks

Usage

1. Link files

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="responsiveslides.min.js"></script>

2. Add Markup

<ul class="rslides">
  <li><img src="1.jpg" alt=""></li>
  <li><img src="2.jpg" alt=""></li>
  <li><img src="3.jpg" alt=""></li>
</ul>

3. Add CSS

.rslides {
    position: relative;
    list-style: none;
    overflow: hidden;
    width: 100%;
    padding: 0;
    margin: 0;
}
.rslides li {
    -webkit-backface-visibility: hidden;
    position: absolute;
    display: none;
    width: 100%;
    left: 0;
    top: 0;
}
.rslides li:first-child {
    position: relative;
    display: block;
    float: left;
}
.rslides img {
    display: block;
    height: auto;
    float: left;
    width: 100%;
    border: 0;
}

4. Hook up the slideshow

<script>
  $(function() {
    $(".rslides").responsiveSlides();
  });
</script>

5. Options you can customize

$(".rslides").responsiveSlides({
    auto: true,             // Boolean: Animate automatically, true or false
    speed: 500,             // Integer: Speed of the transition, in milliseconds
    timeout: 4000,          // Integer: Time between slide transitions, in milliseconds
    pager: false,           // Boolean: Show pager, true or false
    nav: false,             // Boolean: Show navigation, true or false
    random: false,          // Boolean: Randomize the order of the slides, true or false
    pause: false,           // Boolean: Pause on hover, true or false
    pauseControls: true,    // Boolean: Pause when hovering controls, true or false
    prevText: "Previous",   // String: Text for the "previous" button
    nextText: "Next",       // String: Text for the "next" button
    maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
    navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
    manualControls: "",     // Selector: Declare custom pager navigation
    namespace: "rslides",   // String: Change the default namespace used
    before: function(){},   // Function: Before callback
    after: function(){}     // Function: After callback
});

Resources

• Responsive-Slides Website