Skip to content

Conversation

@CySSoO
Copy link
Contributor

@CySSoO CySSoO commented Jan 22, 2026

Motivation

  • Provide a “centered” slider layout where the active slide is visually centered and dominant with attenuated adjacent slides, without adding libraries or changing Prettyblocks config.
  • Make navigation move by single slide index so the focused item is always centered after interaction.
  • Keep existing slider structure and arrows while ensuring compatibility with PrestaShop 8/9 and no use of .row/.col-*.

Description

  • Updated JS in views/js/everblock-slider.js to compute the translateX per the centered formula using containerWidth, itemWidth, gap and index, and to navigate by single-index steps for controls and autoplay (goToIndex and startAutoplay).
  • Modified state handling to set state.containerWidth, use state.maxIndex = totalItems - 1, and manage pageCount/pageIndex for per-item centering; added toggles for is-active, is-adjacent, and is-inactive classes in updateItemStates.
  • Adjusted button behavior so arrows remain visible (hidden = false) and are only disabled when navigation is not possible, and wired arrow clicks to move one index (-1/+1).
  • Added minimal CSS in views/css/everblock.css to include transform in transitions, new .is-adjacent and updated .is-inactive styles (opacity/filter), and moved arrow positions to left: -40px / right: -40px to sit outside the central zone.

Testing

  • No automated tests were executed for this change.

Codex Task

@CySSoO CySSoO merged commit 4b6e470 into master Jan 22, 2026
0 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants