循环jQuery滑块插件无法正常滑动

Question

我正在使用Cycle JS 2 jQuery插件，但在点击＆＃34;上一页＆＃34;时，它似乎无法正确滑动或＆＃34;下一个＆＃34;的按钮。

更新：我试图让它同时滑动所有4个部分，因此这就是为什么使用col-sm-3的4个部分包含在每个.item块中。< / p>

CodePen： http://codepen.io/gutterboy/pen/MaZyZx

HTML：

<div id="main-slider" class="slider">
  <div class="item row">
    <div class="col-sm-3">
      <a href="" class="content-wrap">
        <div class="image">
          <img src="http://runnersfeed.com/wp-content/uploads/2011/12/curry.jpg" class="img-responsive" alt="Image" />
        </div>
        <div class="details">
          <h4>Some Title</h4>
          <p class="sub-title">
            I'm a sub-title
          </p>
          <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
          </div>
          <div class="link">
            <a href="">Some Link</a>
          </div>
        </div>
        <!-- Details Ends -->
      </a>
    </div>
    <!-- Col Ends -->
    <div class="col-sm-3">
      <a href="" class="content-wrap">
        <div class="image">
          <img src="http://www.newsmax.com/Newsmax/files/44/44b1645b-3804-408d-9c64-f68c8f45bc74.jpg" class="img-responsive" alt="Image" />
        </div>
        <div class="details">
          <h4>Some Title</h4>
          <p class="sub-title">
            I'm a sub-title
          </p>
          <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
          </div>
          <div class="link">
            <a href="">Some Link</a>
          </div>
        </div>
        <!-- Details Ends -->
      </a>
    </div>
    <!-- Col Ends -->
    <div class="col-sm-3">
      <a href="" class="content-wrap">
        <div class="image">
          <img src="http://www.interbasket.net/news/wp-content/uploads/Lebron-James-Miami-Heat.jpg" class="img-responsive" alt="Image" />
        </div>
        <div class="details">
          <h4>Some Title</h4>
          <p class="sub-title">
            I'm a sub-title
          </p>
          <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
          </div>
          <div class="link">
            <a href="">Some Link</a>
          </div>
        </div>
        <!-- Details Ends -->
      </a>
    </div>
    <!-- Col Ends -->
    <div class="col-sm-3">
      <a href="" class="content-wrap">
        <div class="image">
          <img src="http://www.gannett-cdn.com/-mm-/ac1394dbdcca6a36cbf486633b129cd813095ac3/r=x404&c=534x401/local/-/media/USATODAY/USATODAY/2012/11/26/usp-nba_-san-antonio-spurs-at-toronto-raptors-4_3.jpg" class="img-responsive" alt="Image" />
        </div>
        <div class="details">
          <h4>Some Title</h4>
          <p class="sub-title">
            I'm a sub-title
          </p>
          <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
          </div>
          <div class="link">
            <a href="">Some Link</a>
          </div>
        </div>
        <!-- Details Ends -->
      </a>
    </div>
    <!-- Col Ends -->   
  </div>
  <!-- Item Ends -->
  <div class="item row">
    <div class="col-sm-3">
      <a href="" class="content-wrap">
        <div class="image">
          <img src="http://i.usatoday.net/sports/_photos/2011/07/11/NBA-lockout-allows-players-to-look-overseas-9V7G6NL-x-large.jpg" class="img-responsive" alt="Image" />
        </div>
        <div class="details">
          <h4>Some Title</h4>
          <p class="sub-title">
            I'm a sub-title
          </p>
          <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
          </div>
          <div class="link">
            <a href="">Some Link</a>
          </div>
        </div>
        <!-- Details Ends -->
      </a>
    </div>
    <!-- Col Ends -->
    <div class="col-sm-3">
      <a href="" class="content-wrap">
        <div class="image">
          <img src="http://static6.businessinsider.com/image/5241a14b6bb3f7c368ab8319/nba-players-might-wear-bizarre-nickname-jerseys-in-2013.jpg" class="img-responsive" alt="Image" />
        </div>
        <div class="details">
          <h4>Some Title</h4>
          <p class="sub-title">
            I'm a sub-title
          </p>
          <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
          </div>
          <div class="link">
            <a href="">Some Link</a>
          </div>
        </div>
        <!-- Details Ends -->
      </a>
    </div>
    <!-- Col Ends -->
    <div class="col-sm-3">
      <a href="" class="content-wrap">
        <div class="image">
          <img src="http://bingemagazine.com/wp-content/uploads/2014/02/BINGEMagazine-DennisRodman.jpg" class="img-responsive" alt="Image" />
        </div>
        <div class="details">
          <h4>Some Title</h4>
          <p class="sub-title">
            I'm a sub-title
          </p>
          <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
          </div>
          <div class="link">
            <a href="">Some Link</a>
          </div>
        </div>
        <!-- Details Ends -->
      </a>
    </div>
    <!-- Col Ends -->
    <div class="col-sm-3">
      <a href="" class="content-wrap">
        <div class="image">
          <img src="http://www.gannett-cdn.com/-mm-/ac1394dbdcca6a36cbf486633b129cd813095ac3/r=x404&c=534x401/local/-/media/USATODAY/USATODAY/2012/11/26/usp-nba_-san-antonio-spurs-at-toronto-raptors-4_3.jpg" class="img-responsive" alt="Image" />
        </div>
        <div class="details">
          <h4>Some Title</h4>
          <p class="sub-title">
            I'm a sub-title
          </p>
          <div class="text">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
          </div>
          <div class="link">
            <a href="">Some Link</a>
          </div>
        </div>
        <!-- Details Ends -->
      </a>
    </div>
    <!-- Col Ends -->   
  </div>
  <!-- Item Ends -->  
  <div class="control">
    <a href="" class="prev">Prev</a> |
    <a href="" class="next">Next</a>    
  </div>
</div>

CSS：

.slider {
  margin: 20px;
}

.content-wrap {
  display: block;
  //height: 400px;
  text-decoration: none;
}

.image {

  height: 175px;
  overflow: hidden;

  img {
    height: 100%;
  }

}

.details {

  padding: 20px 10px;
  background-color: #fff;
  color: #000;

  h4 {
    font-size: 18px;
    font-weight: bold;
  }

  .sub-title {
    font-size: 16px;
  }

  .text {
    font-size: 14px;
  }

}

.control {
  padding-top: 50px;
  text-align: center;
}

JS：

$(document).ready(function() {
  $('#main-slider').cycle({
      paused: true,
      autoHeight: 'calc',
      slides: '> .item',
      fx: 'scrollHorz',
      next: '.control .next',
      prev: '.control .prev',
      sync: true
    });
});

我在这里做错了什么？

我有一种偷偷摸摸的怀疑，它与在幻灯片中的项目上使用Bootstrap列有关，但不知道如何解决它。