Город МОСКОВСКИЙ
00:05:31

How to fix box shadow on items in owl carousel being cut off

Аватар
Оптимизация CSS
Просмотры:
25
Дата загрузки:
26.11.2023 06:10
Длительность:
00:05:31
Категория:
Технологии и интернет

Описание

If you use the owl carousel library and the website design has box-shadow with items, then the two outermost items will be cut off. Today I will give 1 solution to solve this problem.
- You leave the default CSS property of the owl carousel library
Default is:
.owl-carousel .owl-stage-outer {
overflow: hidden;
}
converted into:
.owl-carousel .owl-stage-outer {
overflow: visible;
}

.block-slider .owl-carousel .owl-stage-outer .owl-item {
opacity: 0;
cursor: none;
pointer-events: none;
visibility: hidden;
}

my config, there are 3 items active:

.block-slider .owl-carousel .owl-stage-outer .owl-item.active {
opacity: 1;
pointer-events: auto;
cursor: pointer;
visibility: visible;
}

.block-slider .owl-carousel .owl-stage-outer .owl-stage {
cursor: none;
pointer-events: none;
}

and in the outermost class:
.block-slider {
overflow: hidden;
}


work perfexctly

Рекомендуемые видео