Tutoriel Swiper : Comment contrôler les flèches en mouvement ?

Question

C'est mon carrousel, mais lorsque je veux configurer le bouton du swiper, les flèches sont loin de l'image, y a-t-il un moyen de les rapprocher (modifier leur position) ?

effect={'coverflow'}
  grabCursor={faux}
  centeredSlides={true}
  slidesPerView={'3'}
  rembobiner={true}
  coverflowEffect={{
     rotation: 0,
     étirement: 0,
     profondeur : 30,
     modificateur : 20,
     slideShadows : faux,
   }}
 prévenirClicks={true}
 navigation={vrai}
 pagination={vrai}
 modules={[EffectCoverflow, Pagination]}
 nom de classe="mySwiperDesktop">````


J'ai essayé de modifier le nombre dans la largeur (44*27) mais quand je change la résolution la flèche disparaît de l'écran

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

Answer 1

On dirait que vous utilisez la bibliothèque Swiper et que vous essayez de modifier la largeur des flèches de navigation en fonction d'une formule de résolution d'écran spécifique. Cependant, changer la résolution semble faire disparaître les flèches de l'écran. Analysons ce problème et voyons comment vous pouvez le résoudre.

Il semble que vous utilisiez CSS pour définir la largeur de la flèche de navigation sur la base d'un calcul impliquant --swiper-navigation-size, avec un rapport de 27:44 (largeur : hauteur). La formule que vous avez fournie est :

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

Voici quelques étapes que vous pouvez suivre pour dépanner et éventuellement résoudre ce problème :

Conception réactive : Assurez-vous que votre conception est réactive et s'adapte bien aux différentes résolutions d'écran. Vous devrez peut-être ajuster votre CSS et vos calculs pour vous assurer que les flèches de navigation et autres éléments s'adaptent correctement aux différentes tailles d'écran.

Unité CSS : Vérifiez les unités que vous utilisez dans --swiper-navigation-size中使用的单位。如果它以固定像素值定义，可能无法很好地适应不同的屏幕分辨率。考虑使用相对单位，如vw. S'il est défini avec des valeurs de pixels fixes, il risque de ne pas s'adapter aux différentes résolutions d'écran. Pensez à utiliser des unités relatives telles que vw (largeur de la fenêtre) ou un pourcentage pour le rendre réactif.

Demandes des médias : Utilisez les requêtes multimédias pour appliquer différents styles en fonction de différentes tailles d'écran. Cela vous permettra d'affiner l'apparence de vos flèches de navigation en fonction de différentes résolutions. Par exemple :

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

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

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

Test et débogage : Utilisez les outils de développement de votre navigateur pour inspecter l'élément et ses styles. Cela vous aidera à comprendre quels styles affectent les flèches de navigation et comment ils changent selon les différentes résolutions.

Envisagez différentes approches : Si vous trouvez que les calculs CSS sont trop complexes et imprévisibles, vous pouvez envisager d'utiliser d'autres méthodes pour redimensionner les flèches de navigation. Par exemple, vous pouvez utiliser des largeurs relatives, une boîte flexible ou une disposition en grille pour gérer les mises en page plus naturellement sur différentes tailles d'écran.

Gardez à l'esprit que les calculs CSS peuvent parfois présenter un comportement inattendu, en particulier dans les conceptions réactives. Testez minutieusement sur différents appareils et résolutions d’écran pour vous assurer que votre conception reste fonctionnelle et visuellement attrayante.