Default
[[bs-swiper-columns type="post" category="post-templates"]]
Products by brands
Hide navigation arrows
[[bs-swiper-columns type="post" category="post-templates" navigation="false"]]
[bs-swiper-columns type=”post” category=”post-templates” navigation=”false”]
[bs-swiper-columns type=”post” category=”post-templates” navigation=”false”]
[[bs-swiper-columns type="post" category="post-templates" pagination="false"]]
[bs-swiper-columns type=”post” category=”post-templates” pagination=”false”]
[bs-swiper-columns type=”post” category=”post-templates” pagination=”false”]
Custom Columns
[[bs-swiper-columns type="product" tax="product_cat" terms="clothing" slidesperview="2,2,2,3,3,3"]]
[bs-swiper-columns type=”product” tax=”product_cat” terms=”clothing” slidesperview=”2,2,2,3,3,3″]
Infinite loop
[[bs-swiper-columns type="post" category="post-templates" loop="true"]]
Autoplay
[[bs-swiper-columns type="post" category="post-templates" autoplay="true"]]
Delay
[[bs-swiper-columns type="post" category="post-templates" autoplay="true" delay="300"]]
Gap/spacebetween
[[bs-swiper-columns type="post" category="post-templates" spacebetween="0"]]
Effects
Imporant! Effects works only if slidesperview is setted to one item slidesperview="1,1,1,1,1,1" on all screen sizes. This is limited by swiper.js.
Fade
[[bs-swiper-columns type="post" category="post-templates" slidesperview="1,1,1,1,1,1" effect="fade"]]
Cube
[[bs-swiper-columns type="post" category="post-templates" slidesperview="1,1,1,1,1,1" effect="cube"]]
Coverflow
[[bs-swiper-columns type="post" category="post-templates" slidesperview="1,1,1,1,1,1" effect="coverflow"]]
Flip
[[bs-swiper-columns type="post" category="post-templates" slidesperview="1,1,1,1,1,1" effect="flip"]]
Cards
[[bs-swiper-columns type="post" category="post-templates" slidesperview="1,1,1,1,1,1" effect="cards"]]
Shortcode must be wrapped inside a <div class="overflow-hidden">...</div>, otherwise cards effect breaks the container width.
Creative
[[bs-swiper-columns type="post" category="post-templates" slidesperview="1,1,1,1,1,1" effect="creative"]]
Speed
Default 300ms
[[bs-swiper-columns type="post" category="post-templates" speed="1000"]]
[[bs-swiper-columns type="post" category="post-templates" slidesperview="1,1,1,1,1,1" effect="coverflow" speed="3000"]]
Contextual filters
Card-overlay
Shortcode
[bs-swiper layout="columns" type="post" category="post-templates" excerpt="false" categories="false" tags="false" meta="false" readmore="false" context="custom-card-overlay" navigation="false"]
SCSS
// custom card-overlay
[data-context="custom-card-overlay"] {
// Change the swiper theme color
--swiper-theme-color: var(--#{$prefix}body-color);
// Make the shadow visible by using padding and negative margin, .swiper has class overflow: hidden;
margin-left: -12px;
margin-right: -12px;
.swiper {
padding-left: 12px;
padding-right: 12px;
}
}
PHP
/**
* Card overlay
*/
// Change bs-swiper-wrapper padding-bottom class
// Add mb-5 spacer to the cards instead to show the shadow
function change_card_overlay_bs_swiper_wrapper_padding_bottom($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-card-overlay') {
return "";
}
return $class;
}
add_filter('bootscore/bs-swiper/class/wrapper/padding-bottom', 'change_card_overlay_bs_swiper_wrapper_padding_bottom');
// Card class
function change_card_overlay($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-card-overlay') {
return "card border-0 shadow bg-dark h-auto rounded-4 overflow-hidden mb-5";
}
return $class;
}
add_filter('bootscore/class/loop/card', 'change_card_overlay');
// Card-img class
function change_card_overlay_img($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-card-overlay') {
return "card-img";
}
return $class;
}
add_filter('bootscore/class/loop/card/image', 'change_card_overlay_img');
// Card-body class
function change_card_overlay_body($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-card-overlay') {
return "card-img-overlay d-flex flex-column";
}
return $class;
}
add_filter('bootscore/class/loop/card/body', 'change_card_overlay_body');
// Card heading link class
function change_card_overlay_heading_link($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-card-overlay') {
return "text-decoration-none mt-auto stretched-link";
}
return $class;
}
add_filter('bootscore/class/loop/card/title/link', 'change_card_overlay_heading_link');
// Card heading class
function change_card_overlay_heading($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-card-overlay') {
return "text-white h3 lh-1 fw-bold";
}
return $class;
}
add_filter('bootscore/class/loop/card/title', 'change_card_overlay_heading');
//Add author gravatar and date after title for custom-card-overlay context
function add_custom_card_overlay_meta($location) {
// Only run if we're in the swiper shortcode with custom-card-overlay context
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-card-overlay') {
?>
<div class="custom-card-overlay-meta d-flex align-items-center gap-2 mt-2 text-white">
<!-- Author Gravatar -->
<div class="author-avatar">
<?php
echo get_avatar(
get_the_author_meta('ID'),
32,
'',
'',
array('class' => 'rounded-circle border border-white shadow')
);
?>
</div>
<!-- Date -->
<div class="post-date small ms-auto">
<i class="fa-solid fa-calendar-days"></i> <span><?php echo get_the_date(); ?></span>
</div>
</div>
<?php
}
}
add_action('bootscore_after_loop_title', 'add_custom_card_overlay_meta');
Card vertical overlay
Shortcode
[bs-swiper layout="columns" type="post" category="swiper-demo-posts" context="custom-vertical-card-overlay" meta="false" tags="false"]
SCSS
// Vertical overlay cards
[data-context="custom-vertical-card-overlay"] {
// Change the swiper theme color
--swiper-theme-color: var(--#{$prefix}body-color);
// Make the shadow visible by using padding and negative margin, .swiper has class overflow: hidden;
margin-left: -12px;
margin-right: -12px;
.swiper {
padding-left: 12px;
padding-right: 12px;
}
.backdrop-blur {
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
}
}
PHP
/**
* Vertical card overlay
*/
// Change bs-swiper-wrapper padding-bottom class
// Add mb-5 spacer to the cards instead to show the shadow
function change_vertical_card_overlay_bs_swiper_wrapper_padding_bottom($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
return "";
}
return $class;
}
add_filter('bootscore/bs-swiper/class/wrapper/padding-bottom', 'change_vertical_card_overlay_bs_swiper_wrapper_padding_bottom');
// Card class
function change_vertical_card_overlay($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
return "card border-0 shadow bg-dark h-auto rounded-5 overflow-hidden mb-5";
}
return $class;
}
add_filter('bootscore/class/loop/card', 'change_vertical_card_overlay');
// Card-img class
function change_vertical_card_overlay_img($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
return "card-img";
}
return $class;
}
add_filter('bootscore/class/loop/card/image', 'change_vertical_card_overlay_img');
// Card-body class
function change_vertical_card_overlay_body($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
return "card-img-overlay d-flex flex-column";
}
return $class;
}
add_filter('bootscore/class/loop/card/body', 'change_vertical_card_overlay_body');
// Open wrapper div for vertical cards context before loop title
function vertical_cards_open_overlay_wrapper($location) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
echo '<div class="bg-black bg-opacity-25 backdrop-blur rounded-5-inner p-3 p-md-4 shadow mt-auto">';
}
}
add_action('bootscore_before_loop_title', 'vertical_cards_open_overlay_wrapper');
// Change category badge class
function vertical_cards_change_category_badge_link_class($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
return "custom-category badge bg-dark bg-opacity-25 backdrop-blur text-decoration-none text-white fw-lighter rounded-pill p-2 px-3 mt-2 ms-2 shadow";
}
return $class;
}
add_filter('bootscore/class/badge/category', 'vertical_cards_change_category_badge_link_class');
// Change heading class
function vertical_cards_change_heading_class($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
return "h5 text-white text-uppercase fw-lighter mb-3";
}
return $class;
}
add_filter('bootscore/class/loop/card/title', 'vertical_cards_change_heading_class');
// Change excerpt class
function vertical_cards_change_excerpt_class($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
return "small lh-sm fw-lighter";
}
return $class;
}
add_filter('bootscore/class/loop/card-text/excerpt', 'vertical_cards_change_excerpt_class');
// Change excerpt link class
function vertical_cards_change_excerpt_link_class($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
return "text-decoration-none text-white";
}
return $class;
}
add_filter('bootscore/class/loop/card-text/excerpt/link', 'vertical_cards_change_excerpt_link_class');
// Change read-more class
function vertical_cards_change_read_more_class($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
return "btn btn-outline-light btn-sm rounded-pill w-100";
}
return $class;
}
add_filter('bootscore/class/loop/read-more', 'vertical_cards_change_read_more_class');
// Close wrapper div for vertical cards context after loop tags
function vertical_cards_close_overlay_wrapper($location) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'custom-vertical-card-overlay') {
echo '</div>';
}
}
add_action('bootscore_after_loop_tags', 'vertical_cards_close_overlay_wrapper');
Tailwind cards
Sticky
Default
Sidebar Left
Full Width Image
Sidebar None
Comments
Shortcode
[bs-swiper-columns type="post" category="post-templates" context="tailwind-cards" meta="false" tags="false" readmore="false" slidesperview="1,1,2,3,3,3"]
SCSS
// Tailwind style cards
[data-context="tailwind-cards"] {
// Change the swiper theme color
--swiper-theme-color: var(--#{$prefix}body-color);
// Make the shadow visible by using padding and negative margin, .swiper has class overflow: hidden;
margin-left: -12px;
margin-right: -12px;
.swiper {
padding-left: 12px;
padding-right: 12px;
}
}
// Image inner border-radius
.rounded-5-inner {
border-radius: $border-radius * 4;
}
// Create a custom dark/light button that changes on data-bs-theme="dark"
.btn-custom {
color: var(--#{$prefix}gray-100);
background-color: var(--#{$prefix}gray-900);
border-color: var(--#{$prefix}gray-900);
&:hover {
color: var(--#{$prefix}gray-100);
background-color: var(--bs-gray-700);
border-color: var(--bs-gray-700);
}
}
[data-bs-theme="dark"] {
.btn-custom {
color: var(--#{$prefix}gray-900);
background-color: var(--#{$prefix}gray-100);
border-color: var(--#{$prefix}gray-100);
&:hover {
color: var(--#{$prefix}gray-900);
background-color: var(--#{$prefix}gray-300);
border-color: var(--#{$prefix}gray-300);
}
}
}
PHP
/**
* Tailwind style cards
*/
//Change responsive wrapper class
function swiper_responsive_navigation_wrapper_spacer($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
return "px-xl-5";
}
return $class;
}
add_filter('bootscore/bs-swiper/class/wrapper/padding-x', 'swiper_responsive_navigation_wrapper_spacer');
// Change bs-swiper-wrapper padding-bottom class
// Add mb-5 spacer to the cards instead to show the shadow
function change_tailwind_card_bs_swiper_wrapper_padding_bottom($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
return "";
}
return $class;
}
add_filter('bootscore/bs-swiper/class/wrapper/padding-bottom', 'change_tailwind_card_bs_swiper_wrapper_padding_bottom');
// Card class
function change_tailwind_card($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
return "card shadow h-auto rounded-5 mb-5";
}
return $class;
}
add_filter('bootscore/class/loop/card', 'change_tailwind_card');
// Change responsive navigation arrow class
function swiper_responsive_navigation_arrows($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
return "d-none d-xl-block";
}
return $class;
}
add_filter('bootscore/bs-swiper/class/navigation', 'swiper_responsive_navigation_arrows');
// Show custom tags before thumbnail for tailwind-cards context
function tailwind_cards_custom_tags_before_thumbnail($location) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
$tags = get_the_tags();
if ($tags) {
echo '<div class="custom-tags-wrapper d-flex flex-wrap gap-1 position-absolute top-0 start-0 mt-4 ms-4">';
foreach ($tags as $tag) {
echo '<span class="custom-tag badge bg-dark bg-opacity-25 text-white rounded-pill fw-lighter p-2">';
echo '<i class="fa-solid fa-tag me-1"></i>'; // Font Awesome icon
echo esc_html($tag->name);
echo '</span>';
}
echo '</div>';
}
}
}
add_action('bootscore_before_loop_thumbnail', 'tailwind_cards_custom_tags_before_thumbnail');
// Open wrapper div for tailwind-cards context before thumbnail
function tailwind_cards_open_thumbnail_wrapper($location) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
echo '<div class="pt-2 px-2">';
}
}
add_action('bootscore_before_loop_thumbnail', 'tailwind_cards_open_thumbnail_wrapper');
// Change loop thumbnail class
function swiper_loop_thumbnail($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
return "rounded-5-inner";
}
return $class;
}
add_filter('bootscore/class/loop/card/image', 'swiper_loop_thumbnail');
// Close wrapper div for tailwind-cards context after thumbnail
function tailwind_cards_close_thumbnail_wrapper($location) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
echo '</div>';
}
}
add_action('bootscore_after_loop_thumbnail', 'tailwind_cards_close_thumbnail_wrapper');
// Change card-body class
function tailwind_cards_card_body($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
return "card-body p-4 d-flex flex-column";
}
return $class;
}
add_filter('bootscore/class/loop/card/body', 'tailwind_cards_card_body');
// Change category badge class
function tailwind_cards_change_category_badge_link_class($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
return "small text-body-secondary text-uppercase fw-lighter text-decoration-none";
}
return $class;
}
add_filter('bootscore/class/badge/category', 'tailwind_cards_change_category_badge_link_class');
// Change heading class
function tailwind_cards_change_heading_class($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
return "h3";
}
return $class;
}
add_filter('bootscore/class/loop/card/title', 'tailwind_cards_change_heading_class');
// Change excerpt class
function tailwind_cards_change_excerpt_class($class) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
return "small fw-lighter";
}
return $class;
}
add_filter('bootscore/class/loop/card-text/excerpt', 'tailwind_cards_change_excerpt_class');
// Add custom footer with date and button for tailwind-cards context
function tailwind_cards_custom_footer($location) {
if (!empty($GLOBALS['bs_swiper_context']) && $GLOBALS['bs_swiper_context'] === 'tailwind-cards') {
?>
<div class="card-text d-flex align-items-center mt-auto">
<div class="post-date small text-body-secondary fw-lighter">
<i class="fa-solid fa-calendar-days"></i> <span><?php echo get_the_date(); ?></span>
</div>
<a class="btn btn-sm btn-custom rounded-pill shadow px-3 ms-auto" href="<?php the_permalink(); ?>">
Learn more <i class="fa-solid fa-arrow-right"></i>
</a>
</div>
<?php
}
}
add_action('bootscore_after_loop_tags', 'tailwind_cards_custom_footer');
