Ruby on Rails：重新归档 Gem 和 Owl Carousel jQuery 插件，组合不好？页面加载时图像大小的问题

Question

我让这两个工作正常，但在执行时遇到了问题。我假设其中一个加载速度比另一个快...

<div class="owl-carousel">
  <% @project.project_images.each do |image| %>
    <div class="bi-item">
      <%= attachment_image_tag(image, :file, :fit, 1000, 430) %>
    </div>
  <% end %>
</div>

所以我在 owl-carousel 标记中得到了这个循环...当页面加载时，图像非常小（见第一张附加图像）...如果我拖动浏览器大小，图像开始变得有响应，大小开始改变。最终图像将达到正确的大小......我不确定问题是什么，或者我需要做什么才能让它一起工作。我的假设正确吗？如果是这样，我如何让它一起加载？

我的咖啡脚本

$(document).on 'ready page:load', ->
  $(".owl-carousel").owlCarousel
    loop: true
    autoWidth: true
    lazyLoad : true

这是一张截图，你可以看到左侧，它很小

然后，当我将浏览器拖动得更小时，图像会调整大小，变大

然后把浏览器调大一点，就正常了

Answer 1

好的，我想我明白了...

我把owl轮播功能放在window.load下...这暂时解决了这个问题。如果其他人有其他解决方案，或者更好的解决方案，我仍然想知道！

$(window).load ->

  $(".owl-carousel").owlCarousel
    loop: true
    autoWidth: true
    lazyLoad : true

谢谢

Answer 2

我遇到了类似的问题，这对我有帮助：

// set owl-carousel width equals to owl-wrapper width (solves width issue on load)
function owlWrapperWidth( selector ) {
  $(selector).each(function(){
    $(this).find('.owl-carousel').outerWidth( $(this).closest( selector ).innerWidth() );
  });
}

// trigger on start and resize (solves width issue on load)
owlWrapperWidth( '.owl-wrapper' );
$( window ).resize(function() {
  owlWrapperWidth( $('.owl-wrapper') );
});

$(document).ready(function(){

  // triggers owl Carousel
  $('.owl-carousel').owlCarousel({
    stagePadding: 0,
    items: 1,
    itemsDesktop:[1000,1],
    itemsDesktopSmall:[979,1],
    itemsTablet:[768,1],
    pagination: true,
    dots: true,
    autoplay: 3000,
    loop: true
  });

});

Ruby on Rails：重新归档 Gem 和 Owl Carousel jQuery 插件，组合不好？页面加载时图像大小的问题

Ruby on Rails: Refile Gem and Owl Carousel jQuery plugin, bad combination? Issues with image size on page load

javascript

ruby

jquery

ruby-on-rails-4

owl-carousel