0

我有一个使用Swiper轮播的网站，链接在这里：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>

谢谢阅读！

4

1 回答 1

2

你的body标签中有一个css

text-rendering: optimizeSpeed;

这导致了我相信的问题，请让它自动或添加另一个 CSS 到 swiper 按钮

.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;
}

做检查它是否工作。

于 2020-04-15T09:15:04.230 回答