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.
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-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.
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
[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
Single-posts by id
[bs-swiper-* type="post" id="1, 15"]
Options
- id: id of post, multiple ids separated by comma
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 pages to show
Single-pages by id
[bs-swiper-* type="page" id="2, 25"]
Options
- id: id of page, multiple ids separated by comma
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 of custom post types to show
Single cpt by id
[bs-swiper-* type="isotope" id="33, 31"]
Options
- id: id of custom-post-type, multiple ids separated by comma
WooCommerce Products
Shortcode to show products
[bs-swiper-card-product category="shoes, trousers" order="DESC" orderby="date" posts="12"]
Options:
- category: category slug, multiple categories separated by comma
- order: ASC or DESC
- orderby: date, title, or rand
- posts: amount of products to show
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
- sc-swiper-card.php
- sc-swiper-card-product.php
- sc-swiper-hero.php
- sc-swiper-hero-fade.php
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.