Всем здравствуйте! Нужна помощь. Есть модальное окно (#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" и описание второго товара,то описание отображается корректно.
когда добавляю див со слайдером и описание второго товара, вид такой:
Карусель не работает. Помогите пожалуйста разобраться, в чем проблема??