0

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

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

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

1 ответ 1

0

Добавь в .prod ширину в 100%, должно помочь.

10
  • к сожалению, не помогло((
    – prolina
    31 авг 2018 в 18:42
  • Поменяй библиотеку на flickity. Она удобнее как по мне 1 сен 2018 в 7:31
  • Поменяла :) Сразу слайдеры начала работать! Спасибо! Только вот отображается инфа не так, как следует( Без библиотеки было всё ок
    – prolina
    2 сен 2018 в 10:56
  • А подскажите пожалуйста, как сделать, чтобы при клике на блок с товаром, было понятно описание какого именно товара показывать, а не первого, как это реализовано сейчас. $('.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}); }); где #pop-up - модальное окно с инфой о товаре, .item-box - блок с товаром
    – prolina
    2 сен 2018 в 14:27
  • Я думаю, что стоит хранить инфу о товаре в атрибутах .item-box или иметь уникальные pop-up под каждый товар 2 сен 2018 в 14:36

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.