Owl Carousel — Вертикальное выравнивание слайдера навигации — HTML и CSS — Форумы SitePoint
Shoxt3r
#1
Привет,
В настоящее время возникают проблемы с выравниванием кнопок ползунка по вертикали на Owl Carousel, так что когда ползунок реагирует, стрелки остаются в вертикальном центре. Я установил некоторый CSS для элемента «.owl-controls.clickable», чтобы он располагал контейнер кнопок на 32% сверху, но, конечно же, это должно быть 50%, чтобы он оставался согласованным через каждую точку останова?
Пожалуйста, кто-нибудь может посоветовать?
Пожалуйста, найдите мой текущий код вместе со ссылками.
en_mobile-delivery-banner.zip (50,2 КБ)
Ура,
Андрей
PaulOB
#2
Стрелки имеют высоту 38 пикселей, поэтому вертикальный центр будет верхним: 50% минус 19 пикселей.
напр.
owl-controls.clickable {
положение: абсолютное;
верх: 50%;
слева: 0;
дисплей: блок;
ширина: 100%;
поле сверху: -19пкс;
}
Shoxt3r
#3
Привет Пол,
Ах, отлично, спасибо за ответ — не подумал использовать поле, чтобы изменить его положение после установки вершины, дох!
Является ли это общепринятым или считается плохой практикой?
Раньше я не использовал этот метод, так как он требует обслуживания, если стрелки меняют размер, но не могу придумать подходящей альтернативы?
Ура,
Эндрю
ПолОБ
#4
Shoxt3r:
Раньше я не использовал этот метод, так как он требует обслуживания, если стрелки изменят размер,
Вам все равно нужно изменить размер кода для стрелки, не так ли, так что я не вижу особых усилий. Если вы хотите автоматическое выравнивание, вам нужно использовать flexbox или display:table-cell внутри абсолютного элемента.
Вы также можете легко центрировать, если у вас есть фиксированная высота.
напр.
.owl-controls.clickable {
положение: абсолютное;
верх:0;
дно:0;
поля:авто;
высота: 30 пикселей;
слева: 0;
дисплей: блок;
ширина: 100%;
}
Shoxt3r:
Является ли это общепринятым или считается плохой практикой?
Это нормально, когда это не «магическое число», потому что вы работаете с элементом фиксированной высоты.
Отрицательные поля — это плохо, когда вы используете их только для того, чтобы все выровнялось в зависимости от угаданного размера. Для чего-то вроде стрелы это нормально, но не для коробки с жидким содержимым.
Конечно, автоматический всегда лучше, и если вы вложили полноразмерный элемент display:table и элемент table-cell в свой абсолютный элемент, вы можете просто использовать vertical-align:middle.
Или действительно используйте flexbox, хотя опять же, вероятно, потребуется изменить структуру.
Самым простым решением в этом случае является отрицательное поле или пример автоматического поля с фиксированной высотой (фрагмент выше).
Shoxt3r
#5
Отлично, спасибо за отзыв, Павел, очень признателен!
1 Нравится
система закрыто
#6
Эта тема была автоматически закрыта через 91 день после последнего ответа. Новые ответы больше не допускаются.
10+ Top Angular Carousel Components [2022]
Вот список, содержащий, по нашему мнению, лучших угловых каруселей . Если вы ищете карусель, мы вам поможем!
Ваш браузер не поддерживает видео тег.
fullPage.js для Angular, безусловно, лучшая полноэкранная карусель. Компонент fullPage.js с более чем 7-летней историей и более чем 32 тысячами звезд на GitHub является лидером в своем роде . (Используется BBC, Dreamworks и многими другими крупными компаниями.)
Полностью настраиваемый с более чем 50 параметрами и множеством обратных вызовов и методов, которые обеспечат вам плавную разработку. Поддерживается как вертикальная, так и горизонтальная прокрутка.
Что отличает fullPage.
js от других каруселей, так это то, что он создает захватывающий полноэкранный режим. Прокрутка вверх или вниз приведет к переходу к следующему разделу, что сделает навигацию легкой и приятной для посетителя.
Идеально подходит для рассказывания историй, маркетинга и веб-сайтов с красивыми визуальными элементами.
Посмотреть демо
Slick — популярный плагин jQuery и WordPress, и благодаря третьему лицу он теперь портирован на Angular.
Это простой компонент для создания базовой карусели. Если вы ищете более традиционную карусель, Slick может быть для вас.
Он также включает в себя эффект затухания и некоторые необычные функции, такие как синхронизация каруселей.
Один из основных недостатков, которые я вижу, заключается в том, что он по-прежнему требует jQuery в качестве зависимости.
Ваш браузер не поддерживает видео тег.
Keep Slider родился в 2020 году как независимый сенсорный слайдер без зависимостей и с хуками для функций React и Composition для Vue 3.
Однако его все еще можно использовать непосредственно в Angular, и фактически все его примеры доступны и для Angular. .
Разработанная Владимиром Харлампиди, Swiper является хорошо известной каруселью, и не зря.
Swiper поставляется с большим количеством настраиваемых параметров. Для некоторых это может быть немного ошеломляющим, но если вы хотите полностью контролировать свою карусель, это может быть для вас.
Он также поставляется с расширенными функциями, такими как многострочные макеты слайдов, виртуальные слайды или двустороннее управление.
Обертка Angular для Owl Carousel.
Некоторым он может показаться немного устаревшим, поскольку он по-прежнему основан на старой доброй библиотеке jQuery. Но если это не проблема для вас, карусель Owl — абсолютно правильное решение.
Он поставляется со всеми основными функциями, которые вы ожидаете: адаптивные параметры, хеширование URL-адресов, автозапуск, отложенная загрузка и поддержка перетаскивания.
Ваш браузер не поддерживает видео тег.
Если вы хотите создать галерею с изображениями и их миниатюрами, вам может подойти ngx-angular.
Статья по теме: что такое ползунок?.
Эта карусель Angular была разработана с единственной целью: быть галереей изображений. Таким образом, у него есть несколько преимуществ, таких как решение очень специфических проблем и упрощение использования для создания галерей.
Документация находится на Github, но вы также можете найти множество примеров на его веб-сайте.
Ваш браузер не поддерживает видео тег.
Как следует из названия компонента npm (angular-responsive-carousel), этот компонент уделяет особое внимание упрощению создания адаптивных каруселей.
Если вам нужна адаптивная карусель, эта карусель может вам подойти. Кроме того, он также предоставляет ожидаемые функции, такие как отложенная загрузка, поддержка сенсорного ввода, свободная прокрутка, автовоспроизведение, навигация по маркерам, стрелки и т.
Я бы сказал, что это более простой компонент, чем другие, но прекрасно работающее решение для многих сценарии.
Ваш браузер не поддерживает видео тег.
Очень похожая на npx-angular, эта карусель является альтернативой, если вы планируете создать галерею изображений.
В отличие от других каруселей, ngx-gallery поддерживает полноэкранную визуализацию изображений. И, хотя он поддерживает обычное скольжение для переключения между изображениями, он также поддерживает анимацию затухания, вращения и масштабирования.
Кажется, я не поддерживаю перетаскивание мышью, а сенсорная поддержка намного проще, чем в других каруселях.
Ваш браузер не поддерживает видео тег.
Рекламируемая как «Угловая универсальная карусель», эта карусель пытается сделать вещи как можно более простыми и агностическими.
Он не включает CSS, так что вам придется иметь дело со всеми стилями. Для многих это наверняка будет отказом, но, возможно, освобождением для других, все зависит от того, какую проблему вы пытаетесь решить.