Подружить OwlCarousel c NanoGallery2 и Bootstrap 4?

Question

[iDomanOff]

Доброго всем времени суток... собственно, задача сделать адаптивную галлерею внутри карусели и вроде бы все даже работает, НО!!! OwlCarusel при изменении размера браузера считает свои размеры блока, что портит всю картину... но после перезагрузки страницы все становится на свои места... Может кто так же с бубном танцевал? Буду очень признателен за любую помощь :-)))

<div class="container">
		<div class="row">
			<div class="col-8 offset-2">
				<div class="owl-carousel owl-theme">
					<div id="gallery" class="" src="..." alt="First slide">
						<a href = "img/6/big_1.jpg"   data-ngThumb = "img/6/big_1.jpg" > Berlin 1 </a>
						<a href = "img/6/big_2.jpg"   data-ngThumb = "img/6/big_2.jpg" > Berlin 2 </a>
						<a href = "img/6/big_3.jpg"   data-ngThumb = "img/6/big_3.jpg" > Berlin 3 </a>	
						<a href = "img/6/big_4.jpg"   data-ngThumb = "img/6/big_4.jpg" > Berlin 1 </a>
						<a href = "img/6/big_5.jpg"   data-ngThumb = "img/6/big_5.jpg" > Berlin 2 </a>
						<a href = "img/6/big_6.jpg"   data-ngThumb = "img/6/big_6.jpg" > Berlin 3 </a>
						<a href = "img/6/big_6.jpg"   data-ngThumb = "img/6/big_6.jpg" > Berlin 3 </a>
						<a href = "img/6/big_1.jpg"   data-ngThumb = "img/6/big_1.jpg" > Berlin 2 </a>
					</div>
					<div id="gallery2" class="" src="..." alt="Second slide">
						<a href = "img/8/big_1.jpg"   data-ngThumb = "img/8/big_1.jpg" > Berlin 1 </a>
						<a href = "img/8/big_2.jpg"   data-ngThumb = "img/8/big_2.jpg" > Berlin 2 </a>
						<a href = "img/8/big_3.jpg"   data-ngThumb = "img/8/big_3.jpg" > Berlin 3 </a>
						<a href = "img/8/big_4.jpg"   data-ngThumb = "img/8/big_4.jpg" > Berlin 1 </a>
						<a href = "img/8/big_5.jpg"   data-ngThumb = "img/8/big_5.jpg" > Berlin 2 </a>
						<a href = "img/8/big_6.jpg"   data-ngThumb = "img/8/big_6.jpg" > Berlin 3 </a>
						<a href = "img/8/big_2.jpg"   data-ngThumb = "img/8/big_2.jpg" > Berlin 2 </a>
						<a href = "img/8/big_1.jpg"   data-ngThumb = "img/8/big_1.jpg" > Berlin 2 </a>
					</div>	
				</div>
			</div>
		</div>
	</div>

$(function() {

	$(".owl-carousel").owlCarousel({
		nav: true,
		items: 1,
		autoWidth: false,
	});
	
	$("#gallery").nanogallery2({
		"thumbnailHeight":200,
		"thumbnailWidth": 200,
		"galleryMosaic": [
		{ "w": 5, "h": 3, "c": 2, "r": 1 },
		{ "w": 2, "h": 2, "c": 1, "r": 2 },
		{ "w": 2, "h": 2, "c": 7, "r": 2 },
		{ "w": 2, "h": 2, "c": 2, "r": 4 },
		{ "w": 3, "h": 4, "c": 4, "r": 4 },
		{ "w": 3, "h": 4, "c": 7, "r": 4 },
		{ "w": 2, "h": 2, "c": 10, "r": 5 },
		{ "w": 4, "h": 2, "c": 11, "r": 6 }
		],
		"thumbnailGutterWidth":      4,
		"thumbnailGutterHeight":     4,
		"thumbnailBorderHorizontal": 0,
		"thumbnailBorderVertical":   0,
		"galleryMaxRows":            1,
		"thumbnailLabel":            { "display" : false }
	});	
		$("#gallery2").nanogallery2({
		"thumbnailHeight":200,
		"thumbnailWidth": 200,
		"galleryMosaic": [
		{ "w": 5, "h": 3, "c": 2, "r": 1 },
		{ "w": 2, "h": 2, "c": 1, "r": 2 },
		{ "w": 2, "h": 2, "c": 7, "r": 2 },
		{ "w": 2, "h": 2, "c": 2, "r": 4 },
		{ "w": 3, "h": 4, "c": 4, "r": 4 },
		{ "w": 3, "h": 4, "c": 7, "r": 4 },
		{ "w": 2, "h": 2, "c": 10, "r": 5 },
		{ "w": 4, "h": 2, "c": 11, "r": 6 }
		],
		"thumbnailGutterWidth":      1,
		"thumbnailGutterHeight":     1,
		"thumbnailBorderHorizontal": 0,
		"thumbnailBorderVertical":   0,
		"galleryMaxRows":            1,
		"thumbnailLabel":            { "display" : false }
	});	
});

После изменения размера:

Answer 1

[iDomanOff]

А ларчик просто открывался))
все решается добавлением responsiveRefreshRate
в JS слайдера... )

Answer 2

[Юпитер Макс]

у овл же есть опция для адаптива

responsive : {
    // breakpoint from 0 up
    0 : {
        option1 : value,
        option2 : value,
        ...
    },
    // breakpoint from 480 up
    480 : {
        option1 : value,
        option2 : value,
        ...
    },
    // breakpoint from 768 up
    768 : {
        option1 : value,
        option2 : value,
        ...
    }
}

Comments

[iDomanOff]

Благодарю за ответ... но, я в курсе.. адаптив Owl работает относительно количества item и nav

responsive:{
        0:{
            items:1,
            nav:true
        },
        600:{
            items:3,
            nav:false
        },
        1000:{
            items:5,
            nav:true,
            loop:false
        }

у меня же один элемент в карусели при любых разрешениях, внутри которой бутстрап сетка + каскад nanogallery

[Юпитер Макс]

iDomanOff, тогда используйте медиазапросы в css, чтобы изменить размеры блока, который все ломает.

[iDomanOff]

Юпитер Макс, медиазапросом тут никак, тк ширина блока вычисляется автоматически, в зависимости от родителя, как я понял. но вот почему-то разные значения получаются, а просчитываются заново только после обновления страницы

[Юпитер Макс]

iDomanOff, а вы динамически изменяете размер окна? то есть открываете эмулятор и расширяете/сужаете его?

[iDomanOff]

Юпитер Макс, Да, именно так

[Юпитер Макс]

iDomanOff, ну тогда надо цеплять нужные функции на resize

$(window).resize(function(){
// тут что-то делать
});

[iDomanOff]

Юпитер Макс, На ум только пока это приходит:
window.setTimeout('location.reload()' , 300)
но это полумера, т.к. если будет меню выпадающее при скролле и тд, на мобильных устройствах будет криво работать

[Юпитер Макс]

iDomanOff, ну нет, это не вариант. Зачем делать перезагрузку? Наверняка можно обойтись без этого. У вас сайт где-то выложен? Наглядно было бы проще решить вопрос.

[iDomanOff]

Юпитер Макс, нет, пока на локалке тестирую... но есть на готовой верстке уже аналогичная проблема с masonry внутри...

[iDomanOff]

Юпитер Макс, www.aremont.pro

[iDomanOff]

Юпитер Макс, Добавил текуший вариант тут