angular - 扩大滑动导航按钮

Question

我正在尝试放大我的 swiper 导航的箭头。

我发现它是由这个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;
  }

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

标签： angularswiperjs

Answer 1

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

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