Twenty Fourteen: implement slider feature with CSS carousel

[swissspidy]

New features in the ​CSS Overflow 5 specification have been designed to create scroll and carousel experiences with built-in accessibility and better performance.

While ​learning more about these new capabilities, I figured that the Twenty Fourteen could benefit from this.

The theme could use the new CSS carousel feature in supporting browsers, falling back to the existing JavaScript/jQuery slider. In a supporting browser, this would avoid loading over 18 KB of JavaScript!

In supporting browsers, the carousel is built using CSS only. The slider.js script (19 KB) is not loaded. This saves some bandwidth.

If the browser doesn't support the feature, the slider.js script is loaded on demand.

Not implemented in the CSS version: cyclic/infinite carousel. This currently requires some JavaScript still, but I think this could be just as well omitted as it doesn't seem critical for this feature.

Demo:

​https://github.com/user-attachments/assets/4d9aee53-1c97-4099-9e04-6c190d840feb

Trac ticket: https://core.trac.wordpress.org/ticket/63251

[sabernhardt]

As Twenty Fourteen is a classic theme, child themes (and/or plugins) can replace templates, CSS and scripts.

I doubt this is complete, but I can think of some adjustments to account for child themes:

1. The script probably should check for the existence of data- attributes from each template, in addition to the .slider class and CSS support.
2. The new CSS could use wp_add_inline_style() because a child theme would replace style.css by default. (Enqueuing the parent stylesheet is recommended, not required.)

[renishsurani]

Hi @swissspidy,

Can you please share the steps to test this feature?

[swissspidy]

Good suggestions for the JS & CSS 👍

As for testing: it's too early to fully test this, as this PR is still in development, but you should be able to simply compare the featured posts slider in both Chrome and other browsers.