visor-carousel是一款兼容Bootstrap3的jQuery旋转木马插件。制作Visor Carousel旋转木马插件的目的是制作一个轻量级支持多个视图子项的旋转木马。它的特点有：

  • 99%兼容Bootstrap3。
  • 可以使用该插件来制作缩略图幻灯片。
  • 支持landscape和portrait布局，并且会自动根据重力检测更改布局。
  • 支持CSS3动画，事件处理会等到 animations/transitions 结束才执行。
  • 通过添加VisorCarousel.ANIMATIONS能支持多重动画。

使用方法

使用该旋转木马插件需要引入jquery.visor-carousel.css和jquery.visor-carousel.js文件，以及Bootstrap的相关资源文件。

<link rel="stylesheet" type="text/css" href="css/jquery.visor-carousel.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.visor-carousel.js"></script>
HTML结构

visor-carousel旋转木马插件的解绑HTML结构如下：注意这里包括4个导航按钮，其中2个是landscape布局的左右prev/next导航按钮，另外2个是portrait布局的上下up-down导航按钮。

<div id="myVisor" class="visor-carousel slide" data-ride="visor">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myVisor" data-slide-to="0" class="active"></li>
        <li data-target="#myVisor" data-slide-to="1"></li>
        <li data-target="#myVisor" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">
        <div class="item col-md-12 active">
            <img class="first-slide" src="..." alt="First slide">
            <div class="container">
                <div class="carousel-caption">
                    <h1>Example headline.</h1>
                    <p>......</p>
                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>
                </div>
            </div>
        </div>
        <div class="item col-md-12">
            <img class="second-slide" src="..." alt="Second slide">
            <div class="container">
                <div class="carousel-caption">
                    <h1>Another example headline.</h1>
                    <p>......</p>
                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>
                </div>
            </div>
        </div>
        <div class="item col-md-12">
            <img class="third-slide" src="..." alt="Third slide">
            <div class="container">
                <div class="carousel-caption">
                    <h1>One more for good measure.</h1>
                    <p>......</p>
                    <p><a class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a></p>
                </div>
            </div>
        </div>
    </div>
    <a class="left carousel-control layout-landscape" href="#myVisor" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="left carousel-control layout-portrait" href="#myVisor" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-up" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control layout-landscape" href="#myVisor" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
    <a class="right carousel-control layout-portrait" href="#myVisor" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-down" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div><!-- /.visor -->
Data API

你可以使用Bootstrap 3 carousel支持的data-*属性，下面是一些插件扩展的data属性。

  • data-slide-to：用于支持jQuery选择器的扩展。
  • data-slide-by：该属性可用于滑动到相对位置：正数表示向前滑动，负数表示向后滑动。例如data-slide-by="1"相当于data-slide="next"，而data-slide-by="-1"相当于data-slide="prev"

visor-carousel旋转木马插件的github地址为：https://github.com/Webapper/visor-carousel