{"id":1458,"date":"2024-03-14T08:14:11","date_gmt":"2024-03-14T08:14:11","guid":{"rendered":"https:\/\/mklasen.com\/?p=1458"},"modified":"2024-03-14T08:28:37","modified_gmt":"2024-03-14T08:28:37","slug":"swiper-setup-when-using-wp-scripts","status":"publish","type":"post","link":"https:\/\/mklasen.com\/swiper-setup-when-using-wp-scripts\/","title":{"rendered":"Swiper setup when using wp-scripts"},"content":{"rendered":"\n
I haven’t used Swiper in a while, and while setting it up this time, I noticed the slider was not playing automatically. After some investigation it appeared to need some modules, loaded from swiper\/modules.<\/p>\n\n\n\n
I’m using The slider works beautifully with the following snippet:<\/p>\n\n\n\n I haven’t used Swiper in a while, and while setting it up this time, I noticed the slider was not playing automatically. After some investigation it appeared to need some modules, loaded from swiper\/modules. I’m using @wordpress\/scripts with the watch command, like below: The slider works beautifully with the following snippet:<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_genesis_hide_title":false,"_genesis_hide_breadcrumbs":false,"_genesis_hide_singular_image":false,"_genesis_hide_footer_widgets":false,"_genesis_custom_body_class":"","_genesis_custom_post_class":"","_genesis_layout":"","footnotes":""},"categories":[1],"tags":[],"acf":[],"yoast_head":"\n@wordpress\/scripts<\/code> with the
watch<\/code> command, like below:<\/p>\n\n\n\n
wp-scripts start .\/assets\/src\/js\/index.js --output-path=.\/assets\/dist\/js\/<\/code><\/pre>\n\n\n\n
\/\/ import Swiper JS\nimport Swiper from 'swiper';\nimport { Navigation, Autoplay } from 'swiper\/modules';\n\nSwiper.use([Navigation, Autoplay]);\n\ndocument.addEventListener('DOMContentLoaded', () => {\n\n const swiper = new Swiper('.swiper', {\n loop: true,\n autoplay: {\n delay: 2500, \n disableOnInteraction: false,\n },\n speed: 1000,\n navigation: {\n nextEl: \".swiper-button-next\",\n prevEl: \".swiper-button-prev\",\n },\n });\n\n});<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"