Swiper教程：如何控制移动箭头？

Question

这是我的轮播图，但是当我想要配置swiper-button时，箭头与图像之间的距离很远，有没有办法让它们更近一些（修改它们的位置）？

effect={'coverflow'}
  grabCursor={false}
  centeredSlides={true}
  slidesPerView={'3'}
  rewind={true}
  coverflowEffect={{
     rotate: 0,
     stretch: 0,
     depth: 30,
     modifier: 20,
     slideShadows: false,
   }}
 preventClicks={true}
 navigation={true}
 pagination={true}
 modules={[EffectCoverflow, Pagination]}
 className="mySwiperDesktop">````


我尝试修改宽度中的数字（44*27），但是当我改变分辨率时，箭头会超出屏幕

width: calc(var(--swiper-navigation-size)/ 44 * 27)

Answer 1

看起来你正在使用Swiper库，并尝试根据特定的屏幕分辨率公式修改导航箭头的宽度。然而，改变分辨率似乎导致箭头超出屏幕。让我们来分析一下这个问题，并看看你可以如何解决它。

看起来你正在使用CSS根据一个涉及--swiper-navigation-size的计算来设置导航箭头的宽度，比例为27:44（宽度:高度）。你提供的公式是：

width: calc(var(--swiper-navigation-size) / 44 * 27);

以下是您可以采取的一些步骤来排除故障并可能修复此问题：

响应式设计： 确保您的设计具有响应性，并能很好地适应不同的屏幕分辨率。您可能需要调整您的CSS和计算，以确保导航箭头和其他元素在各种屏幕尺寸上正确适应。

CSS单位： 检查您在--swiper-navigation-size中使用的单位。如果它以固定像素值定义，可能无法很好地适应不同的屏幕分辨率。考虑使用相对单位，如vw（视口宽度）或百分比使其具有响应性。

媒体查询： 使用媒体查询根据不同的屏幕尺寸应用不同的样式。这将允许您根据不同的分辨率对导航箭头的外观进行微调。例如：

@media (max-width: 768px) {
  /* 调整较小屏幕的样式 */
}

@media (min-width: 769px) and (max-width: 1200px) {
  /* 调整中等屏幕的样式 */
}

@media (min-width: 1201px) {
  /* 调整较大屏幕的样式 */
}

测试和调试： 使用浏览器的开发者工具检查元素及其样式。这将帮助您了解哪些样式影响导航箭头以及它们如何随不同的分辨率而变化。

考虑不同的方法： 如果发现CSS计算过于复杂和不可预测，您可以考虑使用其他方法来调整导航箭头的大小。例如，您可以使用相对宽度、flexbox或网格布局来更自然地处理不同屏幕尺寸的布局。

请记住，CSS计算有时会表现出意外的行为，特别是在响应式设计中。在不同的设备和屏幕分辨率上进行全面测试，以确保您的设计保持功能性和视觉吸引力。