Вопросы с меткой [owl-carousel]

Owl Carousel — jQuery плагин для создания отзывчивого слайдера («карусели»).

Фильтрация
Сортировка
Метки
1 голос
1 ответ
978 показов

Проблема с адаптивностью owl carousel - не растягивается слайды на всю ширину блока

Есть сайт, где в разделе услуги открываются модальные окна с owl carousel. На разрешениях экранов ниже 1200 есть проблемы с адаптивностью: items почему-то не хотят растягиваться на ширину ...
0 голосов
0 ответов
21 показ

Owl Carousel по клику показывает последний слайд

На сайте каталог товаров выводится с помощью Owl Slider. Выводится 4 товара в строчку. Проблема следующая: если нажимать на область в правом нижнем углу (произвольную область), то последний товар ...
0 голосов
1 ответ
2k показов

owl-carousel при изменении размера начинают отображаться все итемы,и карусель не работает

Доброго времени суток. Установил owl-carousel,опыт работы с этим плагином сводился к парочке раз.Но без проблем.В этот раз столкнулся с проблемой такого характера : При изменении размера страницы ...
0 голосов
2 ответа
838 показов

Уменьшить количество точек (owl-dots) в карусели Owl-Carousel

Столкнулся с такой необходимостью, когда нужно, чтобы количество отображаемых точек (owl-dots) под слайдером была меньше, чем количество слайдов в карусели. Например, слайдов у меня 8, но нужно, чтобы ...
0 голосов
1 ответ
2k показов

Как сделать плавное появление текста внутри блока?

Как сделать так, чтобы текст внутри оранжевого блока с белой стрелкой плавно появлялся текст и при этом стрелка в состоянии покоя находилась в центре блока, а когда появляется текст плавно смещалась ...
0 голосов
2 ответа
774 показа

Как поставить vue-owl-carousel в nuxt.js?

Сделал все по инструкции import Carousel from 'vue-owl-carousel' сomponents: { Carousel } В итоге ошибка компонент не найден Нигде не могу найти нужную информацию, как это реализовать? Заранее ...
0 голосов
1 ответ
33 показа

Как сделать чтобы слайдер работал корректно (React + OwlCarousel)?

Ребята подскажите, на мультиязычной (2 языка) странице есть компонент, в виде слайдера (OwlCarousel). На каждом слайде есть текст. В компонент залетает переменная locale через props. При инициализации ...
5 голосов
2 ответа
374 показа

OwlCarousel2. Центрирование thumbnails по клику при loop: true

Есть две owl-карусельки: превьюшная и основная. Они синхронизированы. Обе карусели имеют loop: true. Не получается заставить превьюшный слайдер центрировать owl-item-s по клику на них. Что я делаю не ...
0 голосов
0 ответов
23 показа

Проблема в адаптации карусели

В обычном состоянии карусель выглядит примерно так. Делала при помощи Owl Carousel: Должно выглядеть так: При рзрешении > 900 кнопки вылазят за контейнер и "выдавливают" картинки хотя ...
0 голосов
0 ответов
27 показов

Отслеживать дата-атрибут элемента OwlCarousel, на основе его значения менять класс другого элемента

