не работает плагин owl-carousel

Всем здравствуйте! Нужна помощь. Есть модальное окно (#pop-up), которое появляется при клике на кнопку. И есть каталог с товарами (только картинки и название товара). Идея такова: нажимаешь на область около картинки товара, появляется модальное окно с его описанием. Я хочу, чтобы была возможность перелистывания описания товаров (т.е. когда появилось модальное окно, чтобы было стрелки переключения товаров и чтобы, когда кликаешь на любой див с картинкой товара, было понятно, какую информацию показывать).

<div id="pop-up">
        <div class="owl-carousel owl-theme slide-two">
<div class="prod">
        <span class="product-title">Хлебцы острые с перцем</span>
        <div class="product-description">
            <span class="product-benefit">
    Мы разработали для Вас «Хлебцы Острые» с перцем, которые используют свойство перца стимулировать выработку эндорфинов – «гормонов счастья», повышающих общий уровень иммунитета человека!
            </span>
        <span class="composition">Состав: пшеница, паприка, перец красный, кориандр, морская соль.</span>
        <span class="nutritional-value">Пищевая ценность на 100 г: белки – 12,0 г; жиры – 1,5 г; углеводы – 72,0 г.
Энергетическая ценность в 100 г – 352 Ккал.</span>
        <span class="product-weight">Вес нетто: 65 г.</span>
        <span class="expiry-date">Срок годности: 9 мес.</span>
    </div>
        <div class="img-opis">
            <img src="assets/products/1.png" class="image-opis">
        </div>
    </div>
    <div class="prod">
        <span class="product-title">Хлебцы зерновые с тмином</span>
        <div class="product-description">
            <span class="product-benefit">  
    Хлебцы Зерновые с тмином имеют сбалансированный вкус. Не забывайте о пользе витаминов и минеральных веществ так необходимых вашему организму. Мы используем только натуральные ингредиенты, поэтому наша продукция подходит для ежедневного употребления.
            </span>
        <span class="composition">Состав: пшеница, хлопья овсяные, крупа кукурузная, тмин, морская соль.</span>
        <span class="nutritional-value">Пищевая ценность на 100 г: белки – 14,0 г; жиры – 4,0 г; углеводы – 74,0 г.
Энергетическая ценность в 100 г – 405 Ккал.</span>
        <span class="product-weight">Вес нетто: 65 г.</span>
        <span class="expiry-date">Срок годности: 9 мес.</span>
    </div>
        <div class="img-opis">
            <img src="assets/products/2.jpg" class="image-opis">
        </div>
    </div>
</div>
</div>

#pop-up {
    display: none;
    width:80%;
    height: 70%;
    overflow:hidden;
    position:fixed;
    top:20%;
    left: 15%;
    padding: 27px;
    background-color: white;
    margin: 40px auto 0px auto;
    border-radius: 5px;
    }
.prod {
  font-size:24px;
  display: flex;
}
.product-description {
  flex:2;
}
.product-title {
  align-self:center;
  flex:1;
}
.img-opis {
  flex:1;
}
.image-opis {
    height: 400px;
}

$('.item-box').click(function () { 
    $('#pop-up').show();
    $(".slide-two").owlCarousel({
        item:1,
        nav:true,   
    });
    $("#all").css({"background":"rgba(0,0,0,0.5)", "z-index":15000});
    $("#pop-up").css("z-index",3000000);
});

где item-box - блок с картинкой и названием товара. Если убрать div class="owl-carousel owl-theme slide-two" и описание второго товара,то описание отображается корректно.

когда добавляю див со слайдером и описание второго товара, вид такой:

Карусель не работает. Помогите пожалуйста разобраться, в чем проблема??