Correct responsive carousel

New home Forums Pro Add-on General queries Correct responsive carousel

Viewing 3 posts - 31 through 33 (of 33 total)
  • Author
    Posts
  • #31392
    Perry
    Moderator

    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.
    #31400
    aforshaw
    Member

    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 🙂

    #31406
    Perry
    Moderator
    This reply has been marked as private.
Viewing 3 posts - 31 through 33 (of 33 total)
  • You must be logged in to reply to this topic.