放大滑动器导航按钮

Question

我正在尝试放大滑动条导航的箭头。

我发现它是由这个 CSS “.swiper-button-next::after” 控制的，它在 swiper.bundle.css 中定义。相关部分是这样的：

    .swiper-button-next::after {
    font-family: swiper-icons;
    font-size: var(--swiper-navigation-size); // controls the arrow size
    text-transform: none !important;
    letter-spacing: 0;
    text-transform: none;
    font-variant: initial;
    line-height: 1;
    }

我的首选选项是控制“swiper-navgiation-size”变量，但我找不到设置它的方法。

或者，我尝试从我的组件中覆盖这些设置 css 但我无法访问我试过：

::ng-deep .swiper-button-next::after {
    font-size: 150px !important;
  }

和

::after .swiper-button-next {
    font-size: 150px !important;
  }

但没有任何效果。有什么想法吗？

Answer 1

不需要任何 ::ng-deep 或 ::after

.swiper-button-next {
    font-size: 150px;
  }

Answer 2

默认滑动按钮大小为 44 像素，使用的 than/greater 少于字体（“<”和“>”）。默认大小位于 root navigation scss file。要增加导航按钮的大小，请添加一个 css 文件来覆盖默认大小：

:root {
    --swiper-navigation-size: 88px;
}

这应该使导航箭头大小加倍。

放大滑动器导航按钮

Enlarging Swiper Navigation Buttons

angular

swiperjs