滑动轮播导航不可见但有效？

Question

我有一个使用 Swiper carousel, link here: https://jom-tolong.herokuapp.com

的网站

问题是导航元素不可见但有效，分页不受影响。这只发生在 Safari 和 Chrome 上，在 Firefox 上，一切正常。

相关代码如下：

Javascript

<script>
    var swiper1 = new Swiper ('.swiper1', {
        direction: 'horizontal',
        loop: 'false',
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
              el: '.swiper-pagination'
        },
        breakpoints: {
          767: {
            slidesPerView: 3,
            spaceBetween: 200
          },
          992: {
            slidesPerView: 4,
            spaceBetween: 245
          },
          1200: {
            slidesPerView: 5,
            spaceBetween: 270
          }
        }
    })

    var swiper2 = new Swiper ('.swiper2', {
        direction: 'horizontal',
        loop: 'false',
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
        pagination: {
              el: '.swiper-pagination'
        },
        breakpoints: {
          767: {
            slidesPerView: 3,
            spaceBetween: 200
          },
          992: {
            slidesPerView: 4,
            spaceBetween: 245
          },
          1200: {
            slidesPerView: 5,
            spaceBetween: 270
          }
        }
    })
</script>

HTML

<div class="swiper-container swiper1">
<div class="swiper-wrapper">
    <% @helps.each do |help| %>
        <div class="swiper-slide">
            <div class="card">
                <%# <div class="card-img"></div> %>
                <div class="card-text">
                    <p class="card-heading"><%= help.user.name %></p>
                    <p class="tag"><%= help.help_type %></p>         
                    <p class="card-subheading"><%= help.district.name %>, <%= help.district.state.name %></p>
                    <p class="card-paragraph"><%= help.description %></p>
                </div>
                <%= link_to 'Help', "https://wa.me/60#{help.user.phone_number}", target: "_blank", class: "card-link" %>
            </div>
        </div>
    <% end %>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<div class="swiper-pagination"></div>

感谢阅读！

Answer 1

你的正文标签中有一个 css

text-rendering: optimizeSpeed;

这是导致问题的原因，我认为请将其设置为自动或向滑动按钮添加另一个 css

.swiper-button-prev:after, .swiper-container-rtl .swiper-button-next:after, .swiper-button-next:after, .swiper-container-rtl .swiper-button-prev:after {
    text-rendering: auto;
}

请检查它是否正常工作。

滑动轮播导航不可见但有效？

Swiper carousel navigation invisible but working?

html

javascript

css

swiper

swiperjs