Как заставить работать 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' );