New home › Forums › Pro Add-on › General queries › Correct responsive carousel
Tagged: Carousel, mobile, responsive
- This topic has 32 replies, 6 voices, and was last updated 5 years, 11 months ago by Perry.
-
AuthorPosts
-
October 19, 2017 at 10:43 am #31392PerryModerator
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.
October 19, 2017 at 12:33 pm #31400aforshawMemberHi 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 🙂
October 19, 2017 at 1:52 pm #31406PerryModeratorThis reply has been marked as private. -
AuthorPosts
- You must be logged in to reply to this topic.