2016-11-25 3 views
0

Я новичок в рельсах, и это первый раз, когда я хочу использовать карусель в веб-приложении. Моя карусель появляется, но она не работает автоматически.
Это то, что у меня есть в моих application.js:Запуск owlCarousel in rails

//= 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. Могу ли я сделать его динамичным?

+0

Любые ошибки в консоли браузера? – Ben

+0

Нет, я не обнаружил ошибок. –

+0

Вы уверены, что ваш DOM полностью загружен? Попробуйте с $ (document) .ready() {} вместо основания – Ben

ответ

0

Мне удалось решить проблему. Вот что я сделал:

(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); 
    }); 
}