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計算有時會表現出意外的行為，特別是在響應式設計中。在不同的設備和螢幕解析度上進行全面測試，以確保您的設計保持功能性和視覺吸引力。