Skip to content

carousel fix #2123

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Conversation

fyzanshaik
Copy link

@fyzanshaik fyzanshaik commented Jun 19, 2025

What does this PR do?

Fixes #2122 where the Carousel component's navigation buttons did not correctly scroll the CodeCard components.

Changes Made:

  1. Refined Scroll Calculation: Simplified scroll logic to accurately determine the width of a single carousel item + gap for precise scrollBy() movements.
  2. Initial State Management: Ensured isStart and isEnd states (for button disabling) are correctly set immediately after component mount using onMount and tick.
  3. CSS Enhancements:
    • Applied display: grid; to the .carousel for correct grid-auto-flow behavior.
    • Added pointer-events: none; to ::before and ::after pseudo-elements to prevent them from blocking clicks on carousel items.
    • Moved scroll-snap-align: start; to the internal li styles within the component.

Test Plan

This is tested on my local development server and I have confirmed this fixes the issue. Attaching video below.
https://github.com/user-attachments/assets/8ef87ab1-e2c4-44f8-91bf-b369ce6c4076

Related PRs and Issues

This fixes issue #2122, no related PR's

Have you read the Contributing Guidelines on issues?

Yes I have read the CONTRIBUTING.md and made my contributions according to the guidelines.

Signed-off-by: fyzanshaik <fyzan.shaik@gmail.com>
Signed-off-by: fyzanshaik <fyzan.shaik@gmail.com>
Copy link

appwrite bot commented Jun 19, 2025

appwrite.io

Project ID: 684969cb000a2f6c0a02

Sites (1)
Site Status Logs Preview QR
 website
68496a17000f03d62013
Failed Failed Authorize Preview URL QR Code

Note

Cursor pagination performs better than offset pagination when loading further pages.

Signed-off-by: fyzanshaik <fyzan.shaik@gmail.com>
@coolify-appwrite-org
Copy link

coolify-appwrite-org bot commented Jun 19, 2025

The preview deployment failed. 🔴

Open Build Logs

Last updated at: 2025-06-30 10:18:14 CET

@TorstenDittmann TorstenDittmann force-pushed the main branch 5 times, most recently from 6e3c6b4 to 83e3ebc Compare July 7, 2025 15:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

🐛 Bug Report: Docs carousel component does't shift when clicked
1 participant