Account
Cart

bs Swiper

| 25 Comments on bs Swiper

Integrates Swiper.js to create responsive sliders and carousels for cards, heroes, and related posts using simple shortcodes.

Installation

  1. Download Plugin
  2. In your admin panel, go to Plugins > and click the Add New button.
  3. Click Upload Plugin and Choose File, then select the Plugin’s .zip file. Click Install Now.
  4. Click Activate to use your new Plugin right away.

Usage

Select template you want to use by replacing bs-swiper-* placeholder in shortcode examples.

  • bs-swiper-card shows items in 4 (xxl), 3 (lg), 2 (md) and 1 (sm) column cards.
  • bs-swiper-card-autoplay shows items in 4 (xxl), 3 (lg), 2 (md) and 1 (sm) column cards with autoplay.
  • bs-swiper-card-product shows WooCommerce products in 4 (xxl), 3 (lg), 2 (md) and 1 (sm) column cards.
  • bs-swiper-hero shows items in a hero-slider with auto-slide effect. Items must have a featured-image.
  • bs-swiper-hero-fade shows items in a hero-slider with auto-fade effect. Items must have a featured-image.
1200x900-dark

Post Demos 2

Demo Post 1

/ by Basti | Leave a Comment

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 2

/ by Basti | Leave a Comment

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 3

/ by Basti | 2 Comments on Demo Post 3

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 4

/ by Basti | Leave a Comment

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 5

/ by Basti | Leave a Comment

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 1

/ by Basti | Leave a Comment

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 2

/ by Basti | Leave a Comment

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 3

/ by Basti | 2 Comments on Demo Post 3

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 4

/ by Basti | Leave a Comment

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 5

/ by Basti | Leave a Comment

Just another post to demonstrate the theme’s loop.

Read more »

e9558ae0-61f0-4c3b-9a9d-b2f4d33a8199

T-Shirt .dm-switch

25,00 € Inc. 19% VAT

S, M, L, XL, 2XL, 3XL

Select options
This product has multiple variants. The options may be chosen on the product page
bs TOC

bs TOC

10,00 € Inc. 19% VAT
Add to cart
1ecee60a-316d-44c3-82a8-9ba112f8622a

T-Shirt .btn

25,00 € Inc. 19% VAT

S, M, L, XL, 2XL, 3XL

Select options
This product has multiple variants. The options may be chosen on the product page
97e6a0ad-d4c4-4196-a25d-86fb7a017fdf

T-Shirt .btn-outline

25,00 € Inc. 19% VAT

S, M, L, XL, 2XL, 3XL

Select options
This product has multiple variants. The options may be chosen on the product page
bS Dark Mode

bs Dark Mode

10,00 € Inc. 19% VAT
Add to cart
bS Isotope

bs Isotope

19,00 € Inc. 19% VAT
Add to cart

1200x900-dark

Post Demos 2

Demo Post 1

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 2

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 3

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 4

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 1

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 2

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 3

Just another post to demonstrate the theme’s loop.

Read more »

1200x900-dark

Post Demos 2

Demo Post 4

Just another post to demonstrate the theme’s loop.

Read more »

Posts

Posts by category

[bs-swiper-* type="post" category="cars, boats" order="ASC" orderby="date" posts="6"]
Options
  • category="" – category-slug, multiple categories separated by comma
  • order="" – ASC or DESC
  • orderby="" – date, title, or rand
  • posts="" – amount of posts to show
  • categories="false" – hide categories badges
  • excerpt="false" – hide excerpt
  • tags="false" – hide tags badges

Posts by tags

[bs-swiper-* type="post" tax="post_tag" terms="bikes, motorbikes" order="DESC" orderby="date" posts="5"]
Options
  • tax="" – taxonomy (post_tag)
  • terms="" – tags-slug, multiple terms separated by comma
  • order="" – ASC or DESC
  • orderby="" – date, title, or rand
  • posts="" – amount of posts to show
  • categories="false" – hide categories badges
  • excerpt="false" – hide excerpt
  • tags="false" – hide tags badges

Single-posts by id

