Плагин owl-carousel

@prolina · Регистрация: 11.05.2018

Студворк — интернет-сервис помощи студентам

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

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div id="pop-up">
        <div class="owl-carousel owl-theme slide-two"> // 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/1.png" class="image-opis">
        </div>
    </div>
    </div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 #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;
    }
.image-opis {
    height: 339px;
    margin-left: 10px;
    }
.img-opis {
    position: absolute;
    bottom: 0;
    top: 82px;
}
 
.product-description {
    position: absolute;
    top: 82px;
    left: 260px;
    right: 0;
    bottom: 0;
}

JavaScript
1
2
3
4
5
6
7
8
9
$('.item-box').click(function () { 
    $('#pop-up').show();
    $(".slide-two").owlCarousel({
        autoplay:false,
        nav:true
    });
    $("#all").css({"background":"rgba(0,0,0,0.5)", "z-index":15000});
    $("#pop-up").css("z-index",3000000);
});

Подскажите пожалуйста, что сделать, чтобы плагин работал корректно? Сейчас показывает просто окошко с содержимым: <span class="product-title"></span>
Еще хотелось бы сделать так, чтобы было понятно, какую информацию показывать при нажатии на любой товар и чтобы перелистывание товаров при поп-апе работало, как надо.

@sad67man · 26.08.2018, 19:41

prolina, Показывает только заголовок из-за position: absolute; у .product-description и .img-opis Которые не влияют на высоту блока prod.
Нужно либо фиксировать высоту блока prod, либо переверстать не используя position: absolute;

@prolina · 26.08.2018, 20:21 **[ТС]**

sad67man, зафиксировала высоту блока prod. Но сам поп-ап показывает информацию некорректно( Информация о первом товаре наложилась на информацию о втором товаре. Плагин всё так же не работает. В чем может быть проблема?

@sad67man · 26.08.2018, 21:15

prolina, Так сложно сказать, надо смотреть, покажите хотя бы скрин, что у вас куда там наложилось. А еще лучше ссылку на сайт.

@prolina · 26.08.2018, 21:31 **[ТС]**

sad67man, сайт это громко сказано)) я пока только учусь, прикреплю скрин

@sad67man · 26.08.2018, 22:08

prolina, Вообще дам совет, старайтесь избегать position: absolute, используйте только при крайней необходимости.
Ну тут проблема не в карусели. Просто картинки слишком большие, а так как у них position: absolute они налезают на другие элементы. В любом случае вам нужно указать размеры картинок в css, хотя-бы максимальную ширину.

@prolina · 27.08.2018, 13:52 **[ТС]**

sad67man , кроме абсолютного позиционирования, не возникло больше идей, как разместить элементы( чтобы слева была картинка, а справа от нее описание.
Если закомментить код, где идет описание товаров, а оставить описание одного товара, то поп-ап отображается корректно с абсолютным позиционированием.
Подскажите пожалуйста, как по-другому можно разместить элементы?

@galawar · 28.08.2018, 22:23

Сообщение от prolina

кроме абсолютного позиционирования, не возникло больше идей, как разместить элементы

для таких вещей есть flexbox - https://developer.mozilla.org/... ut/Flexbox

@prolina · 29.08.2018, 19:35 **[ТС]**

galawar , почитала про флексбокс. Пытаюсь сделать, не получается снова(

делаю

CSS
1
2
.prod {
    display: flex;}

, почему-то все дочерние элементы занимают не всю ширину контента и получается так, как отображено в прикрепленном файле.
если задавать ширину в процентах для

HTML5
1
.product-description, .img-opis, .product-title

, тогда отображается всё вполне себе нормально, но карусель всё равно не работает. Подскажите пожалуйста, в чем еще могут быть проблемы???

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,814
	26.08.2018, 19:41
	prolina, Показывает только заголовок из-за position: absolute; у .product-description и .img-opis Которые не влияют на высоту блока prod. Нужно либо фиксировать высоту блока prod, либо переверстать не используя position: absolute; 0

@prolina 0 / 0 / 0 Регистрация: 11.05.2018 Сообщений: 23
	26.08.2018, 20:21 [ТС]
	sad67man, зафиксировала высоту блока prod. Но сам поп-ап показывает информацию некорректно( Информация о первом товаре наложилась на информацию о втором товаре. Плагин всё так же не работает. В чем может быть проблема? 0

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,814
	26.08.2018, 21:15
	prolina, Так сложно сказать, надо смотреть, покажите хотя бы скрин, что у вас куда там наложилось. А еще лучше ссылку на сайт. 0

@prolina 0 / 0 / 0 Регистрация: 11.05.2018 Сообщений: 23
	26.08.2018, 21:31 [ТС]
	sad67man, сайт это громко сказано)) я пока только учусь, прикреплю скрин Миниатюры 0

@sad67man 2603 / 1507 / 689 Регистрация: 23.08.2015 Сообщений: 3,814
	26.08.2018, 22:08
	prolina, Вообще дам совет, старайтесь избегать position: absolute, используйте только при крайней необходимости. Ну тут проблема не в карусели. Просто картинки слишком большие, а так как у них position: absolute они налезают на другие элементы. В любом случае вам нужно указать размеры картинок в css, хотя-бы максимальную ширину. 0

@prolina 0 / 0 / 0 Регистрация: 11.05.2018 Сообщений: 23
	27.08.2018, 13:52 [ТС]
	sad67man , кроме абсолютного позиционирования, не возникло больше идей, как разместить элементы( чтобы слева была картинка, а справа от нее описание. Если закомментить код, где идет описание товаров, а оставить описание одного товара, то поп-ап отображается корректно с абсолютным позиционированием. Подскажите пожалуйста, как по-другому можно разместить элементы? 0