iDangerous Swiper 2：更改第一张和最后一张幻灯片上箭头的 CSS/样式？答案

【问题标题】：iDangerous Swiper 2 : Changing CSS/Style of Arrows on First & Last Slide?iDangerous Swiper 2：更改第一张和最后一张幻灯片上箭头的 CSS/样式？
【发布时间】：2017-01-12 05:39:17
【问题描述】：

我严格使用旧版本的 Swiper (v2.7.6) 以及 jQuery (v1.10.1)

当第一张或最后一张幻灯片处于活动状态时，我正在尝试更改左右箭头的不透明度。（如果在第一张幻灯片上，左箭头将降低不透明度，如果在最后一张幻灯片上，则与右箭头相同。

如果在幻灯片之间，箭头将恢复为完全不透明状态。
不幸的是，经过数小时后我无法解决此问题。

这是我当前的 jQuery 代码：

if ($(".swiper-slide:eq(0)").hasClass("swiper-slide-active")) {
  $(".arrow-left").css("opacity","0.2");
}
else {
  $(".arrow-left").css("opacity","1");
}

HTML 是：

<div class="swiper-container">
  <a class="arrow-left" href="#"></a> 
  <a class="arrow-right" href="#"></a>

  <div class="swiper-wrapper">
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
    <div class="swiper-slide"></div>
  </div>

</div>

Swiper 2 的 API 文档可以在 here 找到。

谢谢。

【问题讨论】：

让 javascript/jQuery 计算您的幻灯片，并将当前显示的一张与该数字进行比较。正如我从您的代码中看到的那样，一旦您处于第一个/最后一个位置，更改不透明度对您来说就不是问题。祝你好运。

标签： javascript jquery html css swiper

【解决方案1】：

我认为 Swiper 已经为您处理了，只需在创建 swiper 实例时指定包含箭头的 html 元素

(function () {
var swiper = new Swiper('.swiper-container', {
    nextButton: '.arrow-right',
    prevButton: '.arrow-left',
    ...

}); 
})(jQuery);

【讨论】：