css flickity响应图像
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了css flickity响应图像相关的知识,希望对你有一定的参考价值。
.main-carousel {
height: 100%;
width: 100%;
}
.flickity-viewport {
height: 100%;
}
.main-carousel .carousel-cell {
height: auto;
width: 100%;
}
.main-carousel .carousel-cell img {
height: auto;
width: 100%;
}
.flickity-page-dots {
bottom: 5px;
}
.flickity-page-dots .dot{
background: #000;
opacity: .4;
}
.main-carousel .carousel-caption {
top: 30%;
right: 0;
left: 0;
width: 100%;
font-size: 2rem;
text-shadow: 2px 2px 0 rgba(0,0,0,.85);
line-height: 1.7rem;
}
以上是关于css flickity响应图像的主要内容,如果未能解决你的问题,请参考以下文章
使用 flickity 和 bootstrap 4 进行水平卡片滚动(响应式)
将 Flickity 与 Bootstrap 4 轮播集成
Flickity 2 - groupCells 和 pageDots 不能同时工作
Flickity carousel:将 prev 和 next 按钮包装在自定义 div 中
text Flickity-prev-next-button不会为第一个元素#598触发事件
当 Flickity 使用轮播渲染子组件时,Nuxt 应用程序抛出“无法读取未定义的属性”