PHP /**
* Snippet Name: Advanced Carousel
* Snippet Author: coding-bunny.com
* Description: Displays posts and products in a customizable carousel.
* Version: 1.1.0
*
* USAGE EXAMPLES:
*
* Basic usage:
* [posts_carousel]
*
* Show 8 posts with thumbnails, titles, excerpts, date and author:
* [posts_carousel post_type="post" posts_per_page="8" show_thumbnail="true" show_title="true" show_excerpt="true" show_date="true" show_author="true"]
*
* AVAILABLE PARAMETERS:
* - posts_per_page: Number of posts to display (default: 6)
* - post_type: Post type to query (default: 'post')
* - category: Filter by category slug
* - tag: Filter by tag slug
* - taxonomy: Custom taxonomy name
* - term: Custom taxonomy term slug
* - autoplay: Enable autoplay (true/false, default: false)
* - show_thumbnail: Show featured image (true/false, default: true)
* - show_title: Show post title (true/false, default: true)
* - show_excerpt: Show post excerpt (true/false, default: false)
* - show_date: Show publication date (true/false, default: false)
* - show_author: Show author with link to author archive (true/false, default: false)
* - show_taxonomies: Show post taxonomies (true/false, default: false)
* - show_taxonomies_type: Type of taxonomies to show 'categories' or 'tags' (default: 'categories')
* - excerpt_length: Number of words in excerpt (default: 20)
* - orderby: Sort posts by 'date', 'title', 'menu_order', 'rand' (default: 'date')
* - order: Sort direction 'ASC' or 'DESC' (default: 'DESC')
* - slides_per_view: Number of slides visible per row on desktop (default: 3, range: 1-6)
* - image_aspect_ratio: Image aspect ratio format '1:1', '2:3', '3:2', '4:3', '3:4', '16:9', '9:16' (default: '3:2')
* - equal_heights: Enable equal heights for all post cards (true/false, default: true)
*
* WOOCOMMERCE-SPECIFIC PARAMETERS:
* - show_price: Show product price (true/false, default: false)
* - show_stock: Show stock status (true/false, default: false)
* - show_rating: Show star rating (true/false, default: false)
* - show_add_to_cart: Show add to cart button (true/false, default: false)
* - show_sale_badge: Show sale badge for discounted products (true/false, default: false)
* - show_sku: Show product SKU (true/false, default: false)
*/
function cbacs_register_swiper_assets () {
wp_register_style ( ' swiper-css ' , ' https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.css ' , [], null ) ;
wp_register_script ( ' swiper-js ' , ' https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js ' , [], null , true ) ;
}
add_action ( ' wp_enqueue_scripts ' , ' cbacs_register_swiper_assets ' ) ;
function cbacs_enqueue_swiper_assets ( $ content ) {
if ( has_shortcode ( $ content , ' posts_carousel ' )) {
wp_enqueue_style ( ' swiper-css ' ) ;
wp_enqueue_script ( ' swiper-js ' ) ;
}
return $ content ;
}
add_filter ( ' the_content ' , ' cbacs_enqueue_swiper_assets ' ) ;
function cbacs_aspect_ratio ( $ aspect_ratio_string ) {
$ allowed_ratios = [
' 1:1 ' => 100 , // Square
' 2:3 ' => 150 , // Portrait (2:3)
' 3:2 ' => 66 . 67 , // Landscape (3:2) - Default
' 4:3 ' => 75 , // Standard (4:3)
' 3:4 ' => 133 . 33 , // Portrait (3:4)
' 16:9 ' => 56 . 25 , // Widescreen (16:9)
' 9:16 ' => 177 . 78 , // Mobile/Story format (9:16)
] ;
return isset ( $ allowed_ratios [ $ aspect_ratio_string ]) ? $ allowed_ratios [ $ aspect_ratio_string ] : $ allowed_ratios [ ' 3:2 ' ] ;
}
function cbacs_posts_carousel_shortcode ( $ atts ) {
$ atts = shortcode_atts ([
' posts_per_page ' => 6 ,
' post_type ' => ' post ' ,
' category ' => '' ,
' tag ' => '' ,
' taxonomy ' => '' ,
' term ' => '' ,
' autoplay ' => ' false ' ,
' show_thumbnail ' => ' true ' ,
' show_title ' => ' true ' ,
' show_excerpt ' => ' false ' ,
' show_date ' => ' false ' ,
' show_author ' => ' false ' ,
' show_taxonomies ' => ' false ' ,
' show_taxonomies_type ' => ' categories ' ,
' excerpt_length ' => 20 ,
' orderby ' => ' date ' ,
' order ' => ' DESC ' ,
' slides_per_view ' => 3 ,
' image_aspect_ratio ' => ' 3:2 ' ,
' equal_heights ' => ' true ' ,
// WooCommerce parameters
' show_price ' => ' false ' ,
' show_stock ' => ' false ' ,
' show_rating ' => ' false ' ,
' show_add_to_cart ' => ' false ' ,
' show_sale_badge ' => ' false ' ,
' show_sku ' => ' false ' ,
], $ atts , ' posts_carousel ' ) ;
$ post_type = sanitize_key ( $ atts [ ' post_type ' ]) ;
$ category = sanitize_title ( $ atts [ ' category ' ]) ;
$ tag = sanitize_title ( $ atts [ ' tag ' ]) ;
$ taxonomy = sanitize_key ( $ atts [ ' taxonomy ' ]) ;
$ term = sanitize_title ( $ atts [ ' term ' ]) ;
$ autoplay = filter_var ( $ atts [ ' autoplay ' ], FILTER_VALIDATE_BOOLEAN ) ;
$ show_thumbnail = filter_var ( $ atts [ ' show_thumbnail ' ], FILTER_VALIDATE_BOOLEAN ) ;
$ show_title = filter_var ( $ atts [ ' show_title ' ], FILTER_VALIDATE_BOOLEAN ) ;
$ show_excerpt = filter_var ( $ atts [ ' show_excerpt ' ], FILTER_VALIDATE_BOOLEAN ) ;
$ show_date = filter_var ( $ atts [ ' show_date ' ], FILTER_VALIDATE_BOOLEAN ) ;
$ show_author = filter_var ( $ atts [ ' show_author ' ], FILTER_VALIDATE_BOOLEAN ) ;
$ show_taxonomies = filter_var ( $ atts [ ' show_taxonomies ' ], FILTER_VALIDATE_BOOLEAN ) ;
$ show_taxonomies_type = sanitize_text_field ( $ atts [ ' show_taxonomies_type ' ]) ;
$ excerpt_length = intval ( $ atts [ ' excerpt_length ' ]) ;
$ orderby = sanitize_key ( $ atts [ ' orderby ' ]) ;
$ order = strtoupper ( sanitize_key ( $ atts [ ' order ' ])) === ' ASC ' ? ' ASC ' : ' DESC ' ;
$ slides_per_view = intval ( $ atts [ ' slides_per_view ' ]) ;
if ( $ slides_per_view < 1 ) $ slides_per_view = 1 ;
if ( $ slides_per_view > 6 ) $ slides_per_view = 6 ;
$ image_aspect_ratio = sanitize_text_field ( $ atts [ ' image_aspect_ratio ' ]) ;
$ padding_bottom = cbacs_aspect_ratio ( $ image_aspect_ratio ) ;
$ equal_heights = filter_var ( $ atts [ ' equal_heights ' ], FILTER_VALIDATE_BOOLEAN ) ;
$ show_price = filter_var ( $ atts [ ' show_price ' ], FILTER_VALIDATE_BOOLEAN ) ;
$ show_stock = filter_var ( $ atts [ ' show_stock ' ], FILTER_VALIDATE_BOOLEAN ) ;
$ show_rating = filter_var ( $ atts [ ' show_rating ' ], FILTER_VALIDATE_BOOLEAN ) ;
$ show_add_to_cart = filter_var ( $ atts [ ' show_add_to_cart ' ], FILTER_VALIDATE_BOOLEAN ) ;
$ show_sale_badge = filter_var ( $ atts [ ' show_sale_badge ' ], FILTER_VALIDATE_BOOLEAN ) ;
$ show_sku = filter_var ( $ atts [ ' show_sku ' ], FILTER_VALIDATE_BOOLEAN ) ;
$ is_woocommerce_active = class_exists ( ' WooCommerce ' ) ;
$ is_product_query = ( $ post_type === ' product ' && $ is_woocommerce_active ) ;
$ args = [
' post_type ' => $ post_type ,
' posts_per_page ' => intval ( $ atts [ ' posts_per_page ' ]),
' post_status ' => ' publish ' ,
' orderby ' => $ orderby ,
' order ' => $ order ,
] ;
$ tax_query = [] ;
if ( !empty ( $ category )) {
if ( $ is_product_query ) {
$ tax_query [] = [
' taxonomy ' => ' product_cat ' ,
' field ' => ' slug ' ,
' terms ' => $ category ,
] ;
} else {
$ tax_query [] = [
' taxonomy ' => ' category ' ,
' field ' => ' slug ' ,
' terms ' => $ category ,
] ;
}
}
if ( !empty ( $ tag )) {
if ( $ is_product_query ) {
$ tax_query [] = [
' taxonomy ' => ' product_tag ' ,
' field ' => ' slug ' ,
' terms ' => $ tag ,
] ;
} else {
$ tax_query [] = [
' taxonomy ' => ' post_tag ' ,
' field ' => ' slug ' ,
' terms ' => $ tag ,
] ;
}
}
if ( !empty ( $ taxonomy ) && !empty ( $ term )) {
$ tax_query [] = [
' taxonomy ' => $ taxonomy ,
' field ' => ' slug ' ,
' terms ' => $ term ,
] ;
}
if ( !empty ( $ tax_query )) {
$ args [ ' tax_query ' ] = $ tax_query ;
}
$ query = new WP_Query ( $ args ) ;
ob_start () ;
if ( $ query -> have_posts ()) :
$ uid = uniqid ( ' swiper_ ' ) ;
?>
< div class= " swiper <?php echo esc_attr( $ uid ); ?> " data - equal - heights = " <?php echo $ equal_heights ? 'true' : 'false'; ?> " >
< div class= " swiper-wrapper " >
<? php while ( $ query -> have_posts ()) : $ query -> the_post () ;
$ product = $ is_product_query ? wc_get_product ( get_the_ID ()) : null;
?>
< div class= " swiper-slide " >
< div class= " post-slide <?php echo $ is_product_query ? 'product-slide' : ''; ?> " >
<? php if ( $ show_thumbnail && has_post_thumbnail ()) : ?>
< div class= " post-thumbnail " data - aspect - ratio = " <?php echo esc_attr( $ image_aspect_ratio ); ?> " >
<? php if ( $ show_sale_badge && $ is_product_query && $ product && $ product -> is_on_sale ()) : ?>
< div class= " sale-badge " >
<? php esc_html_e ( ' Sale! ' , ' woocommerce ' ) ; ?>
</ div >
<? php endif; ?>
< a href = " <?php the_permalink(); ?> " >
< div class= " image-container " >
<? php the_post_thumbnail ( ' large ' ) ; ?>
</ div >
</ a >
</ div >
<? php endif; ?>
<? php if ( $ show_taxonomies ) : ?>
< div class= " <?php echo $ is_product_query ? 'product-taxonomies' : 'post-taxonomies'; ?> " >
<? php
if ( $ show_taxonomies_type === ' categories ' ) {
if ( $ is_product_query ) {
$ categories = get_the_terms ( get_the_ID (), ' product_cat ' ) ;
if ( $ categories && ! is_wp_error ( $ categories )) {
$ cat_names = array () ;
foreach ( $ categories as $ category ) {
$ cat_names [] = ' <a href=" ' . esc_url ( get_term_link ( $ category )) . ' "> ' . esc_html ( $ category -> name ) . ' </a> ' ;
}
echo implode ( ' ' , $ cat_names ) ;
}
} else {
$ categories = get_the_category () ;
if ( $ categories && ! is_wp_error ( $ categories )) {
$ cat_names = array () ;
foreach ( $ categories as $ category ) {
$ cat_names [] = ' <a href=" ' . esc_url ( get_category_link ( $ category -> term_id )) . ' "> ' . esc_html ( $ category -> name ) . ' </a> ' ;
}
echo implode ( ' ' , $ cat_names ) ;
}
}
} elseif ( $ show_taxonomies_type === ' tags ' ) {
if ( $ is_product_query ) {
$ tags = get_the_terms ( get_the_ID (), ' product_tag ' ) ;
if ( $ tags && ! is_wp_error ( $ tags )) {
$ tag_names = array () ;
foreach ( $ tags as $ tag ) {
$ tag_names [] = ' <a href=" ' . esc_url ( get_term_link ( $ tag )) . ' "> ' . esc_html ( $ tag -> name ) . ' </a> ' ;
}
echo implode ( ' , ' , $ tag_names ) ;
}
} else {
$ tags = get_the_tags () ;
if ( $ tags && ! is_wp_error ( $ tags )) {
$ tag_names = array () ;
foreach ( $ tags as $ tag ) {
$ tag_names [] = ' <a href=" ' . esc_url ( get_tag_link ( $ tag -> term_id )) . ' "> ' . esc_html ( $ tag -> name ) . ' </a> ' ;
}
echo implode ( ' , ' , $ tag_names ) ;
}
}
}
?>
</ div >
<? php endif; ?>
< div class= " post-content " >
<? php if ( $ show_title ) : ?>
< h3 class= " post-title " >
< a href = " <?php the_permalink(); ?> " ><? php echo esc_html ( get_the_title ()) ; ?></ a >
</ h3 >
<? php endif; ?>
<? php if ( $ show_rating && $ is_product_query && $ product && $ product -> get_average_rating ()) : ?>
< div class= " product-rating " >
<? php
$ rating = $ product -> get_average_rating () ;
$ review_count = $ product -> get_review_count () ;
echo wc_get_rating_html ( $ rating ) ;
if ( $ review_count > 0 ) {
echo ' <span class="review-count">( ' . sprintf ( _n ( ' %s review ' , ' %s reviews ' , $ review_count , ' woocommerce ' ), $ review_count ) . ' )</span> ' ;
}
?>
</ div >
<? php endif; ?>
<? php if ( $ show_excerpt && !$ is_product_query ) : ?>
< div class= " post-excerpt " >
<? php
$ excerpt = get_the_excerpt () ;
if ( strlen ( $ excerpt ) > $ excerpt_length ) {
$ excerpt = wp_trim_words ( $ excerpt , $ excerpt_length , ' ... ' ) ;
}
echo esc_html ( $ excerpt ) ;
?>
</ div >
<? php elseif ( $ show_excerpt && $ is_product_query && $ product ) : ?>
< div class= " product-excerpt " >
<? php
$ description = $ product -> get_short_description () ;
if ( !empty ( $ description )) {
if ( strlen ( $ description ) > $ excerpt_length * 7 ) { // Rough word count estimation
$ description = wp_trim_words ( $ description , $ excerpt_length , ' ... ' ) ;
}
echo wp_kses_post ( $ description ) ;
}
?>
</ div >
<? php endif; ?>
<? php if ( $ show_price && $ is_product_query && $ product ) : ?>
< div class= " product-price " >
<? php echo $ product -> get_price_html () ; ?>
</ div >
<? php endif; ?>
<? php if ( $ show_stock && $ is_product_query && $ product ) : ?>
< div class= " product-stock " >
<? php
$ stock_status = $ product -> get_stock_status () ;
$ stock_quantity = $ product -> get_stock_quantity () ;
if ( $ stock_status === ' instock ' ) {
echo ' <span class="stock in-stock"><span class="dashicons dashicons-yes-alt"></span> ' . esc_html__ ( ' In Stock ' , ' woocommerce ' ) ;
if ( $ stock_quantity && $ product -> managing_stock ()) {
echo ' ( ' . esc_html ( $ stock_quantity ) . ' ' . esc_html__ ( ' available ' , ' woocommerce ' ) . ' ) ' ;
}
echo ' </span> ' ;
} elseif ( $ stock_status === ' outofstock ' ) {
echo ' <span class="stock out-of-stock"><span class="dashicons dashicons-dismiss"></span> ' . esc_html__ ( ' Out of Stock ' , ' woocommerce ' ) . ' </span> ' ;
} elseif ( $ stock_status === ' onbackorder ' ) {
echo ' <span class="stock on-backorder"><span class="dashicons dashicons-clock"></span> ' . esc_html__ ( ' On Backorder ' , ' woocommerce ' ) . ' </span> ' ;
}
?>
</ div >
<? php endif; ?>
<? php if ( $ show_sku && $ is_product_query && $ product && $ product -> get_sku ()) : ?>
< div class= " product-sku " >
< span class= " sku-label " ><? php esc_html_e ( ' SKU: ' , ' woocommerce ' ) ; ?></ span >
< span class= " sku " ><? php echo esc_html ( $ product -> get_sku ()) ; ?></ span >
</ div >
<? php endif; ?>
<? php if (( $ show_date || $ show_author ) && !$ is_product_query ) : ?>
< div class= " post-meta " >
<? php if ( $ show_date ) : ?>
< span class= " post-date " >
< span class= " dashicons dashicons-calendar-alt " ></ span >
<? php echo get_the_date () ; ?>
</ span >
<? php endif; ?>
<? php if ( $ show_author ) : ?>
< span class= " post-author " >
< span class= " dashicons dashicons-admin-users " ></ span >
< a href = " <?php echo esc_url(get_author_posts_url(get_the_author_meta('ID'))); ?> " title = " <?php echo esc_attr(sprintf(__('View all posts by %s', 'text-domain'), get_the_author())); ?> " >
<? php echo get_the_author () ; ?>
</ a >
</ span >
<? php endif; ?>
</ div >
<? php endif; ?>
<? php if ( $ show_add_to_cart && $ is_product_query && $ product ) : ?>
< div class= " product-add-to-cart " >
<? php
if ( $ product -> get_type () === ' simple ' ) {
woocommerce_template_loop_add_to_cart () ;
} else {
echo ' <a href=" ' . esc_url ( $ product -> get_permalink ()) . ' " class="button product-type- ' . esc_attr ( $ product -> get_type ()) . ' "> ' . esc_html__ ( ' Select Options ' , ' woocommerce ' ) . ' </a> ' ;
}
?>
</ div >
<? php endif; ?>
</ div >
</ div >
</ div >
<? php endwhile; ?>
</ div >
< div class= " swiper-button-next " >
< span class= " dashicons dashicons-arrow-right-alt2 " ></ span >
</ div >
< div class= " swiper-button-prev " >
< span class= " dashicons dashicons-arrow-left-alt2 " ></ span >
</ div >
</ div >
< style >
. <? php echo esc_attr ( $ uid ) ; ?> {
position: relative ;
width: 100 % ! important ;
max - width : none ! important ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . swiper - slide . post - slide {
background: #ffffff;
border: 1 px solid #e1e5e9;
border - radius : 10 px ;
overflow: hidden ;
transition: all 0 . 3 s ease ;
height: 100 %;
display: flex ;
flex - direction : column ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . swiper - slide . post - slide : hover {
box - shadow : 0 4 px 15 px rgba ( 0 , 0 , 0 , 0 . 1 ) ;
transform: translateY ( - 2 px ) ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - thumbnail {
width: 100 %;
overflow: hidden ;
position: relative ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - thumbnail . image - container {
width: 100 %;
height: 0 ;
padding - bottom : <? php echo esc_attr ( $ padding_bottom ) ; ?>%;
position : relative ;
overflow : hidden ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - thumbnail . image - container img {
position: absolute ;
top: 0 ;
left: 0 ;
width: 100 %;
height: 100 %;
object- fit : cover ;
transition: transform 0 . 3 s ease ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - thumbnail : hover . image - container img {
transform: scale ( 1 . 05 ) ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . sale - badge {
position: absolute ;
top: 10 px ;
left: 10 px ;
background: #ff4444;
color: white ;
padding: 5 px 10 px ;
border - radius : 15 px ;
font - size : 12 px ;
font - weight : bold ;
z - index : 2 ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - taxonomies {
padding: 15 px 15 px 0 15 px ;
font - size : 12 px ;
line - height : 1 . 4 ;
background: #ffffff;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - taxonomies a {
color: #ffffff;
background: #2370b0;
padding: 5 px ;
border - radius : 3 px ;
text - decoration : none ;
transition: background 0 . 3 s ease ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - taxonomies a : hover {
background: #1d6197;
text - decoration : none ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - taxonomies {
padding: 15 px 15 px 0 15 px ;
font - size : 12 px ;
line - height : 1 . 4 ;
background: #ffffff;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - taxonomies a {
color: #000000;
border - radius : 3 px ;
text - decoration : none ;
transition: background 0 . 3 s ease ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - taxonomies a : hover {
color: #2370b0;
text - decoration : none ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - content {
padding: 15 px ;
flex - grow : 1 ;
display: flex ;
flex - direction : column ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - title {
margin: 0 ;
font - size : 16 px ;
line - height : 1 . 4 ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - title a {
color: #333;
text - decoration : none ;
transition: color 0 . 3 s ease ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - title a : hover {
color: #0073aa;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - rating {
display: flex ;
align - items : center ;
gap: 8 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - rating . star - rating {
font - size : 14 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - rating . review - count {
font - size : 12 px ;
color: #666;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - excerpt ,
. <? php echo esc_attr ( $ uid ) ; ?> . product - excerpt {
color: #666;
font - size : 14 px ;
line - height : 1 . 5 ;
margin - bottom : 15 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - price {
font - size : 18 px ;
font - weight : bold ;
margin - bottom : 10 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - price . price {
color: #333;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - price . price del {
color: #999;
text - decoration : line - through ;
font - weight : normal ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - price . price ins {
color: #77a464;
text - decoration : none ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - stock {
margin - bottom : 10 px ;
font - size : 12 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - stock . stock {
display: flex ;
align - items : center ;
gap: 5 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - stock . in - stock {
color: #77a464;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - stock . out - of - stock {
color: #ff4444;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - stock . on- backorder {
color: #ffba00;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - stock . dashicons {
font - size : 14 px ;
width: 14 px ;
height: 14 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - sku {
font - size : 11 px ;
color: #999;
margin - bottom : 10 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - sku . sku - label {
font - weight : bold ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - meta {
margin - top : auto ;
padding - top : 10 px ;
border - top : 1 px solid #f0f0f0;
font - size : 12 px ;
color: #999;
display: flex ;
flex - wrap : wrap ;
gap: 15 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - meta span {
display: flex ;
align - items : center ;
gap: 5 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - meta . dashicons {
font - size : 14 px ;
width: 14 px ;
height: 14 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - author a {
color: #999;
text - decoration : none ;
transition: color 0 . 3 s ease ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - author a : hover {
color: #0073aa;
text - decoration : underline ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - add - to - cart {
margin - top : auto ;
padding - top : 15 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - add - to - cart . added_to_cart {
display: none ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . swiper - button - next ,
. <? php echo esc_attr ( $ uid ) ; ?> . swiper - button - prev {
width: 35 px ;
height: 35 px ;
background: rgba ( 0 , 0 , 0 , 0 . 8 ) ;
border - radius : 50 %;
opacity: 0 ;
visibility: hidden ;
transition: all 0 . 3 s ease ;
margin - top : - 17 . 5 px ;
color: transparent ;
display: flex ;
align - items : center ;
justify - content : center ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . swiper - button - next : after ,
. <? php echo esc_attr ( $ uid ) ; ?> . swiper - button - prev : after {
display: none ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . swiper - button - next . dashicons ,
. <? php echo esc_attr ( $ uid ) ; ?> . swiper - button - prev . dashicons {
color: #ffffff;
font - size : 16 px ;
width: 16 px ;
height: 16 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?>: hover . swiper - button - next ,
. <? php echo esc_attr ( $ uid ) ; ?>: hover . swiper - button - prev {
opacity: 1 ;
visibility: visible ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . swiper - button - next : hover ,
. <? php echo esc_attr ( $ uid ) ; ?> . swiper - button - prev : hover {
background: rgba ( 0 , 0 , 0 , 1 ) ;
transform: scale ( 1 . 1 ) ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . swiper - button - next {
right: 10 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . swiper - button - prev {
left: 10 px ;
}
@ media ( max - width : 768 px ) {
. <? php echo esc_attr ( $ uid ) ; ?> . post - title {
font - size : 14 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - content {
padding: 12 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - taxonomies ,
. <? php echo esc_attr ( $ uid ) ; ?> . product - taxonomies {
padding: 8 px 12 px ;
font - size : 11 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . swiper - button - next ,
. <? php echo esc_attr ( $ uid ) ; ?> . swiper - button - prev {
width: 30 px ;
height: 30 px ;
margin - top : - 15 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . swiper - button - next . dashicons ,
. <? php echo esc_attr ( $ uid ) ; ?> . swiper - button - prev . dashicons {
font - size : 14 px ;
width: 14 px ;
height: 14 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - price {
font - size : 16 px ;
}
}
@ media ( max - width : 480 px ) {
. <? php echo esc_attr ( $ uid ) ; ?> . post - meta {
flex - direction : column ;
gap: 8 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . swiper - button - next ,
. <? php echo esc_attr ( $ uid ) ; ?> . swiper - button - prev {
opacity: 1 ;
visibility: visible ;
background: rgba ( 0 , 0 , 0 , 0 . 6 ) ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . product - rating {
flex - direction : column ;
align - items : flex - start ;
gap: 5 px ;
}
. <? php echo esc_attr ( $ uid ) ; ?> . post - taxonomies ,
. <? php echo esc_attr ( $ uid ) ; ?> . product - taxonomies {
padding: 6 px 10 px ;
font - size : 10 px ;
}
}
</ style >
<? php
$ js = "
document.addEventListener('DOMContentLoaded', function () {
// Function to equalize heights
function equalizeHeights(swiperElement) {
const slides = swiperElement.querySelectorAll('.swiper-slide .post-slide');
let maxHeight = 0;
// Reset heights first
slides.forEach(slide => {
slide.style.height = 'auto';
});
// Find maximum height
slides.forEach(slide => {
const height = slide.offsetHeight;
if (height > maxHeight) {
maxHeight = height;
}
});
// Apply maximum height to all slides
slides.forEach(slide => {
slide.style.height = maxHeight + 'px';
});
}
// Initialize Swiper
const swiperElement = document.querySelector('. " . esc_js ( $ uid ) . " ');
const enableEqualHeights = swiperElement.dataset.equalHeights === 'true';
const swiper = new Swiper('. " . esc_js ( $ uid ) . " ', {
slidesPerView: " . $ slides_per_view . " ,
spaceBetween: 30,
loop: true,
autoHeight: false,
navigation: {
nextEl: '. " . esc_js ( $ uid ) . " .swiper-button-next',
prevEl: '. " . esc_js ( $ uid ) . " .swiper-button-prev'
},
" . ( $ autoplay ? " autoplay: { delay: 3000, disableOnInteraction: false }, " : "" ) . "
breakpoints: {
320: {
slidesPerView: 1,
spaceBetween: 15
},
768: {
slidesPerView: " . min ( $ slides_per_view , 2 ) . " ,
spaceBetween: 20
},
1024: {
slidesPerView: " . $ slides_per_view . " ,
spaceBetween: 30
}
},
on: {
init: function() {
if (enableEqualHeights) {
// Small delay to ensure images are loaded
setTimeout(() => {
equalizeHeights(swiperElement);
}, 100);
}
}
}
});
// Re-equalize heights on window resize
if (enableEqualHeights) {
let resizeTimer;
window.addEventListener('resize', function() {
clearTimeout(resizeTimer);
resizeTimer = setTimeout(() => {
equalizeHeights(swiperElement);
}, 250);
});
// Re-equalize when images finish loading
const images = swiperElement.querySelectorAll('img');
let loadedImages = 0;
if (images.length > 0) {
images.forEach(img => {
if (img.complete) {
loadedImages++;
} else {
img.addEventListener('load', () => {
loadedImages++;
if (loadedImages === images.length) {
equalizeHeights(swiperElement);
}
});
}
});
if (loadedImages === images.length) {
equalizeHeights(swiperElement);
}
}
}
});
" ;
wp_add_inline_script ( ' swiper-js ' , $ js ) ;
wp_reset_postdata () ;
else :
echo ' <p> ' . esc_html__ ( ' No posts found. ' , ' text-domain ' ) . ' </p> ' ;
endif;
return ob_get_clean () ;
}
add_shortcode ( ' posts_carousel ' , ' cbacs_posts_carousel_shortcode ' ) ;