Swiper tutorial: How to control moving arrows?

Question

This is my carousel, but when I want to configure the swiper-button, the arrows are far away from the image, is there a way to make them closer (modify their position)?

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 number in the width (44*27) but when I change the resolution the arrow goes off the screen

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

Answer 1

It looks like you are using the Swiper library and trying to modify the width of the navigation arrows based on a specific screen resolution formula. However, changing the resolution seems to cause the arrows to go off the screen. Let's analyze this problem and see how you can solve it.

It looks like you are using CSS to set the width of the navigation arrow based on a calculation involving --swiper-navigation-size, with a ratio of 27:44 (width:height). The formula you provided is:

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

Here are some steps you can take to troubleshoot and possibly fix this issue:

Responsive design: Make sure your design is responsive and adapts well to different screen resolutions. You may need to adjust your CSS and calculations to ensure navigation arrows and other elements fit correctly on various screen sizes.

CSS Unit: Check the units you are using in --swiper-navigation-size. If it is defined with fixed pixel values, it may not adapt well to different screen resolutions. Consider using relative units like vw (viewport width) or percentage to make it responsive.

Media Inquiries: Use media queries to apply different styles based on different screen sizes. This will allow you to fine-tune the appearance of your navigation arrows based on different resolutions. For example:

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

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

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

Testing and Debugging: Use your browser's developer tools to inspect the element and its styles. This will help you understand which styles affect navigation arrows and how they change with different resolutions.

Consider different approaches: If you find that CSS calculations are too complex and unpredictable, you may consider using other methods to resize navigation arrows. For example, you can use relative widths, flexbox, or grid layout to handle layouts more naturally across different screen sizes.

Keep in mind that CSS calculations can sometimes exhibit unexpected behavior, especially in responsive designs. Test thoroughly on different devices and screen resolutions to ensure your design remains functional and visually appealing.