Registers and initializes swiper.js to show posts, child pages, custom post types or products in a 4 (desktop), 3 (large), 2 (medium) and 1 (mobile) column cards, a hero-slider or a hero-fader by shortcode and adds related posts to single posts.
Installation
- Download Plugin
- In your admin panel, go to Plugins > and click the Add New button.
- Click Upload Plugin and Choose File, then select the Plugin’s .zip file. Click Install Now.
- 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.
Swiper.js requires a minimum of one more element than is currently displayed to create an infinite loop. In the desktop view, ensure there are at least five elements. The provided example is broken as it contains only two items. Shrink your browser window to phone size view and product example will work as expected.
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 commaorder=""
– ASC or DESCorderby=""
– date, title, or randposts=""
– amount of posts to showcategories="false"
– hide categories badgesexcerpt="false"
– hide excerpttags="false"
– hide tags badges
[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 commaorder=""
– ASC or DESCorderby=""
– date, title, or randposts=""
– amount of posts to showcategories="false"
– hide categories badgesexcerpt="false"
– hide excerpttags="false"
– hide tags badges
Single-posts by id
[bs-swiper-* type="post" id="1, 15"]
Options
id=""
– id of post, multiple ids separated by commacategories="false"
– hide categories badgesexcerpt="false"
– hide excerpttags="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 pageorder=""
– ASC or DESCorderby=""
– date, title, or randposts=""
– amount of posts to showexcerpt="false"
– hide excerpt
Single-pages by id
[bs-swiper-* type="page" id="2, 25"]
Options
id=""
– id of page, multiple ids separated by commaexcerpt="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-typetax=""
– taxonomyterms=""
– terms-slug, multiple terms separated by commaorder=""
– ASC or DESCorderby=""
– date, title, or randposts=""
– amount custom post types to showexcerpt="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 commaexcerpt="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
orrand
. Specify how products will be ordered by (Default:date
)order="DESC"
– Specify if products will be orderedASC
orDESC
(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
)
Related Posts
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.
Related posts can simply be hidden by removing the hook in your child’s single-*.php
or by using a single line of CSS:
.related-posts {
display: none;
}
Overriding templates via theme
Template files can be found within the /bs-swiper-main/templates/ plugin directory.
Edit files in an upgrade-safe way using overrides. Copy the template into a directory within your theme named /bs-swiper-main/ keeping the same file structure but removing the /templates/ subdirectory. Path must be /your-theme/bs-swiper-main/[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
Earlier versions can be downloaded via the Github repository. Install/downgrade via the plugin uploader.
Load version on Github
- [BUGFIX] Downgrade to update checker v4
Load version on Github
- [UPDATE] Swiper 8.3.2
Load version on Github
- [IMPROVEMENT] Reformat all files
- [UPDATE] Swiper 8.2.5
Load version on Github
- [UPDATE] Swiper 8.2.3
Load version on Github
- [UPDATE] Swiper 8.1.1
Load version on Github
- [UPDATE] Swiper 8.0.2
Load version on Github
- [NEW] Added shortcode to show single items by id
- [NEW] Added shortcode for custom post types by terms-slug
- [REMOVED] Shortcode for CPT by parent terms id
- [CHANGED] Template sc-swiper-card.php
- [CHANGED] Template sc-swiper-hero.php
- [CHANGED] Template sc-swiper-hero-fade.php
- [UPDATE] Swiper 7.3.4
Load version on Github
- Update to Swiper 7.0.9
- Added
bg-dark
to heroes
Load version on Github
- Update to Swiper 7.0.4
- Changed repository and plugin name
Load version on Github
- Added new hero-fade template
Load version on Github
- Removed source map in swiper-bundle.min.js
Load version on Github
- Initial release
Arun Kumar
says: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
says:Try this
Arun Kumar
says:Thank you so much for that code base and how to add an image overlay on swiper.
nfgngn cbnbcn
says: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
says:Do you use a category named “equal-height” on your site? Replace that with slug from your category.
nfgngn cbnbcn
says:Oh, whoops!? Got it.
Thanks
Andrew
says: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
says: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
says: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
says:Please share a link to the site with embed shortcode and a link to one of the posts in this category.
Andrew
says: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
says:We cannot help on local projects. Please transfer site to a live server.
Andrew
says: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
says:Basti
says:Please create an admin account and send user and password to store(at)bootscore.me
Andrew
says:ok
Basti
says:Your site is 403. Please make sure that everything is fine 😉
Andrew
says:Sorry, was blocking Europe, I guess thats where you are?
Basti
says: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
says:Oh, o.k. bummer! Hey thanks a lot for checking it out. Much appreciated.
Cheers
Basti
says:You’re welcome 👍
Henry Sprogis
says: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
says: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 findslidesPerView: 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 lines12
to18
.Luke K
says: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
says:Hi Luke,
thank you. Do you have a category named “products” on your site? Change this with your category slug.