Question

所以，我有一个硬编码的轮播，因为它有自己的风格，并且类似于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");

}）;

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

尝试一下，该教程非常容易理解。

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

1 个答案: