网格切换旋转木马特效jQuery插件

<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>

<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>

$(function() {

    $('.features-container').gridToCarousel();

});