у меня есть слайдер OwlCarousel, нужно отслеживать значение дата-атрибута элемента слайдера div.slider__item и присваивать на основе значения дата-атрибута - класс другому элементу (к div....
0 голосов
1 ответ
42 показа

задать owl-dots отдельному блоку

Нужно задать owl-dots отдельному диву <div class="catalog-burgers owl-carousel owl-theme"> <div class="burger-block"> <img src="...
0 голосов
1 ответ
563 показа

при подключении owl carousel 2 ничего не отображается

подключаю локально карусель, но не отображается совсем ничего. HTML,к которому подключается карусель я получаю из js файла, но если html написать напрямую, то есть не из js файла, то все работает, ...
0 голосов
1 ответ
633 показа

Owl-carousel на нужном разрешении

Использую owl-carousel в двух секциях. В первой секции слайдер идёт на всех разрешениях. А во второй секции слайдер должен включаться только на разрешениях меньше 700px. Как это можно реализовать? $(...
0 голосов
0 ответов
37 показов

Слайдер задерживает загрузку страницы

Я разработал сайт с большим количеством слайдеров owlCarousel. Заметил, что в процессе загрузки главной страницы, слайдер в третьем секшене задерживает показ остального контента. www.instale.co.il ...
0 голосов
0 ответов
75 показов

Вертикальная обрезка блока owl carousel

Проблема в вертикальном обрезании блока внутри класса owl-carousel, из-за этого не видно box-shadow, да и вообще блок странно себя ведёт. Использую в связке с bootstrap 5 На изображении, выше ...
0 голосов
1 ответ
83 показа

Как сделать последний слайд OWL или Slick другой шириной?

подскажите каким образом можно задать что бы последний слайд всегда был больше по ширине, owl или slick использовал, но везде есть только отцетровка, так же отлавливал последний активный слайд и ...
2 голоса
1 ответ
452 показа

Как сделать circle progress bar на owl-carousel?

Вообщем есть слайдер на owl-carousel 2, нужно сделать чтобы было так take.ms/L2Y7C тоесть dots а вокруг них крутится progress bar и снизу просто показывать какой из слайдов активен сейчас, уже 2 дня ...
2 голоса
1 ответ
66 показов

Неработающий слайдер owl carousel 2

См. Вывод картинок анонсов инфоблоков в слайдере. После внесения изменений, предложенных u_mulder и ВикторКарев, а также собственных изменений, получил следующий вывод Подскажите как добиться вывода ...
3 голоса
1 ответ
325 показов

Посадка на Bitrix owl слайдера. Создание инфоблока

Создал тип инфоблока - Слайдер на битриксе и сам инфоблок - слайдер, который включает в себя фоновое изображение слайда (картинка анонса инфоблока слайдер), имя слайда, фотографию автора слайда (...
2 голоса
0 ответов
53 показа

Значение dots в owl carousel

Скачал шаблон сайта с W3layouts templates Есть слайдер, сделанный с помощью owl carousel. Каким образом можно сделать dots для owl-carousel в виде прямоугольника (как на скриншоте)?
1 голос
0 ответов
15 показов

Путь к подключаемым файлам из owl carousel 2

Скачал Owl Carousel . На Инcтрукция по использования Owl Carousel написано, что нужно подключать файлы owl.carousel.css и owl.theme.default.css. Из какой папки скачанного архива с Owl Carousel нужно ...
2 голоса
1 ответ
1k показов

Как подключить owl-carousel в npm проект?

Всем привет не давно захотелось использовать owl-carousel но подключить никак не смог его через npm webpack. В оффициальном сайте npm написано Add jQuery via the "webpack.ProvidePlugin" to your ...
1 голос
1 ответ
345 показов

Как картинки в фотокарусели уравнять по высоте и зумировать поверх соседних блоков?

Есть owl карусель с картинками, которые могут слегка различаться размерами. Как сделать так, чтобы картинки отображались одиноковой высоты (без белых отступов), причем при зумировании не прятались ...
0 голосов
0 ответов
163 показа

Создать бесконечную карусель Owl Carousel, расположение файлов в JS в WordPress

Есть страница на WordPress с каруселью на главной странице. Нужно сделать бесконечную карусель, когда прокрутка дойдет до конца, в следующем свайпе будет снова первый элемент. Пробовала менять ...
0 голосов
1 ответ
148 показов

Как у потомка убрать внешние отступы родителя?

Есть слайдер .gallery-slider сделанный с помощью owl-carousel. Этот слайдер заключен в блоке-обертке .wrapper c соответствующими отступами, но для того, чтобы мне добиться результата, как в макете, ...
0 голосов
2 ответа
72 показа

(OwlCarousel) Точки скрыты [закрыт]

Проблема заключается в том, что на сайте почему-то точки под слайдом не работают, хотя в коде они активированы. Самое интересное, что точки на странице существуют, но подписаны под классом owl-dots ...
0 голосов
2 ответа
2k показов

Здраствуйте! Использую Owl-carousel 2, но она вылазит за блок

<div class="technologies"><!-- Блок родитель --> <div class="white-block"></div> <div class="tech-icon"></div> <div class="slider-...
0 голосов
1 ответ
561 показ

Настройка анимации (animateOut: animateIn:) при нажатии кнопок Owl Carousel 2

Всем хай:) Сегодня решил попробовать Owl Carousel. Он мне приглянулся из-за того, что при перелистывании слайдеров, можно подключать свою анимацию. Но возникли проблемы динамического изменения ...
0 голосов
0 ответов
47 показов

vue-owl-carousel2 не работает responsive

Имеется код: <template> <slider class='slider' :items='8' :responsive='{0:{items:1}, 600:{items:3}}' > <div class='slider__image' v-for='(image, index) in images' :key='...
0 голосов
1 ответ
282 показа

Как сделать блок одиинаковой высоты с другими блоками?

Я использую owl-carousel и мне нужно сделать так, чтобы все owl-item были одинаковый высоты, но один из блоков не поддается. Как прировнять его к высоты всех блоков, но чтобы он не опускался ниже ...
1 голос
1 ответ
674 показа

Owl carousel не работает

не могу подключить две разные карусели.Первый подключается как надо и работает нормально, но когда хочу подключить второй карусель параметры берет из первого,когда меняю класс все разрушается.как ...
0 голосов
1 ответ
27 показов

Как подвинуть стрелку в owl-carousel?

Хочу выровнять стрелку навигации, но не получается к ней обратиться. Пишет, что в owl-next стрелка именуется элементом #text, но при обращении к этому элементу не происходит ничего. Как это исправить? ...
0 голосов
1 ответ
73 показа

Как задать z-index элементу в Owl-carousel?

Хочу изменить z-index стрелок, чтобы при наведении они выходили вперед на фоне градиента, но не могу понять как это сделать. В .owl-prev и .owl-next стрелка обозначена элементом с id='text', но при ...
-1 голос
1 ответ
21 показ

Как найти, из какого файла индексируется owl-carousel?

На сайт выводится owl-carousel, её нужно править, а найти где она не получается. Пользуюсь phpStorm, с сайтом работаю через ftp сервер.
1 голос
1 ответ
399 показов

Не работает owl-carousel при натягивании на wordpress

Сверстал сайт с каруселью owl-carousel. На оригинальном файле html всё работает более чем, но при переносе на wordpress карусели просто нет. Подключил все нужные css и script через function.php, но ...
1 голос
0 ответов
56 показов

Почему картинки в блоке с owl-carousel отображаются неверно?

Как сделать так, чтобы картинки в блоке в галереей отображались по одной и при этом не растягивались? У меня они почему-то показываются все. Пробовал задавать owl-item=100%, но это не помогает. PS ...
0 голосов
1 ответ
731 показ

Как сделать активный центральный слайд в Owl Carousel 2 большего размера, чем остальные

На сайте есть некоторая Owl Carousel 2. HTML: <div class="owl-carousel owl-theme"> <div><img src="images/full_pic_1.png" alt="picture"/></div>...
0 голосов
1 ответ
25 показов

JS. Owl-carousel. Как отследить что дальше нет слайдов?

Некоторая моя логика завязана на function callback(event) { if (event.relatedTarget['_drag']['direction'] === "left") { curPage++; } else { curPage--; ...
1 голос
1 ответ
176 показов

Почему в слайдере owl-carousel вылазит кусок другой картинки?

При первоначальном запуске сайта, в слайдере немного показывается часть другой картинки, но когда я захожу в меню отладки и обратно, то этот глюк пропадает. Данный блок называется stucco-gal сам сайт ...
0 голосов
1 ответ
1k показов

Как поместить картинку в блок, чтобы она не обрезалась?

Есть блок stucco-gal, который занимает 50% ширины экрана. Внутри этого блока находится блок owl-carousel, в котором располагаются блоки-слайдеры с фотографиями. Каждый блок-слайдер представляет собой ...
0 голосов
0 ответов
83 показа

Реализация слайдера на Wordpress

Всем привет, у меня вопрос, какие идеи по реализации Слайдер на Wordpress существуют. Заказчик попросил реализовать слайдер на главной странице. На сайте используется всего 2 плагина: WP Multilang ...
1 голос
0 ответов
42 показа

Количество слайдов OwlCarousel 2

Столкнулся со следующей проблемой: в слайдере OwlCarousel 2 при разрешении 1920 на 1080 пикселей не отображается необходимое количество слайдов, а именно 4, то есть 3 слайда отображаются полностью, а ...
1 голос
1 ответ
66 показов

Чем открыть файл owl?

Мне отправили файл с кодом расширения .owl У отправителя нет возможности спросить, ничего лучше не придумал, чем спросить здесь... Так вот, какой программой открыть и запустить код в файле с ...
0 голосов
0 ответов
49 показов

Почему проваливается картинка при задании в vh и %?

Почему, когда я у .img задаю width: 100vh, тумбочка проваливается в изображении? А когда в процентах - width: 100% - то все нормально? Но, если оставить в процентах, то тогда картинка обрезается на ...
1 голос
0 ответов
402 показа

Блок с текстом и кнопками навигации поверх слайда в owl-carousel

Снизу был неясный отступ, но потом выяснилось, что это .owl-nav (зеленый) и .owl-dots (красный) (я специально для видимости пометил их цветами). Так же не ясно, как вывести текст с кнопкой поверх ...
0 голосов
0 ответов
214 показов

Не работает синхронизация двух слайдеров OWL Carousel, если число слайдов не кратно числу слайдов во второй карусели

Некорректно работает синхронизация двух слайдеров на OWL Carousel, если число слайдов не кратно числу слайдов во второй карусели. Количество слайдов во второй карусели всегда кратно 5. И когда ...
0 голосов
1 ответ
476 показов

Как отследить события в Owl Carousel

Я хочу повесить событие следующего типа, когда меняется активный Item то из Активного брать текст и помещать в блок Вот мой код $('#section_home_carousel').on('changed.owl.carousel', function(event) { ...
1 голос
1 ответ
77 показов

Owl Carousel 2 - слайдер не реагирует на переключение

Установил слайдер от owl на laravel 7. Подключил все скачав source файлы. На сайте сейчас добавлено три слайда, над самим слайдером выводятся кнопки-переключашки с именами каждого слайда Добавил код ...
0 голосов
2 ответа
416 показов

Размытый текст в салайдере owl-carousel

На некоторых разрешениях(возможно нет) в Chrome текст на слайдере размытый текст. На ноутбуке первый слайдер текст нормальный, другие размытые. Очень хорошо заметна разница с Mozilla. Открываем сайт в ...
0 голосов
1 ответ
161 показ

Как на всех мобильниках отключить свойство autoplay?

Пробовал через .trigger отключать при проверке на разрешение <768px, но всё равно не хочет работать почему то (.owl-car-first и .owl-car-second) это слайдеры-owl. var owlfirst = $(".owl-car-...