J'ai fait fonctionner ces deux-là, mais j'ai des problèmes avec l'exécution. Je suppose que l'un d'eux se charge plus rapidement que l'autre ...

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

J'ai donc cette boucle dans la balise owl-carousel ... et lorsque la page se charge, les images sont vraiment minuscules (voir la première image ci-jointe) ... si je fais glisser la taille de mon navigateur, les images commencent à devenir réactives, et la taille commence à changer. Finalement, les images atteindront la bonne taille ... Je ne sais pas quel serait le problème, ni ce que je dois faire pour que cela fonctionne ensemble. Mon hypothèse est-elle correcte? Si oui, comment puis-je le charger ensemble?

Mon café

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

Voici une capture d'écran, vous pouvez voir le côté gauche, son minuscule

enter image description here

Puis quand j'ai fait glisser le navigateur un peu plus petit, l'image se redimensionne, s'agrandit

enter image description here

Puis redimensionné le navigateur plus grand, cela devient normal.

enter image description here

0
hellomello 21 juil. 2015 à 07:27

2 réponses

Meilleure réponse

Très bien, je pense que je l'ai compris ...

J'ai mis la fonction de carrousel de hibou sous window.load ... cela a résolu le problème pour le moment. Si quelqu'un d'autre a une autre solution, ou quelque chose qui serait mieux, j'aimerais encore le savoir!

$(window).load ->

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

Merci

0
hellomello 21 juil. 2015 à 05:01

J'ai eu un problème similaire, c'est ce qui m'a aidé:

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

});
0
trickydiddy 31 juil. 2017 à 11:01