将Bootstrap网格转换为旋转木马特效的jQuery插件

grid-to-carousel.js是一款可以将Bootstrap网格转换为旋转木马特效的jQuery插件。通过该jQuery插件，可以将指定的网格内容扩展为旋转木马效果，通过前后导航按钮来轮流播放。

使用方法

在页面中引入bootstrap相关文件，jquery和grid-to-carousel.js文件。

<link rel="stylesheet" href="path/to/bootstrap.min.css">
<script src="path/to/jquery.js"></script>
<script src="path/to/bootstrap.min.js"></script>
<script src="path/to/grid-to-carousel.js"></script>          
                

HTML结构

grid-to-carousel.js使用下面的基本HTML结构。

<div class="features-container">
  <div id="carousel-example-generic" class="hidden carousel slide" data-ride="carousel">
      <!-- 圆点导航 -->
      <ol class="carousel-indicators">
          <li data-target="#carousel-example-generic" data-slide-to="0"></li>
          <li data-target="#carousel-example-generic" data-slide-to="1"></li>
          <li data-target="#carousel-example-generic" data-slide-to="2"></li>
          <li data-target="#carousel-example-generic" data-slide-to="3"></li>
          <li data-target="#carousel-example-generic" data-slide-to="4"></li>
          <li data-target="#carousel-example-generic" data-slide-to="5"></li>
      </ol>

      <!-- 旋转木马包裹容器 -->
      <div class="carousel-inner" role="listbox">
          <div class="item">
              <div class="content content-green">
                  <span class="close-btn">✕</span>
                  <img class="feature-img" src="img/feature-img.jpg">
                  <h2>Designed for your whole team, not just designers</h2>
                  <p>
                      <strong>CreativeCMS</strong> offers your whole team access as required to templates, code
                      <span class="highlight-yellow">(HTML, CSS, JavaScript)</span>, fonts and images, providing
                      unlimited scope to extend the default range of components <span class="highlight-yellow">
                      (Blog, Case studies and all.)</span> to fit the bespoke needs of any client.
                  </p>
              </div>
          </div>
          <div class="item">
              <div class="content content-yellow">
                  <span class="close-btn">✕</span>
                  <h2>A modern CMS</h2>
                  <p>A platform built for the modern business.</p>
              </div>
          </div>
          <div class="item">
              <div class="content content-white">
                  <span class="close-btn">✕</span>
                  <h2>One United Team</h2>
                  <p>Designed for your whole team, not just designers.</p>
              </div>
          </div>
          <div class="item">
              <div class="content content-grey">
                  <span class="close-btn">✕</span>
                  <h2>Nimble  Lively</h2>
                  <p>New websites up and running in seconds.</p>
              </div>
          </div>
          <div class="item">
              <div class="content content-red">
                  <span class="close-btn">✕</span>
                  <h2>Bright Content</h2>
                  <p>A proven CMS to support your success.</p>
              </div>
          </div>
          <div class="item">
              <div class="content content-white-green">
                  <span class="close-btn">✕</span>
                  <h2>Work Efficiently</h2>
                  <p>Benefit from regular upgrades without disruption.</p>
              </div>
          </div>
      </div>

      <!-- 前后导航按钮 -->
      <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
          <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
      </a>
      <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
          <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
      </a>
  </div>

  <div class="grid">
      <div class="row">
          <div class="col-xs-4 col-md-3">
              <div class="content content-green">
                  <h2>One Central Location</h2>
                  <p>Easily manage your client base.</p>
              </div>
          </div>
          <div class="col-xs-4 col-md-3">
              <div class="content content-yellow">
                  <h2>A modern CMS</h2>
                  <p>A platform built for the modern business.</p>
              </div>
          </div>
          <div class="col-xs-4 col-md-6">
              <div class="content content-white">
                  <img src="img/united-icon.png" alt="">
                  <h2>One United Team</h2>
                  <p>Designed for your whole team, not just designers.</p>
              </div>
          </div>
      </div>
      <div class="row">
          <div class="col-xs-4 col-md-6">
              <div class="content content-grey">
                  <img src="img/browser-icon.jpg" alt="">
                  <h2>Nimble  Lively</h2>
                  <p>New websites up and running in seconds.</p>
              </div>
          </div>
          <div class="col-xs-4 col-md-3">
              <div class="content content-red">
                  <h2>Bright Content</h2>
                  <p>A proven CMS to support your success.</p>
              </div>
          </div>
          <div class="col-xs-4 col-md-3">
              <div class="content content-white-green">
                  <h2>Work Efficiently</h2>
                  <p>Benefit from regular upgrades without disruption.</p>
              </div>
          </div>
      </div>
  </div>
</div>
                

初始化插件

在页面DOM元素加载完毕之后，可以通过gridToCarousel()方法来初始化该旋转木马插件。

$(function() {
    $('.features-container').gridToCarousel();
});
                

grid-to-carousel插件的github地址为：https://github.com/nicholaswright/grid-to-carousel。