Loading...

bS Swiper

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

  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-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

Swiper Post 4

/

Just another post to demonstrate the swiper hero

1200x900-dark

Swiper Post 3

/

Just another post to demonstrate the swiper hero

1200x900-dark

Swiper Post 2

/

Just another post to demonstrate the swiper hero

1200x900-dark

Swiper Post 1

/

Just another post to demonstrate the swiper hero

1200x900-dark

Swiper Post 4

Just another post to demonstrate the swiper hero

Read more »
1200x900-dark

Swiper Post 3

Just another post to demonstrate the swiper hero

Read more »
1200x900-dark

Swiper Post 2

Just another post to demonstrate the swiper hero

Read more »

1200x900-dark

Swiper Post 4

Just another post to demonstrate the swiper hero

Read more »
1200x900-dark

Swiper Post 3

Just another post to demonstrate the swiper hero

Read more »
1200x900-dark

Swiper Post 2

Just another post to demonstrate the swiper hero

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

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

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

Changelog

Earlier versions can be downloaded via the Github repository. Install/downgrade via the plugin uploader.

Load version on Github

  • [IMPROVEMENT] Fix product star rating #15

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

25 Comments on “bS Swiper”

  • 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

      .heroes {
          height: 400px;
      }
      
      .swiper-hero-img {
          object-fit: cover;
          height: 100%;
      }
      
  • 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 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

    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.

Comments are closed.

To top