Javascript 循环jQuery滑块插件未正确滑动

我正在使用jQuery插件，但在单击Prev或Next按钮时，它似乎没有正确滑动

更新：我试图让它一次滑动所有4个部分，这就是为什么每个.item块中包含4个使用col-sm-3的部分

代码笔：

HTML:

JS:

我做错了什么

---

我偷偷地怀疑它与在幻灯片中的项目上使用引导列有关，但不确定如何修复它。

可能想看看插件。不清楚您在这里实际想做什么。您是想让幻灯片由多列组成，还是应该是单独的幻灯片？如果没有正确解释，滑动似乎不正确并不意味着什么。@vanburen我的错，我会更新。

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

.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;
}

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