0

我在使用 jquery OwlCarousel2 时遇到了显示问题，所有数据上下文都由 Iron-router 发送到模板中。

有时用户界面正常工作有时不工作。如果我尝试刷新页面，Carousel 将会损坏。

这是 15 秒的视频演示，因此可以清楚地看到显示问题。 UI 问题 - OwlCarousel2 和 Meteor2

我一直在尝试通过使用 Meteor.defer( ) 或 Meteor.setTimeout( ) 和其他方法来解决这个问题，在解决这个问题超过 10 天之后仍然没有任何运气。这个你能帮我吗。非常感谢你们。

集合.js

Albums = new Mongo.Collection('albums');

路由.js

Router.route('/album/:slug', function () {
  this.render('AlbumSingal', {
    data: function () {
      return Albums.findOne({slug: this.params.slug});
    }
  },);
});

专辑歌曲.html

<template name="AlbumSingal">
    {{ > OwlCarousel}}

    {{> IntroSection}}

    {{> PhotoBook}}

    {{> Tips}}

    {{> LinkToOtherAlbums}}
</template>

OwlCarousel.html

<template name="OwlCarousel">
    <div class="owl-carousel">
        {{#each carouselImages}}
        <div class="item"><img src="/img/{{imageUrl}}" alt="{{imageUrl}}"></div>
        {{/each}}
    </div>
</template>

OwlCarousel.js

Template.OwlCarousel.onRendered(function(){

    Meteor.defer(function(){

            $('.owl-carousel').owlCarousel(
                {
                     margin:0,
                     loop:true,
                     autoplay:true,
                     autoplayTimeout:1500,
                     autoplaySpeed:1000,
                     autoplayHoverPause:true,
                     autoWidth:true,
                     items:4,
                     nav:true,
                     navText: [
                      '<i class="fa fa-chevron-left"></i>',
                      '<i class="fa fa-chevron-right"></i>'
                     ]
                }
            );

    });

});
4

2 回答 2

0

我注意到 owl carousel，当您将它与 a{{#each}}或动态数据一起使用时，加载需要一段时间，所以可能在它完成渲染时，"$('.owl-carousel').owlCarousel({});"已经加载了任何内容（因为 .owl-carousel 在时间）。

发生在我身上的是"$('.owl-carousel').owlCarousel({});"只加载了静态元素并且没有得到我的任何“.item”元素。

您可以尝试通过将"$('.owl-carousel').owlCarousel({});"函数放入.js调用模板并设置 200 毫秒或更短的时间间隔（如果适合您）来解决该问题。

于 2017-03-02T12:09:58.363 回答
0

您可以为要在轮播中显示的图像创建模板，并在该模板的 onRendered 上触发 owl carousel，因此，当您的图像被获取时，只有 owl carousel 会触发。

于 2021-07-29T05:48:32.853 回答