aerwen_u_site/assets/css/Carousel/index.scss
2024-05-04 00:00:17 +08:00

77 lines
1.8 KiB
SCSS

.b {
background: black;
}
.Carousel-container {
margin-top: 135px;
.carousel-box {
.carousel-items {
display: flex;
justify-content: center;
color: var(--swipercolor);
height: var(--swiperheight);
width: var(--swiperwidth);
margin: var(--swipermargin);
padding: var(--swiperpadding);
background: var(--swiperbackground);
&>img {
height: 100%;
width: 100%;
object-fit: cover;
}
}
}
}
.swiper-slide {
width: 100%;
display: flex;
justify-content: center;
}
.swiper-slide img {
width: 60vw !important;
border-radius: 15px;
overflow: hidden;
object-fit: cover !important;
cursor: pointer;
}
.swiper::v-deep(.swiper-pagination .swiper-pagination-bullet) {
color: var(--paginationcolor);
height: var(--paginationheight);
width: var(--paginationwidth);
margin: var(--paginationmargin);
padding: var(--paginationpadding);
background: var(--paginationbackground);
}
.swiper::v-deep(.swiper-pagination .swiper-pagination-bullet-active) {
color: var(--paginationActivecolor);
height: var(--paginationActiveheight);
width: var(--paginationActivewidth);
margin: var(--paginationActivemargin);
padding: var(--paginationActivepadding);
background: var(--paginationActivebackground);
}
.swiper::v-deep(.swiper-button-next) {
color: var(--buttonNextcolor);
height: var(--buttonNextheight);
width: var(--buttonNextwidth);
margin: var(--buttonNextmargin);
padding: var(--buttonNextpadding);
background: var(--buttonNextbackground);
}
.swiper::v-deep(.swiper-button-prev) {
color: var(--buttonPrevcolor);
height: var(--buttonPrevheight);
width: var(--buttonPrevwidth);
margin: var(--buttonPrevmargin);
padding: var(--buttonPrevpadding);
background: var(--buttonPrevbackground);
}