Hello everybody! Help is needed. There is a modal window (# pop-up) that appears when you click a button. And there is a catalog with the goods (only pictures and the name of the goods). The idea is this: you click on the area around the product image, a modal window appears with a description of it. I want to be able to scroll through the description of goods (i.e., when a modal window appears, so that there are arrows to switch products and so that when you click on any div with a product picture, it is clear what information to show).

<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); });

where item-box is a block with a picture and product name. If you remove the div class = "owl-carousel owl-theme slide-two" and the description of the second product, the description is displayed correctly. enter image description here

When I add a div with a slider and a description of the second product, the view is: enter image description here

Carousel does not work. Please help me figure out what the problem ??

    1 answer 1

    Add 100% width to .prod should help.

    • unfortunately it did not help (( - prolina
    • Change the library to flickity. It is more convenient for me - Vladislav Moshikov
    • Changed :) Immediately the sliders began to work! Thank! Only now the infa is displayed in the wrong way (Everything was ok without the library - prolina
    • And please tell me how to make it so that when you click on a block with a product, it was clear what product description to show, and not the first, how it is implemented now. $('.item-box').click(function () { $('#pop-up').show(); $("#pop-up").css("z-index",3000000); $('.main-gallery').flickity({ cellAlign: 'left', contain: true, wrapAround: true, }); $("#all").css({"background":"rgba(0,0,0,0.5)", "z-index":15000}); }); where # pop-up is a modal window with product info, .item-box is a block with a product - prolina
    • I think it is worth storing info about the product in the .item-box attributes or having unique pop-up for each product - Vladislav Moshikov