title: Ruby on Rails: Refile Gem and Owl Carousel jQuery plugin, bad combination? Issues with image size on page load
body: <p>I got these two working, but having trouble with the execution. I'm assuming that one of them is loading faster than the other... </p>
  
  <pre><code>&lt;div class="owl-carousel"&gt;
    &lt;% @project.project_images.each do |image| %&gt;
      &lt;div class="bi-item"&gt;
        &lt;%= attachment_image_tag(image, :file, :fit, 1000, 430) %&gt;
      &lt;/div&gt;
    &lt;% end %&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>So I got this loop within the <code>owl-carousel</code> 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?</p>
  
  <p>my coffeescript</p>
  
  <pre><code>$(document).on 'ready page:load', -&gt;
    $(".owl-carousel").owlCarousel
      loop: true
      autoWidth: true
      lazyLoad : true
  </code></pre>
  
  <p>Here's a screenshot, you can see the left side, its tiny</p>
  
  <p><img src="https://i.stack.imgur.com/rn3QY.png" alt="enter image description here"></p>
  
  <p>Then when I dragged the browser a little smaller, the image resizes, gets bigger</p>
  
  <p><img src="https://i.stack.imgur.com/NB0F4.jpg" alt="enter image description here"></p>
  
  <p>Then resized the browser larger, it becomes normal.</p>
  
  <p><img src="https://i.stack.imgur.com/SIeKQ.jpg" alt="enter image description here"></p>