Align simple image slider arrows to active image

[CySSoO]

Motivation

• Fix misaligned navigation arrows in the Simple Image PrettyBlock by anchoring arrow position to the active image bounds so centering behaves like Apple sliders even with lazy-loaded or variable-height images.
• Ensure arrow placement depends only on the displayed image metrics and not on viewport, global slide dimensions, or fixed heights.

Description

• Wrap navigation buttons in a dedicated container by adding div.ever-slider-nav around the prev/next buttons in views/templates/hook/prettyblocks/prettyblock_img.tpl so arrows are positioned relative to the active image.
• Add Apple-like CSS rules in views/css/everblock.css to place the nav container using CSS variables --ever-slider-active-center-x, --ever-slider-active-center-y, --ever-slider-active-width, and --ever-slider-active-height, and make the individual buttons clickable while keeping the nav anchored to the active image.
• Update slider logic in views/js/everblock-slider.js by replacing updateActiveWidth with updateActiveMetrics, computing the active image's width, height and center coordinates on image load/resize/slide change, and exposing those values as CSS variables to drive nav placement; the slider state now stores the nav element and unhides it once metrics are computed.
• Preserve existing behaviors: autoplay, responsive items per view, and non-intrusive changes to button click handlers and accessibility (aria-label).

Testing

• No automated tests were executed for this change in the rollout environment.
• Manual validation steps are recommended: verify navigation arrows remain vertically centered on the visible image for portrait/landscape/square images, check behavior with lazyloaded images, and test responsive breakpoints and swipe interactions.

---

Codex Task