Как заставить работать Swiper слайдер в админке Wordpress

Всем привет. Возможно кто-то сможет подсказать в чём причина того, что не работает Swiper slider. Буду рада любым советам, догадкам и подсказкам :)

Вызывается данный скрипт в 2 местах Wordpress-сайта: на странице фронтенда и в админке(кастомный блок для гутенберга). На фронтенде этот скрипт работает, а в админке никак не хочет. По коду админки файлы слайдера есть и находятся после 'wp-blocks', 'wp-element', 'wp-i18n', 'jquery', но не происходит добавление дополнительных классов от слайдера, соответственно и слайды не пытаются переключаться.

<div class="slider-gutenberg-block">
  <div class="swiper-container">
     <div class="swiper-wrapper">
        <div class="swiper-slide">
           <img src="#" alt="Слайд">
        </div>
       <div class="swiper-slide">
          <img src="#" alt="Слайд">
       </div>
       <div class="swiper-slide">
          <img src="#" alt="Слайд">
       </div>
     </div>
   <div class="swiper-button-prev"></div>
   <div class="swiper-button-next"></div>
  </div>
</div>
const PSwiper = new Swiper( '.swiper-container', {
  direction: 'horizontal',
  effect: 'fade',
  setWrapperSize: true,
  slidesPerView: 1,
  loop: true,
  autoplay: {
    delay: 7000,
    disableOnInteraction: false,
  },
  navigation: {
    nextEl: '.swiper-button-next',
    prevEl: '.swiper-button-prev',
  },
} );

Подключаются все скрипты через функцию создание блоков для Gutenberg - register_block_type( ) Весь код с подключениями ниже.

function slider_gutenberg_block_cgb_block_assets() {

  wp_register_script(
    'cgb-script',
    plugins_url( '/dist/blocks.build.js', dirname( __FILE__ ) ),
    array( 'wp-blocks', 'wp-i18n', 'wp-element', 'wp-editor' ),
    filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.build.js' ),
    true
  );
  wp_register_style(
    'cgb-editor-style',
    plugins_url( 'dist/blocks.editor.build.css', dirname( __FILE__ ) ),
    array( 'wp-edit-blocks' ),
    filemtime( plugin_dir_path( __DIR__ ) . 'dist/blocks.editor.build.css' )
  );

  wp_register_script(
    'cgb-swiper-lib-script',
    plugins_url( 'src/block/swiper-slider/swiper-bundle.min.js', dirname( __FILE__ ) ),
    array( 'wp-blocks', 'wp-element', 'wp-i18n', 'jquery' ),
    filemtime( plugin_dir_path( __DIR__ ) . 'src/block/swiper-slider/swiper-bundle.min.js' ),
    true
  );
  wp_register_script(
    'cgb-swiper-init-script',
    plugins_url( 'src/block/swiper-slider/swiper-init.js', dirname( __FILE__ ) ),
    array( 'wp-blocks', 'wp-element', 'wp-i18n', 'jquery', 'cgb-swiper-lib-script' ),
    filemtime( plugin_dir_path( __DIR__ ) . 'src/block/swiper-slider/swiper-init.js' ),
    true
  );
  wp_register_style(
    'cgb-swiper-style',
    plugins_url( 'src/block/swiper-slider/swiper-bundle.min.css', dirname( __FILE__ ) ),
    array( 'wp-edit-blocks' ),
    filemtime( plugin_dir_path( __DIR__ ) . 'src/block/swiper-slider/swiper-bundle.min.css' )
  );


  register_block_type(
    'cgb/block-slider-gutenberg-block', array(
      'style'         => array('cgb-swiper-style'),
      'script'      => array('cgb-swiper-lib-script', 'cgb-swiper-init-script'),
      'editor_style'  => array('cgb-editor-style', 'cgb-swiper-style'),
      'editor_script' => array('cgb-script', 'cgb-swiper-lib-script', 'cgb-swiper-init-script'),
    )
  );
}

add_action( 'init', 'slider_gutenberg_block_cgb_block_assets' );

Ответы (0 шт):