Dynamic page with Owl carousel 2 , after refresh the page , the UI will break

help
1

I’m having the displaying problem with jquery OwlCarousel2,
all of data contexts is sent by Iron-router into the template.

sometimes the UI works normally sometimes does not working.
if I ever try to refresh the page , the Carousel UI will be broken.

here is the 15 sec video demo, so can see the display problem clearly.
UI Problem - Jquery - OwlCarousel2 and Meteor

I’ve been trying so many different way to solve this problem by using Meteor.defer( ) or Meteor.setTimeout( ) and others, after struggling with this problem for more then 10 days still don’t have any luck. please help me out with this. thank you guys very much in advance.

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

routes.js

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

AlbumSingal.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>'
		             ]
		        }
		    );
	
	});
	
});
2

Hey there!

Have you solved this?

I am experiencing exactly the same thing :confused: