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?