[bs-swiper-* type="post" id="1, 15"]
Options
  • id="" – id of post, multiple ids separated by comma
  • categories="false" – hide categories badges
  • excerpt="false" – hide excerpt
  • tags="false" – hide tags badges

Pages

Child-pages by parent-page id

[bs-swiper-* type="page" post_parent="21" order="ASC" orderby="title" posts="6"]

Showing child-pages in parent-page is very useful to avoid empty parent-pages.

Options
  • post_parent="" – id of parent page
  • order="" – ASC or DESC
  • orderby="" – date, title, or rand
  • posts="" – amount of posts to show
  • excerpt="false" – hide excerpt

Single-pages by id

[bs-swiper-* type="page" id="2, 25"]
Options
  • id="" – id of page, multiple ids separated by comma
  • excerpt="false" – hide excerpt

Custom Post Types

Cpt by terms

[bs-swiper-* type="isotope" tax="isotope_category" terms="dogs, cats" order="DESC" orderby="date" posts="5"]
Options
  • type="" – type of custom-post-type
  • tax="" – taxonomy
  • terms="" – terms-slug, multiple terms separated by comma
  • order="" – ASC or DESC
  • orderby="" – date, title, or rand
  • posts="" – amount custom post types to show
  • excerpt="false" – hide excerpt

Single cpt by id

[bs-swiper-* type="isotope" id="33, 31"]
Options
  • id="" – id of custom-post-type, multiple ids separated by comma
  • excerpt="false" – hide excerpt

WooCommerce Products

Shortcode to show products

[bs-swiper-card-product]
Options
  • category="cars, boats" – Category slug, multiple categories separated by comma. Will pull products matching these categories (Default: '')
  • id="1, 2, 3" – id of product(s), multiple ids separated by comma. Will show products matching these ids (Default: '')
  • brand="brand1, brand2" – Will pull products matching these brands (Default: '')
  • posts="12" – Specify how many products will be shown (Default: -1)
  • orderby="date" – date, title or rand. Specify how products will be ordered by (Default: date)
  • order="DESC" – Specify if products will be ordered ASC or DESC (Default: DESC)
  • featured="true" – Will pull featured products (Default: false)
  • outofstock="false" – Will hide out of stock products (Default: true)
  • onsale="true" – Will show only onsale products (Default: '')
  • showhidden="true" Shows products hidden from catalog (Default: false)

Demo, related posts are above the pagination.

Bootscore v5.3.1 added a hook to all single-*.php‘s:

<?php if (function_exists('bootscore_related_posts')) bootscore_related_posts(); ?>

bs Swiper hooks related posts there showing the latest 12 posts from the same category. This means that the category should have at least 4 posts to show the related posts correctly.

Filters

Add filters to child’s functions.php.

Change heading ‘You might also like’:

/**
 * Change related posts heading
 */
function change_related_posts_heading($title) {
  return 'Also very interesting...';
}
add_filter('bootscore/bs-swiper/related-posts/heading', 'change_related_posts_heading');

Remove related posts:

/**
 * Disable related posts
 */
add_filter('bootscore_disable_related_posts', '__return_true');

Overriding templates via theme

Template files can be found within the /bs-swiper/templates/ plugin directory.

Edit files in an upgrade-safe way using overrides. Copy the template into a directory within your theme named bs-swiper keeping the same file structure but removing the templates subdirectory. Path must be your-theme/bs-swiper/[file].php.

The copied file will now override the bs Swiper template file. Change cards, classes or HTML as you want.

Templates that can be overridden

  • related-posts.php
  • sc-swiper-card.php
  • sc-swiper-card-autoplay.php
  • sc-swiper-card-product.php
  • sc-swiper-hero.php
  • sc-swiper-hero-fade.php

Changelog

Currently bs Swiper v5.8.11

Visit the Releases page for a detailed changelog. Previous versions can be downloaded from the Assets tab. Install/downgrade via the plugin uploader.

25 Comments on “bs Swiper”

  • Arun Kumar

    How to Change The Hero Swiper Hight I have tried to edit in hero-swiper template am unable to get what I need

    I need to make hero-swiper height 400 px only please help me

    • Basti

      Try this

      .heroes {
    height: 400px;
}

