Owl Carousel проблем при Samsung брауър - решение!

При тестовете на изработените от нас сайтове забелязахме, че при браузера на Самсунг се показва празно поле в дясно, когато има carousel. Това го забелязваме и в доста други сайтове в мрежата и за това решихме да потърсим решение на проблема.

body {
    max-width: 100vw;
    overflow-x: hidden; /* предотвратява грешна ширина на карусела */
}

/* опционално: минимални стилове за карусел */
.owl-carousel .owl-stage-outer {
    overflow: hidden;
}

<!-- HTML карусел -->
<div id="carousel1" class="owl-carousel">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <!-- ... -->
</div>

<div id="carousel2" class="owl-carousel">
    <div class="item">A</div>
    <div class="item">B</div>
    <div class="item">C</div>
    <!-- ... -->
</div>

<script>
$(window).on('load', function () {

    var $targets = $('#carousel1, #carousel2');

    $targets.owlCarousel({
        items: 16,
        autoplay: true,
        autoplayTimeout: 3000,
        forceInit: true,
        margin: 10,
        dots: false,
        responsive: {
            0: { items: 3 },
            576: { items: 3 },
            768: { items: 6 },
            992: { items: 12 },
            1200: { items: 16 }
        }
    });

    // Samsung / мобилен fix: refresh след load
    setTimeout(function () {
        $targets.trigger('refresh.owl.carousel');
    }, 300);

    // Refresh при resize / ориентация
    $(window).on('resize orientationchange', function () {
        $targets.trigger('refresh.owl.carousel');
    });

});
</script>

CSS fix: max-width: 100vw; overflow-x: hidden;
→ Решава повечето responsive проблеми на мобилни браузъри, включително Samsung Browser.

Load + Timeout refresh
→ Принуждава карусела да преизчисли ширината след зареждане на изображения, fonts и viewport.

Resize / orientationchange refresh
→ Responsive breakpoints винаги работят при смяна на ориентацията или resize.

Избор на конкретни карусели
→ Можеш да инициализираш само избрани ID-та или класове, без да засягаш други.

Съвет за бъдещи проекти:

Винаги добавяй този CSS fix за body при използване на Owl Carousel.

Ако каруселът е в скрит контейнер (tabs/accordion), винаги trigger refresh.owl.carousel при показване.