Сова карусельного брейки

Question

Я искал решение, но я не нашел проблему такой же, как у меня ...

У меня есть разные разделы на моей странице, которые плавают вид снаружи, каждая секция плавает в поле зрения если вы нажмете на ссылку меню.

Сова-карусель - это один дополнительный раздел ... Проблема в том, что когда я нахожусь в домашнем разделе, и я изменяю размер окна. Если я затем позволю слайдер-секции всплыть в поле зрения, сова-карусель будет сломана. Если я снова изменю размер окна, карусель перезагрузится, и все будет хорошо, но только если я сделаю это дополнительное изменение размера.

$(".menu-btn").click(function(event) { 
 
    var target = $(this).attr('href'); 
 
    event.preventDefault(); 
 

 
    $(".sectionID").removeClass("active"); 
 
    $(target).addClass("active"); 
 

 

 
}); 
 

 
$("#owl-example").owlCarousel(); 
 

 
$(".slider").owlCarousel({ 
 
    navigation: true, 
 
    pagination: true, 
 
    slideSpeed: 1000, 
 
    paginationSpeed: 500, 
 
    paginationNumbers: true, 
 
    singleItem: true, 
 
    autoPlay: false, 
 
    autoHeight: false, 
 
    animateIn: 'slideIn', 
 
    animateOut: 'slideOut', 
 
    afterAction: syncPosition, 
 
    responsiveRefreshRate: 200, 
 
    booleanValue: false, 
 
    afterMove: afterAction 
 
});

.header { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.active { 
 
    z-index: 2; 
 
} 
 
#menu-top { 
 
    position: fixed; 
 
    top: 0; 
 
    z-index: 1000; 
 
} 
 
.sectionID { 
 
    margin: 100px 0; 
 
} 
 
.sectionID:nth-child(odd) { 
 
    transform: translateX(-5000px); 
 
} 
 
.sectionID:nth-child(even) { 
 
    transform: translateX(5000px); 
 
} 
 
#section-wrapper { 
 
    position: relative; 
 
} 
 
.sectionID { 
 
    position: absolute; 
 
    top: 0; 
 
    transition: 1.5s; 
 
    padding-bottom: 0; 
 
    height: 100vh; 
 
    background-color: white; 
 
} 
 
.sectionID.active { 
 
    transform: translateX(0px); 
 
    width: 100%; 
 
    padding-bottom: 0; 
 
    background-color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script> 
 
<div class="header"> 
 
    <ul> 
 
    <li><a href="#1" class="menu-btn">Home</a> 
 
    </li> 
 
    <li><a href="#2" class="menu-btn">Slider</a> 
 
    </li> 
 
    </ul> 
 
</div> 
 
<section id="1" class="sectionID active"> 
 
    <div class="screen1"> 
 
    <h1 style="text-allign:center;">Home</h1> 
 
    </div> 
 
</section> 
 

 
<section id="2" class="sectionID"> 
 
    <div class="slider"> 
 
    <div id="owl-example" class="owl-carousel"> 
 
     <div>Your Content</div> 
 
     <div>Your Content</div> 
 
     <div>Your Content</div> 
 
     <div>Your Content</div> 
 
     <div>Your Content</div> 
 
     <div>Your Content</div> 
 
     <div>Your Content</div> 
 
    </div> 
 
    </div> 
 
</section>

Я добавил сниппет для лучшего понимания, как работают мои разделы. Я думаю, что это потому, что карусель не обновляется и не загружается снова, поэтому я попытался найти решение, которое при нажатии на кнопки меню начинается обновление карусели совы, но я не знаю, как это сделать. Кажется, что ничего не работает.

Я использовал шаблон, в котором есть старый jquery и сова-карусель 1, и теперь будет слишком много работы по обновлению файлов. Я не думаю, что страница будет работать правильно, если я просто обножу jQuery и сову. Или я ошибаюсь?

Ну, вернемся к моему вопросу: есть ли возможность обновить карусель совы по клику?

Заранее спасибо за любую помощь ....

Answer 1

Вы можете вызвать на owl-carousel методы вручную следующим образом:

$("#owl-example").trigger("refresh.owl.carousel"); 

Другой путь будет вызвать окно изменения размера события (не рекомендуется):

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

Подробнее о событиях в каруселях в docs.

Объяснение о сломанной каруселью:

плагин должен знать высоту и ширину элементов контейнера для того, чтобы работать. Пока карусель скрыта, все эти значения равны нулю. Поэтому после показа скрытой карусели нужно вызвать refresh и таким образом заставить owl-carousel пересчитать значения.

В некоторых случаях вы можете установить непрозрачность карусели на opacity: .001 во время инициализации карусели, чем скрыть ее и установить непрозрачность обратно на 1. Посетители не увидят его, а owl-carousel не будут разбиты.

EDIT

В вашем случае, окончательный код будет выглядеть так:

var owlContainer = $("#owl-example"); 
owlContainer.owlCarousel(); 
$(".menu-btn").click(function(event) { 
    event.preventDefault(); 
    var target = $($(this).attr('href')); 
    $(".sectionID").removeClass("active"); 
    target.addClass("active"); 
    target.find(".owl-carousel").trigger("refresh.owl.carousel"); 
}); 

Пожалуйста, обратите внимание на ошибку в коде:

Вы инициализировать карусель на .owl-carousel и на его элементы контейнера .slider. Должно быть только одно, догадаться .owl-carousel.

EDIT 2

Для owl-carousel версии , вы можете переинициализации это следующим образом:

target.find(".owl-carousel").data('owlCarousel').reinit(); 

REINIT() метод повторной инициализации плагина

Синтаксис: owldata .reinit (newOptions)

Да! вы можете восстановить плагин с новыми параметрами. Старые параметры будут перезаписаны, если они есть или добавлены, если они новые.

Вы можете легко добавить новый контент с помощью ajax или изменить старые параметры с помощью метода reinit.

More about v1 content manipulations.