如何使用滑动器移动箭头？

Question

这是我的轮播，但是当我想配置滑动按钮时，箭头离图像很远，知道如何使它们更近（修改它们的位置）吗？

  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">````


I tried modifying the numbers in the width (44*27), but when i change the resolution the arrow goes out the screen

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) {
  /* Adjust styles for smaller screens */
}

@media (min-width: 769px) and (max-width: 1200px) {
  /* Adjust styles for medium screens */
}

@media (min-width: 1201px) {
  /* Adjust styles for larger screens */
}

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

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

请记住，CSS 计算有时可能会出现意外情况，尤其是与响应式设计结合使用时。在不同的设备和屏幕分辨率上进行彻底测试非常重要，以确保您的设计保持功能性和视觉吸引力。