在 rails 开始 owlCarousel

Question

我是 rails 的新手，这是我第一次想在 Web 应用程序中使用轮播。我的轮播出现了，但是没有自动播放。
这就是我的 application.js 中的内容：

//= require owl.carousel
$(function(){ $(document).foundation(); });
var owl = $('.owl-carousel');
owl.owlCarousel({
    items:5,
    loop:true,
    margin:10,
    autoplay:true,
    autoplayTimeout:1000,
    autoplayHoverPause:true
});

这是我的观点：

<div id="owl" class="owl-carousel">
   <%  @artists.each do |artist| %>
       <div class="artist-card ">
          <%= link_to artist, class: "poster" do %>
            <%= image_tag artist.image.url(:thumb) %>
          <% end %>
          <div class="artist-info ell glassy-bg padmy padlx">
            <div class="artist-card ">
              <h6><%= artist.name %> <span>(<%= artist.instrument %>)</span></h6>
            </div>            
          </div>
        </div>
    <% end %>
</div>

是否还有一种方法可以在轮播中显示我数据库中的每个艺术家？我看到轮播的默认项目数是 5。我可以让它动态化吗？

Answer 1

我设法解决了这个问题。这是我所做的：

(function ($) {
  $(document).ready(function() {
    if ($('.carousel .owl-wrapper-outer').length === 0) {
      var owl = $('.carousel').owlCarousel({
        items:5,
        loop:true,
        margin:10,
        autoPlay:1000,
        autoplayHoverPause:true,
        responsive: true,
        responsiveRefreshRate : 200,
        responsiveBaseWidth: window,
        });
      $('.carousel').hover(function() {
      owl.trigger('owl.stop');
    }, function(){
        owl.trigger('owl.play', 1000);
    });
}

在 rails 开始 owlCarousel

Starting owlCarousel in rails

ruby-on-rails

carousel

owl-carousel