0

This is my carousel but here when I want to configure the swiper-button the arrows are very far from the image, any idea how 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 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)
Ibizaz
  • 1

1 Answers1

0

It seems like you're working with the Swiper library and trying to modify the width of the navigation arrows based on a specific formula involving screen resolution. However, it appears that changing the resolution is causing the arrows to go off-screen. Let's break down the issue and see how you can potentially address it.

It looks like you're using CSS to set the width of the navigation arrows based on a calculation involving the --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 a few steps you can take to troubleshoot and potentially fix the issue:

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

CSS Units: Check the units you're using for --swiper-navigation-size. If it's defined in a fixed pixel value, it might not adapt well to different screen resolutions. Consider using relative units like vw (viewport width) or percentages to make it responsive.

Media Queries: 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 for various resolutions. For example:

@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 */
}

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

Consider Different Approaches: If you find that the CSS calculations are causing too much complexity and unpredictability, you might consider using a different approach to sizing the navigation arrows. For example, you could use relative widths, flexbox, or grid layout to handle the layout more naturally across different screen sizes.

Remember that CSS calculations can sometimes behave unexpectedly, especially when combined with responsive design. It's important to test thoroughly on different devices and screen resolutions to ensure your design remains functional and visually appealing.

JHONNY CHARLLYS
  • 1
  • 1