Correct responsive carousel

[Perry]

Hi Anthony,

Thanks for that, I was able to reproduce the issue

It seems that the problem here is Owl carousel doesn’t correctly calculate the stage width, the result being that it thinks the total width of the items is far longer than it actually is, which is why the items end up off screen like you’re seeing.

Could you firstly download the latest version of Owl Carousel from here: https://owlcarousel2.github.io/OwlCarousel2/ and copy the files overwriting the previous version our plugin uses.

Could you please try tweaking your settings (for example, not using autoWidth)?

Would it be acceptable to use rewindNav instead of loop? I’ve experienced issues with this setting in certain circumstances in the past, if it’s an absolute must I appreciate that though.

There is an issue on their GitHub describing what I believe is the same problem you’re having: https://github.com/OwlCarousel2/OwlCarousel2/issues/1139 could you try any of the solutions there?

Kind regards
– Perry

• This reply was modified 5 years, 11 months ago by Perry.

[aforshaw]

Hi Perry,

Thanks for that – I have got it to be a lot better than it was by following some of the instructions from the GitHub page. I’m now calling the carousel with:

// Ant 171019 FIX the Own Carousel's pagination - https://github.com/OwlCarousel2/OwlCarousel2/issues/1139
				var fixOwl = function(){
					var $stage = $('.owl-stage'),
						stageW = $stage.width(),
						$el = $('.owl-item'),
						elW = 0;
					$el.each(function() {
						elW += $(this).width()+ +($(this).css("margin-right").slice(0, -2))
					});
					if ( elW > stageW ) {
						$stage.width( elW );
					};
				}

                  jQuery("#wpgmza_marker_list_"+wpgmaps_localize[entry]['id']).owlCarousel({
					  autoplay: autoplay,
					  autoplayTimeout: 2000,
					  autoplayHoverPause:true,
					  lazyLoad : lazyload,
					  autoHeight : autoheight,
					  pagination : pagination,
					  startPosition:Math.floor(Math.random() * jQuery('.owl-item').length) + 1 ,
					  nav : navigation,
					  items : items,
					  loop:true,
					  autoWidth:true,
					  responsiveClass:true,
					  onInitialized: fixOwl,
					  onRefreshed: fixOwl,
					  responsive:{
						0:{
						  items:1,
						  nav:navigation
						},
						600:{
						  items:3,
							nav:navigation
						 },
						 1000:{
						   items:4,
						   nav:navigation
						 }
					  }
					});  

And I added the following CSS rules:

.owl-stage {
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: box;
}

.owl-item {
display: inline !important;
}

Not entirely sure how necessary the CSS rules were but I’m not going to tempt fate by messing with it now that it’s this close to working!

Thanks for the help 🙂

[Perry]

This reply has been marked as private.

[Author]

Posts