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

Question

I got these two working, but having trouble with the execution. I'm assuming that one of them is loading faster than the other...

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

So I got this loop within the owl-carousel tag... and when the page loads, the images are really tiny (see first attached image)... if I drag my browser size, the images starts becoming responsive, and the size starts changing. Eventually the images will get to the correct size... I'm not sure what the issue would be, or what I need to do to get this working together. Is my assumption correct? If so, how do I make it load together?

my coffeescript

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

Here's a screenshot, you can see the left side, its tiny

Then when I dragged the browser a little smaller, the image resizes, gets bigger

Then resized the browser larger, it becomes normal.

Answer 1

Alright, I think I got it...

I put the owl carousel function under window.load... this solved the issue for now. If someone else has another solution, or something that would be better, I'd like to know it still!

$(window).load ->

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

Thanks

Answer 2

I had a similar issue this was what helped me:

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

});