.swiper-hero-img {
    object-fit: cover;
    height: 100%;
}

  • Arun Kumar

    Thank you so much for that code base and how to add an image overlay on swiper.

  • nfgngn cbnbcn

    Hi,
    when i add short code to page e.g
    [bs-swiper-card type="post" category="equal-height" order="DESC" orderby="date" posts="4"]
    nothing happens..?
    Is there something else i’m missing here?

    Thanks

    • Basti

      Do you use a category named “equal-height” on your site? Replace that with slug from your category.

  • nfgngn cbnbcn

    Oh, whoops!? Got it.
    Thanks

  • Andrew

    Hi,
    how do I find the ID of parent taxonomy? I have [bs-swiper-hero type="job_listing" tax="job_listing_category" cat_parent="39" order="DESC" orderby="date" posts="10"] 39 is the ID of the job listing page..

    Thanks

    • Basti

      You will find id when you edit taxonomy/category in backend in the URL. For example &tag_ID=116. In this case id is 116.

  • Andrew

    HI,
    [bs-swiper-hero type="post" category="test" order="DESC" orderby="date" posts="3"]

    Doesn’t work for me with 3 posts with the category of ‘test’ displays nothing…

    Why would this be? any ideas?

    Thanks

    • Basti

      Please share a link to the site with embed shortcode and a link to one of the posts in this category.

  • Andrew

    Hi,
    Sorry, working on this locally. Not sure what’s going on there.. the cards work no problem with products (using woocommerce) I thought the problem with the slider may be I’m using wp job manager that has seperate ‘categories’ (custom posts?) Job_listing_category job_listings so I tested it with wp regular categories and posts. Can’t get any of the shortcodes to work: child, custom post, page, post..any ideas? Thanks,
    Andrew

    • Basti

      We cannot help on local projects. Please transfer site to a live server.

  • Andrew

    OK, Sorry.
    freetowork.co.nz/front/
    [bs-swiper-hero type="job_listing" tax="job_listing_category" cat_parent="39" order="DESC" orderby="date" posts="3"]

    Not sure if I have the ‘type’ and ‘tax’ right here..?

    many thanks!

  • Andrew

    • Basti

      Please create an admin account and send user and password to store(at)bootscore.me

  • Andrew

    ok

    • Basti

      Your site is 403. Please make sure that everything is fine 😉

  • Andrew

    Sorry, was blocking Europe, I guess thats where you are?

    • Basti

      freetowork.co.nz/swiper-jobs/

      You should use card template. Heroes need a featured image to work and jobs plugin has no featured image.

  • Andrew

    Oh, o.k. bummer! Hey thanks a lot for checking it out. Much appreciated.
    Cheers

    • Basti

      You’re welcome 👍

  • Henry Sprogis

    Hello.
    Is it possible to change the item-count in view?
    4 in Desktop is too cluttered for me. Would gladly switch to 3.

    • Basti

      Hello Henry,

      you can change this in js/swiper-init.js https://github.com/bootscore/bs-swiper/blob/main/js/swiper-init.js. There you will find slidesPerView: 4,. Change this to 3.

      Important! If you edit the plugin files, make sure that you have disabled the update checker. Open plugin main.php and delete snippet in lines 12 to 18.

      // Update checker
require 'update/update-checker.php';
$myUpdateChecker = Puc_v4_Factory::buildUpdateChecker(
	'https://bootscore.me/wp-content/plugins/bs-swiper-main/update/plugin.json',
	__FILE__, //Full path to the main plugin file or functions.php.
	'bs-swiper-main'
);

  • Luke K

    Hey Basti,

    Thanks for creating Bootscore – I love it! It has saved me many hours.

    I have a problem though, I am trying to display products using the BS Swiper plugin and your shortcode [bs-swiper-card-product order="ASC" orderby="date" posts="24" category="products"]

    For some reason, nothing is being displayed when I use the shortcode. I setup a new WordPress installation and installed the latest Bootscore, Bootcommerce Child Theme & BS Swiper and still the sortcode does nothing.

    Is there anything obvious that might cause this?

    Thanks,
    Luke

    • Basti

      Hi Luke,

      thank you. Do you have a category named “products” on your site? Change this with your category slug.

Comments are closed.

On this page