Owlcarousel2: calculate width .owl-stage

[JarekWichrowski]

Width in .owl-storage is to small... and last slide jumps down

http://csshtml.pl/galeria/

+1px and is ok

[TPDBrendan]

Yea, I'm noticing the same thing:

Slides are jumping down, but if I resize the browser everything pops into place. Adding 1px to .owl-stage in the inspector seems to get the slides in a row, but height is still double as would be expected.

Manually trigger a window resize on document ready doesn't seem to do anything either.

[brunoDegaspare]

Same issue here. Already waisted 2 days trying to solve this with no success.

[ivanmiro]

Have the same problem, but I wrote solution:

    $('.c-roll-menu').owlCarousel({
    autoWidth: true
});

    function owlCarWidth(carousel) {

    var
        totalWidth = 0;

    carousel.find('.owl-item').each(function() {
        totalWidth += $(this).width();
        console.log(totalWidth);
    });

    carousel.find('.owl-stage').width(totalWidth+1);

}
owlCarWidth( $('.c-roll-menu') );

    $('.c-roll-menu').on('refreshed.owl.carousel', function(event) {
             owlCarWidth( $('.c-roll-menu') );
});

$(window).trigger('resize');

For me works great!

[brunoDegaspare]

Hi mate,

Thank you for sharing this.
I managed solving it by changing some css as well. Now it's working.

On 27 November 2014 at 17:51, Ivan [email protected] wrote:

Have the same problem, but I wrote solution:

$('.c-roll-menu').owlCarousel({
autoWidth: true

});

function owlCarWidth(carousel) {

var
    totalWidth = 0;

carousel.find('.owl-item').each(function() {
    totalWidth += $(this).width();
    console.log(totalWidth);
});

carousel.find('.owl-stage').width(totalWidth+1);

}
owlCarWidth( $('.c-roll-menu') );

$('.c-roll-menu').on('refreshed.owl.carousel', function(event) {
         owlCarWidth( $('.c-roll-menu') );

});

$(window).trigger('resize');

For me works great!

—
Reply to this email directly or view it on GitHub
https://github.com/OwlFonk/OwlCarousel2/issues/582#issuecomment-64817716
.

[ivanmiro]

Interesting! What css?

[brunoDegaspare]

Cascading Style Sheets (CSS) -
http://en.wikipedia.org/wiki/Cascading_Style_Sheets

On 28 November 2014 at 10:16, Ivan [email protected] wrote:

Interesting! What css?

—
Reply to this email directly or view it on GitHub
https://github.com/OwlFonk/OwlCarousel2/issues/582#issuecomment-64877584
.

[ivanmiro]

lol
What css of plugin you'd changed?

[brunoDegaspare]

lol sorry mate.

owl.carousel.css --> class: .owl-carousel.owl-loading and
.mobile-menu.owl-loading I added display: block !important. After that the
issue had gone.

On 28 November 2014 at 10:34, Ivan [email protected] wrote:

lol
What css of plugin you'd changed?

—
Reply to this email directly or view it on GitHub
https://github.com/OwlFonk/OwlCarousel2/issues/582#issuecomment-64879533
.

[diede-dertig]

Why was this issue closed? This has not been fixed, has it?

edit: by looking at carousel.data('owlCarousel').settings.margin, one can account for margins set on the slides when calculating correct stage size

[CoryFoy]

@diede-dertig I'm guessing because there were workarounds listed above. If that's a mistake, don't hesitate to reopen it and let us know (or even shoot a PR!)

[mgntrn]

For me the mentioned workaround didn't work as expected, but this worked for me:

function recalcCarouselWidth(carousel) {
    var stage = carousel.find('.owl-stage');
    stage.width(Math.ceil(stage.width()) + 1);
}

$(window).on('resize', function(e){
    recalcCarouselWidth($('.owl-carousel'));
}).resize();

$('.wm-carousel').on('refreshed.owl.carousel', function(event) {
    recalcCarouselWidth($('.owl-carousel'));
});

[naeim]

Had This problem.
for me its happened because slide loaded on display:none div, so width didnt calculate on load.
manage to hide div after slider loaded.
hide wrapper with css .wrapper{display:none}
add class"js" to body after owlCarousel.:

jQuery("body").addClass("js");
.js .wrapper{ display: none; }

[imolorhe]

I am also currently facing this issue. This issue looks like something that should be solved with the plugin itself, not using workarounds. It affects the core functionality of this plugin.

[esch8048]

I found that I ran into this issue only when I was setting widths of my individual carousel items to a non-integer value - rounding widths up or down solved the issue for me.

[Roy-Orbison]

I had this issue on a site (where I cannot update/modify Owl) and fixed it with this CSS:

body .owl-stage {
    width: auto !important;
    white-space: nowrap;
}
body .owl-stage .owl-item {
    position: static;
    float: none;
    display: inline-block;
    vertical-align: top;
}

As commented on issue #424.

[viveksaroch]

if @mgntrn code not work then use this code i made some changes in it.
function recalcCarouselWidth(carousel) {
var stage = carousel.find('.owl-stage');
stage.width(Math.ceil(stage.width()) + 1);
}

$(window).on('resize', function(e){
    recalcCarouselWidth($('.textures-carousel'));
}).resize();

$('.textures-carousel').on('refreshed.owl.carousel', function(event) {
    setTimeout(function(){
        recalcCarouselWidth($('.textures-carousel'));
    }, 200);
});

[viveksaroch]

i am sure that it would be work perfectly

[KalterDK]

if @mgntrn code not work then use this code i made some changes in it.
function recalcCarouselWidth(carousel) {
var stage = carousel.find('.owl-stage');
stage.width(Math.ceil(stage.width()) + 1);
}

$(window).on('resize', function(e){
    recalcCarouselWidth($('.textures-carousel'));
}).resize();

$('.textures-carousel').on('refreshed.owl.carousel', function(event) {
    setTimeout(function(){
        recalcCarouselWidth($('.textures-carousel'));
    }, 200);
});

Thank you very much, it's best solution for me.