gistfile1.txt

// This carousel works like it should, but has a little hiccup on mobile where it doesn't calculate the width properly sometimes. If you rotate your phone to landscape and back to portrait, it kicks the carousel back into place. The fix would be to trigger a refresh after the carousel is initialized, so that it recalculates but I can't get it to take.

// Helpful links:

// See the bug on mobile here: https://preview.arraythemes.com/camera/2014/01/18/test-gallery/
// Owl events: http://www.owlcarousel.owlgraphic.com/docs/api-events.html#refresh-owl-carousel
// On how to initialize: https://github.com/OwlFonk/OwlCarousel2/issues/489

// Owl Carousel
function run_owl() {

	// Initialize each carousel independently
	$( ".owl-carousel" ).each( function() {
		var $carousel = $( this ); //.owl-carousel
		var $gallery = $( this ).parent(); //.owl-gallery

		$carousel.owlCarousel( {
			items : 1,
			navSpeed : 500,
			paginationSpeed : 400,
			autoWidth: true,
			margin : 15,
			loop : true,
			center : true
		} );
	});
}
run_owl();

Hi guys,

It looks like the autoWidth setting is causing my issue here. I've done a check on the viewport size to toggle the autoWidth setting off on mobile. Looks like it does the trick so far, but I'll test it a bit further in the AM. Thanks for your help!

// Get autoWidth option based on viewport size
if( current_width > 480 ) {
    var device_width = true;
    var device_margin = 15;
} else {
    var device_width = false;
    var device_margin = 5;
}

$carousel.owlCarousel( {
    items : 1,
    navSpeed : 500,
    paginationSpeed : 400,
    autoWidth : device_width,
    margin : device_margin,
    loop : true,
    center : true
} );