Swiper搭配lightbox2实现轮播效果的三个技术问题咨询

问题1：Swiper箭头导航按钮无法正常工作的原因及解决方法 #

你使用的是Swiper7版本，默认需要在初始化配置中显式声明导航按钮的绑定元素，你当前的JS配置中没有添加navigation相关配置，所以箭头不会触发交互。
修改初始化代码如下即可：

var swiper = new Swiper('.swiper-container', {
  direction: 'horizontal',
  slidesPerView: 1,
  spaceBetween: 4,
  breakpointsInverse: true,
  // 新增导航配置
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
  breakpoints: { 
    320: {
      slidesPerView: 2,
      spaceBetween: 10
    },
    480: { 
      slidesPerView: 3,
      spaceBetween: 20
    },
    640: {
      slidesPerView: 3,
      spaceBetween:24
    }
  }
})

问题2：保持图片16:9比例的替代方案 #

不需要设置固定宽高，可以用padding百分比法实现自适应的16:9比例，CSS修改如下：

/* 给slide外层设置比例容器 */
.swiper-slide {
  position: relative;
  width: 100%;
  /* 9/16=0.5625，对应16:9的比例 */
  padding-top: 56.25%;
}
.swiper-slide img{
  /* 图片绝对定位填满容器 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

这种方案可以适配所有响应式宽度，不需要写多套媒体查询修改固定宽高值。

问题3：导航按钮垂直居中位置偏移的解决方法 #

Swiper默认的导航按钮是相对于.swiper-container整体容器做垂直居中的，如果你的容器底部有分页器占位，或者容器本身有额外的上下内边距，就会导致按钮对齐的是整个容器的中点而非图片区域的中点。
可以直接修改导航按钮的定位偏移来调整，CSS新增如下规则即可：

.swiper-button-prev,
.swiper-button-next {
  /* 调整top值，减去分页器占用的高度偏移即可，这里的数值可以根据实际效果微调 */
  top: calc(50% - 16px);
}
/* 如果用了上述16:9的slide方案，也可以直接写固定百分比 */
/*
.swiper-button-prev,
.swiper-button-next {
  top: 28.125%;
}
*/

内容的提问来源于stack exchange，提问作者AWEI