Плагин 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

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

Новые блоги и статьи Все статьи Все блоги /
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизита табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать контроль заполнения реквизита "ПричинаСписания". . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .
Вывод данных в справочнике через динамический список Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Программное заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .

@sad67man 2604 / 1508 / 689 Регистрация: 23.08.2015 Сообщений: 3,839
	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 2604 / 1508 / 689 Регистрация: 23.08.2015 Сообщений: 3,839
	26.08.2018, 21:15
	prolina, Так сложно сказать, надо смотреть, покажите хотя бы скрин, что у вас куда там наложилось. А еще лучше ссылку на сайт. 0

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

@sad67man 2604 / 1508 / 689 Регистрация: 23.08.2015 Сообщений: 3,839
	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