Как на owlCarousel реализовать слайдер с центральным элементом, который больше остальных?

CSS JavaScript Owl Carousel

1 ответ

Возможен ли на owlCarousel такой вариант слайдера, при котором основной элемент будет в центре, предыдущий и следующий - по бокам и чуть меньше (и выходить за край экрана), а остальные - за краем экрана, то есть, не отображаемые? Если кто знает, пришлите ссылку - у них на сайте в примерах не нашел.

Я пишу следующий код:

.owl-carousel { 	width: calc(100% + 500px); 	margin-left: -250px; } .owl-item { 	transform: scale(0.7); } .owl-item.center { 	transform: scale(1); 	z-index: 999; }

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

А нужно, чтобы они располагались прямо за ним. Напрашивается масштабирование центрального элемента (например, "scale(2)"), но в этом случае он начнет обрезаться по высоте, так как у контейнера "owl-carousel" стоит "overflow: hidden".

Если в owlCarousel такого сделать нельзя, подскажите библиотеку, в которой можно - такую же легкую, как и эта, то есть, без наворотов.

Дополнительно:

подскажите библиотеку, в которой можно - такую же легкую, как и эта, то есть, без наворотов.

https://swiperjs.com/demos
https://swiperjs.com/plugins

https://carousel-slider.uiinitiative.com/
https://triple-slider.uiinitiative.com/

Спасибо. Уточню, что желаемого эффекта можно достичь по этому примеру:
https://codesandbox.io/p/sandbox/m335mr?file=%2Fin...

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Ольга Сеть Ответ

Для того чтобы реализовать слайдер с центральным элементом, который будет больше остальных, можно воспользоваться параметром `center` в настройках плагина Owl Carousel.

Прежде всего, убедитесь, что у вас установлен и подключен плагин Owl Carousel на вашем сайте. Затем создайте контейнер для слайдера и добавьте в него необходимое количество элементов, которые будут слайдами.

Далее, инициализируйте слайдер с помощью JavaScript кода, указав параметр `center: true`. Этот параметр позволит центрировать элементы слайдера и увеличивать центральный элемент.

Пример кода инициализации слайдера с центральным элементом:

$('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    center: true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
});

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

Надеюсь, это решение поможет вам реализовать слайдер с центральным элементом на вашем сайте с использованием Owl Carousel. Если у вас возникнут дополнительные вопросы, не стесняйтесь задавать их.

Другие ответы (0)

Пока нет других ответов. Будьте первым, кто поможет автору.

Ответить на вопрос

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ code-review Нужен ли код-ревью React/TypeScript проекта? 1 ответ

Как на owlCarousel реализовать слайдер с центральным элементом, который больше остальных?

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно