到达最后一个轮播项目时如何循环卡片答案

【问题标题】：How loop cards when get to last carousel item到达最后一个轮播项目时如何循环卡片
【发布时间】：2019-04-05 01:30:19
【问题描述】：

所以，我有一个硬编码的轮播，因为它有自己的风格，并且类似于 netflix 轮播，但是当我通过左右指示器移动它到达最后一项时，它就坏了，因为没有更多的项目，我想知道是否有什么我可以做的，以便在到达最后一个项目时从第一个重新开始，在图像中是发生了什么的一个例子，如果我再点击一次右边就没有更多的项目了。正如我之前问过的，有没有办法循环这些项目？我正在使用 rails 和 jquery

此处轮播

<div id="section-events">
<span id="controlL" class="left-controls" role="button" aria-label="See Previous Modules">
    <b class="fa fa-chevron-left fa-chevron-left-extra" aria-hidden="true"></b>
</span>
<div class="module-section clearfix">
    <!-- <button class="btn arrow-guides fa-chevron-left"></button> -->
    <ul id="content">
        <% @shows.each do |show| %>
        <%= render partial: "event", locals: {show: show} %>
        <% end %>
    </ul>
</div>
<!--end of module-section-->
<span id="controlR" class="right-controls" role="button" aria-label="See Previous Modules">
    <b class="fa fa-chevron-right fa-chevron-right-extra" aria-hidden="true"></b>
</span>
<!-- <button class="btn arrow-guides-right fa-chevron-right"></button> -->
<div class="view-more-button">
    <%= link_to "Show more" ,events_landing_path, class: "btn btn-outline-info" %>
</div>

Jquery 在这里

$('#controlR').click(function() {
event.preventDefault();
$('#content').animate({
    marginLeft: "-=95vw"
}, "fast");

});

$('#controlL').click(function() {
event.preventDefault();
$('#content').animate({
    marginLeft: "+=95vw"
}, "fast");

});

【问题讨论】：

标签： jquery carousel

【解决方案1】：

我认为您的问题不一定针对ruby-on-rails。按照slick 上的本教程，您的问题的答案可能是：

简而言之，写在你的<head>标签中：

<link rel="stylesheet" type="text/css" href="slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>

然后是脚本：

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="slick/slick.min.js"></script>

在你的 javascript 中：

$(".module.section").slick({
  infinite: true,
  slidesToShow: 4, // or whatever you want
  slidesToScroll: 1 // or whatever you want
});

你可以将你的一些 HTML 委托给它，它最终会是这样的：

<div if="section-events">
  <div class="module-section clearfix">
      <% @shows.each do |show| %>
        <div><%= render partial: "event", locals: {show: show} %></div>
      <% end %>
    </ul>
  </div>
</div>

试试看，教程很容易上手。

【讨论】：