Карусель в Zero block на Owl Carousel
ฝัง
- เผยแพร่เมื่อ 20 ส.ค. 2024
- Owl Carousel - один из самых популярных плагинов карусели на jQuery. Если у вас появилась необходимость разместить слайдер на вашем сайте Tilda, то данное решение прекрасно справится с задачей. Ведь в данную карусель вы можете поместить практически любой контент. В этой статье я покажу, как превратить содержимое любого Zero block в слайд карусели.
anku.im/blog/c...
Почему такое нужное видео так трудно найти на просторах Ютуба. Спасибо огромное, Андрей.
Андрей, ёлки-моталки. Я искал такой слайдер почти год. Спасибо большое)
Благодарю за проделанную работу и предоставленную инструкцию с кодом! Лайк и подписка🙏
Спасибо за подробное видео, много важных нюансов
Спасибо тебе за работу!
Очень крутой гайд, спасибо большое 👍🏻
Спасибо огромное, ваше видео очень помогло!!)))
люблю целую обнимаю
Как уменьшить расстояние между слайдами? Офигенный гайд спасибо тебе😎
Добрый день! Нашли решение?
@@evgenii4512 здравстввуйте, нашли решение?
@@evgenii4512 здравстввуйте, нашли решение?
@@EvgeniiaGafurova там в коде есть параметр, его менять надо. Не у компа пока, на память не подскажу название параметра.
@@evgenii4512 параметр 'margin', я его меняю, но расстояние уменьшитьне получается, получается только в сторону увеличения
Кааайф!
Побежала пробовать! Лайк ♥️
Видео супер, спасибо!
Спасибо огромное! Выручил
Не знаете как в консоли исправить ошибку "TypeError: Cannot read properties of undefined (reading 'fn')"
Может конфликт какой с Тильдой? Из-за этой ошибки не работает весь код.
P.S. Решила проблему, не был подключен jQuery (подключается в админке)
Лайк, подписка, все такое )))
Подскажи пожалуйста, как все-таки можно поменять расстояние между слайдами? В коде ставил значения внешнего расстояния от 0 до 50 и все равно они на одинаковом расстоянии?
Вопрос 2:
Листаю до упора вправо и между слайдами 5 и 1 получается свободное окно как бы под еще 1 слайд. Кол-во слайдов в настройках везде правильное.
Надо сделать шейп шириной столько же, сколько ваши слайды
Вставляю в слайды видео с ютуба и когда запускаю оно начинает троиться, т.е в одном окне сразу 3 копии видео воспроизводится
Спасибо за гайд. У меня при изменении respnsive items 1000 в коде с 1 на 3 перестают работать ховеры. Может кто ни будь сталкивался с данной проблемой? Спасибо!
У меня получилось!!! Спасибо!
Спасибо! Миллион лайков!)
Уже несколько вариантов ипользования owl carousel с разных каналов попробовал и каждый раз ломается step-by-step анимация. Она просто перестаёт работать, и народ в интернете тоже на это жалуется. Никто случаем не знает, в чём может быть причина?
Да почему-то не переключаются кнопки слайды(( Очень странно.
Привет! Все получается на десктопе, а вот на мобильной версии в фрейм влезает только огрызок нужного zero блока. При этом размеры блока совпадают с размером фрейма. В чем дело? В коде размеры указал соответствующие. По ширине нормально, а по высоте нет.
А кто-нибудь пробовал добальть вылетающий текст под каджой карточкой по центру?
А как сделать так,чтобы еще степ бай степ анимация работала в слайдере?
Здравствуйте, не могу поменять расстояние между слайдами (не получается его уменьшить, чтобы было совсем небольгое,как у вас). Получается только увеличить, а вот уменьшить нет. Меняю в строке кода значение "margin'. Подскажите, пожалуйста, как исправить?
слайдер работает, но почему только 1 слайд отображается за раз? хотя написано items: 4?
Спасибо, все получилось, правда не совсем понятно, что куда вставлять, если две карусели)
Просто сменить класс карусели
@@user-qq7kc8zm5z я поменяла класс, но все равно вторая галерея сломанная, картинки почему-то тянут откуда-то высоту не ту, что надо.... и получается, что галерея как будто выходит из шейпа, все картинки идут в ряд поверх всех блоков
Отличное видео, но у меня вопрос появился. Во-первых, все блоки в мобильной версии сместились куда-то вправо почему-то. Хотя в редактировании всё четко по контейнеру. Не работает слайдер: кнопки не переключают слайды, а в мобильной версии нижний слайд наезжает на кнопки исходного зеро-блока. Закрыл кнопки шейпом, эта проблема исчезла. Но все равно не работают кнопки. Помогите, пожалуйста!
собрали не правильно. смещение вправо - потому что позиционировали по гриду, а не по окну. в остальном надо смотреть. просто так не работать не может. у меня как-то же работает)))
Спасибо большое! Что делать, если на телефонной версии перед самим слайдером белое пространство?
Ссылку в студию. Я не понимаю что за пространство и чем оно у вас образовано.
Спасибо большое за подбробное описание, все получилось! Подскажите, как сделать так чтобы слайды по боками были меньше и прозрачнее? Нашел такой код - но не знаю куда его вставлять, можете подсказать пожалуйста?
- .maincenterowl .no-js .owl-carousel, .owl-carousel.owl-loaded {
margin-bottom: 20px;
}
.maincenterowl .owl-carousel .item {
transform: scale(.5) translateY(0px);
opacity: .5;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.maincenterowl .owl-carousel .center .item {
transform: scale(1) translateY(0px);
opacity: 1;
}
Center true
А прозрачность пропиши в css
Opacity
а у меня картинки съезжают в мобильной версии. как их выровнять там?
Попробуйте поправить позиционированием содержимого
Ну или разместите область слайдера по центру с шириной 100%, содержимое отцентруйте. По window container
У меня слайды - пнг картинки без фона, но shape размывает все, что находится за ним. Либо же это белый прямоугольник с картинкой внутри (хотя цвет фона удалён в блоке со слайдом, откуда белый?). Не подскажете, в чем может быть причина? 🙏🏽🙏🏽🙏🏽
Отключите LAZY LOAD )))
И ссылку киньте, пишу это всем везде. Я не экстрасенс, без ссылки на страницу не могу определить проблему. Но предполагаю, что просто не отключили lazy load в блоках
настроил, подключил, на 9 зеро-блоков, все работает, но... показует не по 1 или 3 блока, а по принцыпу - сколько влезет на экран, в моем случае 1,5 или 3,5 блоков...как исправить?
Скорее всего неправильно спозиционировали слайды. Позиционирование контента в слайдах должно быть по window container. Скиньте ссылку на страницу, подскажу точнее
@@user-qq7kc8zm5z полазил немного в настройках библиотеки, вроде работает, спасибо!
@@user-rg9rb6oy8b подскажи в чем ошибка была?
@@designatov ошибка в том, что по умолчанию в библиотеке скрипта настройки стоят неправильные. Могу сбросить рабочий код, на сайте работает + адаптивность.
@@user-rg9rb6oy8b Буду безумно благодарен... куда удобно?
Привет Андрей)
Все отлично работает, единственное у меня почему-то на последних двух слайдах не подгружается картинка, что это может быть?
всех слайдов 8, в коде написал 8, из-за чего может быть такая проблема?
Главное текст есть, а вот картингу не подгружает
Lazy load отключите
Возможно ли сделать не бесконечный слайдер ,так чтобы первым на экране показывался второй слайд (например их 3 и можно только 1 раз влево и 1 раз вправо переместить их)
прописал старт позишн в код, решил
@@user-bu5tk7zu5e и убери loop
@@user-qq7kc8zm5z это да,но теперь проблема с тем что я хочу чтобы стрелочка пропала в крайнем положении
@@user-bu5tk7zu5e тогда вам надо делать не свои стрелочки, а стандартные, стилизовать их через CSS. А чтобы она пропала - руководствоваться документацией плагина owl carousel
Не работает😔
Друзья, возможно вы столкнулись с проблемой некорректной работы модификаций и мы рекомендуем включить поддержку библиотеки jQuery в настройках сайта:
1⃣ Настройки сайта > Еще > Подключить jQuery на страницах сайта.
2⃣ Сбросить кэш опубликованной страницы , на которой установлены модификации.
3⃣ Далее необходимо переопуликовать все страницы сайта.
так лайк, но что-то не вышло
через пару минут все нашел,все свои промахи))