BsSwiper change breakpoints

[ePiliK]

HI!
I wanted to get directions on the swiper

If you wanted to have 2 slides on your mobile instead of one or anyway there are currently 3 breakpoints

If I wanted to add this

   375: {
     slidesPerView:1,
   },
   768: {
     slidesPerView: 2,
   },
   992: {
     slidesPerView: 3,
   },
   1400: {
     slidesPerView: 4,
   },

What is the simplest way?

[crftwrk]

That's a good question. Because breakpoints are set in JavaScript, there is no way to change them in shortcode or override them. So, the best option is to dequeue the init file and enqueue a custom init in child.

• Download the init source https://github.com/bootscore/bs-swiper/blob/main/assets/src/js/swiper-init.js and rename in to swiper-custom-init.js
• Copy this file to your child assets/js/ folder
• Dequeue swiper-init.js and enqueue swiper-custom-init.js with a higher priority in child's functions.php:

/**
 * Dequeue swiper-init.js and enqueue custom
 */
function custom_swiper_init() {
  wp_deregister_script( 'swiper-init-js' );
  wp_dequeue_script( 'swiper-init-js' );

  wp_enqueue_script('swiper-custom-init-js', get_stylesheet_directory_uri() . '/assets/js/swiper-custom-init.js', array(), false, true);
}
add_action( 'wp_enqueue_scripts', 'custom_swiper_init', 11 );

• Change breakpoints in swiper-custom-init.js as you want

Solved?

[cahoskins]

@crftwrk does this custom js file get minified? or, should we do it ourselves?

[crftwrk]

does this custom js file get minified? or, should we do it ourselves?

Of course, if you want to use minified code, you must minify them in that case by yourself. Use an online tool for that https://www.toptal.com/developers/javascript-minifier.

However, you asked about minified files already here https://github.com/orgs/bootscore/discussions/910. If you are using an optimizing plugin like Autoptimize, this will fetch all JS and CSS from all themes and plugins and merge them into one single and minified file. In that case, you do not need a minified JS file in your theme.

Note that optimizing/caching plugins are a must to run WordPress properly, because WordPress, themes and plugins load so many files.