Twenty Fourteen: use css-only carousel #8352
Conversation
Test using WordPress PlaygroundThe changes in this pull request can previewed and tested using a WordPress Playground instance. WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser. Some things to be aware of
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
swissspidy
force-pushed
the
try/twentyfourteen-carousel
branch
from
bc6c2f2 to
cc8bcac
Compare
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
swissspidy
force-pushed
the
try/twentyfourteen-carousel
branch
from
cc8bcac to
509e4df
Compare
swissspidy
force-pushed
the
try/twentyfourteen-carousel
branch
from
509e4df to
7ec6c87
Compare
| selector: '.featured-content-inner > article', | ||
| controlsContainer: '.featured-content' | ||
| } ); | ||
| if (body.is('.slider') && ! CSS.supports( 'scroll-marker-group: after' ) ) { |
| ?> | ||
|
|
||
| <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> | ||
| <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> data-index="<?php echo esc_attr( $GLOBALS['index'] ); ?>"> |
There was a problem hiding this comment.
Could the index be eliminated in favor of something like this?
| <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> data-index="<?php echo esc_attr( $GLOBALS['index'] ); ?>"> | |
| <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> data-index="<?php echo esc_attr( array_search( get_post(), $wp_query->posts ) + 1 ); ?>"> |
There was a problem hiding this comment.
That seems to work with twentyfourteen_get_featured_posts() instead of $wp_query->posts:
| <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> data-index="<?php echo esc_attr( $GLOBALS['index'] ); ?>"> | |
| <article id="post-<?php the_ID(); ?>" <?php post_class(); ?> data-index="<?php echo esc_attr( array_search( get_post(), twentyfourteen_get_featured_posts() ) + 1 ); ?>"> |
There was a problem hiding this comment.
+1 to eliminating the global if possible. If not, at least name it something more unique :)
That seems to work with twentyfourteen_get_featured_posts() instead of $wp_query->posts:
Maybe you need to add global $wp_query; to bring it in?
There was a problem hiding this comment.
$wp_query->posts gives the array of posts for the home page, not including featured posts.
4 participants
In supporting browsers, the carousel is built using CSS only. The
slider.jsscript (19 KB) is not loaded. This saves some bandwidth.If the browser doesn't support the feature, the
slider.jsscript 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:
Screen.Recording.2025-02-19.at.11.11.24.mov
Trac ticket: https://core.trac.wordpress.org/ticket/63251
This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.