Bootstrap4 Navbar не работает с "jQuery.BgSwitcher" в мобильном телефоне

Question

Так что я использую Bootstrap4 (Bootswatch4, если быть более точным), и мне нужен div с изменяющимся / исчезающим фоном. Я обнаружил, что JS ближе всего к тому, что я хочу: https://github.com/rewish/jquery-bgswitcher Поэтому я использую это так в https://jsfiddle.net/p5d8rskg/:

$(".banana").bgswitcher({
  images: ["image1.jpg", "image2.jpg"],
  interval: 5000,
  duration: 2000
});

Все отлично работает в настольной версии. Но проблема в том, что в мобильной версии навигационная панель перебирает div и выталкивает содержимое div наружу. Как я могу исправить эту "ошибку"? Или есть более простые подходы, чтобы получить тот же эффект, что и с "bgswitcher" без этой "ошибки"?

Спасибо за ваш вклад.

Answer 1

Более хакерское решение, но работоспособное - использовать position: absolute для вашего .banana контейнера. Таким образом, контейнер фиксируется в вашей определенной позиции.

Я обновил вашу скрипку , чтобы показать решение:

nav {
    z-index: 1000 !important;
}

.banana {
    background-color: powderblue;
    height: 400px;
    width: 400px;
    background-size: cover;
    color: white;
    font-size: 30px;
    position: absolute;
    top: 56px;
    left: 0;
}

В основном я добавил position: absolute, а также top: 56px (высота панели навигации) и left: 0, чтобы определить позицию. Чтобы вывести навигационную панель вперед, а не текст, примените к этому элементу больший z-index.

Удачи!