支持移动触摸屏响应式jQuery幻灯片插件

<div class="banner">

    <ul>

        <li>This is a slide.</li>

        <li>This is another slide.</li>

        <li>This is a final slide.</li>

    </ul>

</div>

.banner { position: relative; overflow: auto; }

.banner li { list-style: none; }

.banner ul li { float: left; }

$(function() {

    $('.banner').unslider();

});

<!-- The HTML -->

<a href="#" class="unslider-arrow prev">Previous slide</a>

<a href="#" class="unslider-arrow next">Next slide</a>                

<!-- And the JavaScript -->

<script>

    var unslider = $('.banner').unslider();

    $('.unslider-arrow').click(function() {

        var fn = this.className.split(' ')[1];

 //  Either do unslider.data('unslider').next() or .prev() depending on the className

        unslider.data('unslider')[fn]();

    });

</script>

$('.banner').unslider({

  speed: 500,               //  The speed to animate each slide (in milliseconds)

  delay: 3000,              //  The delay between slide animations (in milliseconds), false for no autoplay

  complete: function() {},  //  A function that gets called after every slide animation

  keys: true,               //  Enable keyboard (left, right) arrow shortcuts

  dots: true,               //  Display dot navigation

  fluid: false              //  Support responsive design. May break non-responsive designs

});

var slidey = $('.banner').unslider(),

    data = slidey.data('unslider');

//  Start Unslider

data.play();

//  Pause Unslider

data.stop();

//  Move to a slide index, with optional callback

data.to(2, function() {});

//  data.to(0);

//  Manually enable keyboard shortcuts

data.keys();

//  Move to the next slide (or the first slide if there isn't one)

data.next();

//  Move to the previous slide (or the last slide if there isn't one)

data.prev();

//  Append the navigation dots manually

data.dots();