Fix inconsistent visibility and clipping of Slick carousel navigation arrows on mobile

Aperta Adatta ai principianti
#8,275 1 commento 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 2 giorni

@AP24110011695 ci sta già lavorando.

Dal 31/10/2026.

  • #8281 di @AP24110011695 — aperta

Valutazione

Difficoltà
2/5
Tempo stimato
1-3 ore
Idoneità per principianti
70/100
Tipo di issue
Bug
Chiarezza
Abbastanza chiara
Stato di attività
Attiva
Stack tecnologico
css, javascript
Ambito
frontend

Direzione di ricerca

Individua il componente pagina della piattaforma DevRel nella codebase Gatsby e trova dove viene renderizzato il Slick carousel. Ispeziona il CSS che controlla la visibilità e il posizionamento delle frecce di navigazione ai breakpoint mobili (es. 360px). Verifica la correzione usando la modalità responsive del browser a 360×760px e 314×709px; fatto quando le frecce sono completamente visibili e non tagliate.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

framework/gatsby help wanted kind/bug
Description

The Slick carousel navigation arrows on the DevRel platform page behave inconsistently on smaller mobile viewports.

During responsive testing, the previous and next navigation arrows are sometimes not visible. When they do appear, they are partially clipped at the edges of the carousel, affecting their visibility and usability.

Page: https://layer5.io/solutions/devrel-platform-for-kubernetes-and-cloud-native-content

Steps to Reproduce
  1. Visit the DevRel platform page.
  2. Open browser developer tools and enable responsive design mode.
  3. Set the viewport to mobile dimensions (e.g., 360px and 314px).
  4. Locate the image carousel in the DevRel section.
  5. Observe the previous and next navigation arrows while interacting with the carousel.
Expected Behavior
  • Both previous and next navigation arrows should display consistently on mobile viewports.
  • The arrows should be fully visible and properly positioned within the carousel boundaries.
  • Navigation controls should remain accessible and usable across different screen widths.
  • Their positioning should adapt appropriately to smaller viewport sizes.
Actual Behavior
  • Navigation arrows are inconsistently displayed and sometimes disappear.
  • When visible, the arrows are partially clipped at the carousel boundaries.
  • Their positioning does not appear to adapt consistently to smaller mobile viewports.
Environment
  • Browser: Firefox
  • Testing mode: Responsive Design Mode
  • Viewports: 360 × 760px and 314 × 709px
  • Device emulation: Samsung Galaxy S10
Screenshots

Screenshots demonstrating the inconsistent visibility and clipping of carousel navigation arrows are attached.

Image Image Image
Lingua principale
JavaScript
Stelle
1.1k
Fork
1.7k
Merge medio
2g 17h
PR unite (30g)
17

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di layer5io/layer5

Tutte le issue di layer5io/layer5

Issue simili

Altre issue su JavaScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.