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();

I don't have a way to test this at the moment, but based on past experience, you need to attach the initialized event before initializing the carousel:

$carousel.on( 'initialized.owl.carousel', function() {
    console.log( 'carousel initialized' );
    $carousel.trigger( 'refresh.owl.carousel' );
}).owlCarousel( {
    items : 1,
    navSpeed : 500,
    paginationSpeed : 400,
    autoWidth: true,
    margin : 15,
    loop : true,
    center : true
});

It may be because the carousel tries to init before all the images have loaded (which would be problematic if it was sizing off those images). Try wrapping it in a window.load call, which doesn't fire until the images have loaded:

$( window ).load( function() {
     run_owl();
}

You have to reinit the carousel if thats the problem you have. While not the really best solution, make a check of your viewport (with window.resize) and use owl.reinit(newOptions), where of course you can set your new options or use old ones. (it basicly rewrite the old rules, so if you dont pass argument it should work too).

I suggest you not to rewrite on every width change, because that will just kill you, instead only check for certain widths (or range of widths).

http://owlgraphic.com/owlcarousel/demos/manipulations.html

Part of Owl manipulation methods

//Manipulation methods
owl.addItem(htmlString [,targetPosition])
owl.removeItem(targetPosition)
owl.destroy()
owl.reinit(newOptions)

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
} );