Conversation
supportHello, Is there a way to get Swiper instance built with Carousel Post Layout ? Swiper’s API page says : const swiper = document.querySelector('.swiper').swiper; swiper.slideNext But my console returns null for swiper : Uncaught TypeError: can't access property "swiper", document.querySelector(...) is null Thanks for your help ! PS : the search function in the WordPress.org support forum doesn’t work at all: every time I try to search, I get no results. This topic was modified 4 days, 23 hours ago by fredericv .
Hi! If you want to custom initialize the Swipe, you’ll need to disable the default settings in the plugin settings and then manually initialize the swipe (Custom Swiper Settings ). https://prnt.sc/g9Of_56zkfuV This reply was modified 4 days, 21 hours ago by YMC .
Hello, Thank you for your reply. Unfortunately, I’ve already tried that, and I’m having a lot of trouble getting Swiper API to work. It’s as if certain settings defined by YMC Filter in “Carousel post layout” or “Advanced query” are affecting the new Swiper instance: For example, I can’t get the pagination or navigation to appear unless I use the callback I previously used for the other layouts (“Advanced query”) Another example: when I manage to get the pagination and navigation to appear, they don’t work—they remain unclickable That’s why I’ve fallen back on the carousel predefined by YMC, and I’m trying to retrieve its instance to customize it a bit. Thank you for your help.
By the way, I’m trying to make the carousel responsive. Swiper.js shows that is possible with breakspoints : breakpoints: { // when window width is >= 320px 320: { slidesPerView: 3, spaceBetween: 10, }, // when window width is >= 480px 480: { slidesPerView: 3, spaceBetween: 30, }, // when window width is >= 640px 640: { slidesPerView: 4, spaceBetween: 40, } } This works, but as I said in my previous message, some others things not 🙂
Hi! To initialize CustomMono Swiper, you’ll need to run this code: ymcHooks.addAction('ymc/grid/after_update_72', function(data, container) { new Swiper('.swiper-72', { speed: 400, spaceBetween: 100, // do something… }); }); Change the filter ID to your own! Swiper is already enabled on the selected page. You need to initialize it within the JavaScript hook (see the filter documentation: https://github.com/YMC-22/YMC-Filter )
Yes, that’s exactly what I did … but I obtained the problems described above …
It’s all very strange! The thing is, when you enable the “Use “Custom Swiper Settings” option in the plugin settings, it disables the plugin’s default initialization of the Swiper carousel. In this mode, you can customize the initialization and configuration of the swipe (the plugin won’t interfere with these settings). When custom initializing Swiper, you should always use plugin hooks (ymcHooks.addAction(‘ymc/grid/after_update_ID_Filter’, function(data, container) { … }) since posts are asynchronously loaded into the post grid itself, requiring control over asynchronous loading. By the way, the “Advanced query” settings don’t affect the carousel’s operation in any way—they are just overrides of the WP_Query object query itself, that’s all! You need to carefully analyze the entire Swiper initialization chain and ensure the correct settings within the plugin. Send us a link to your website page.
Unfortunately it’s a localhost website 🙁 But yes, I think like you, it’s all very strange, espacially the thing with the callback in “Advanced query”. I will investigate further, maybe I will find something, maybe not … If you think of something, let me know please 🙂
We look forward to your resolution. We’re also very interested in learning the root cause of the problem. Please let us know if you learn anything. Good luck!
So I’ve fixed my problem by deleting firefox’s cache between each change within the js hook. I didn’t know that Firefox used its cache so extensively to store the state of JavaScript objects. Above all, I thought that since we’re constantly telling JavaScript when we want to trigger an action (before the page loads, after it loads, before the DOM loads, after it loads, etc.), the cache would be cleared each time… I’ve learned something new 🙂 I think this behavior must have a lot to do with Swiper.js—don’t you think?
We glad that you solve your issue!
Hi! If you want to custom initialize the Swipe, you’ll need to disable the default settings in the plugin settings and then manually initialize the swipe (Custom Swiper Settings ). https://prnt.sc/g9Of_56zkfuV This reply was modified 4 days, 21 hours ago by YMC .
Hello, Thank you for your reply. Unfortunately, I’ve already tried that, and I’m having a lot of trouble getting Swiper API to work. It’s as if certain settings defined by YMC Filter in “Carousel post layout” or “Advanced query” are affecting the new Swiper instance: For example, I can’t get the pagination or navigation to appear unless I use the callback I previously used for the other layouts (“Advanced query”) Another example: when I manage to get the pagination and navigation to appear, they don’t work—they remain unclickable That’s why I’ve fallen back on the carousel predefined by YMC, and I’m trying to retrieve its instance to customize it a bit. Thank you for your help.
By the way, I’m trying to make the carousel responsive. Swiper.js shows that is possible with breakspoints : breakpoints: { // when window width is >= 320px 320: { slidesPerView: 3, spaceBetween: 10, }, // when window width is >= 480px 480: { slidesPerView: 3, spaceBetween: 30, }, // when window width is >= 640px 640: { slidesPerView: 4, spaceBetween: 40, } } This works, but as I said in my previous message, some others things not 🙂
Hi! To initialize CustomMono Swiper, you’ll need to run this code: ymcHooks.addAction('ymc/grid/after_update_72', function(data, container) { new Swiper('.swiper-72', { speed: 400, spaceBetween: 100, // do something… }); }); Change the filter ID to your own! Swiper is already enabled on the selected page. You need to initialize it within the JavaScript hook (see the filter documentation: https://github.com/YMC-22/YMC-Filter )
Yes, that’s exactly what I did … but I obtained the problems described above …
It’s all very strange! The thing is, when you enable the “Use “Custom Swiper Settings” option in the plugin settings, it disables the plugin’s default initialization of the Swiper carousel. In this mode, you can customize the initialization and configuration of the swipe (the plugin won’t interfere with these settings). When custom initializing Swiper, you should always use plugin hooks (ymcHooks.addAction(‘ymc/grid/after_update_ID_Filter’, function(data, container) { … }) since posts are asynchronously loaded into the post grid itself, requiring control over asynchronous loading. By the way, the “Advanced query” settings don’t affect the carousel’s operation in any way—they are just overrides of the WP_Query object query itself, that’s all! You need to carefully analyze the entire Swiper initialization chain and ensure the correct settings within the plugin. Send us a link to your website page.
Unfortunately it’s a localhost website 🙁 But yes, I think like you, it’s all very strange, espacially the thing with the callback in “Advanced query”. I will investigate further, maybe I will find something, maybe not … If you think of something, let me know please 🙂
We look forward to your resolution. We’re also very interested in learning the root cause of the problem. Please let us know if you learn anything. Good luck!
So I’ve fixed my problem by deleting firefox’s cache between each change within the js hook. I didn’t know that Firefox used its cache so extensively to store the state of JavaScript objects. Above all, I thought that since we’re constantly telling JavaScript when we want to trigger an action (before the page loads, after it loads, before the DOM loads, after it loads, etc.), the cache would be cleared each time… I’ve learned something new 🙂 I think this behavior must have a lot to do with Swiper.js—don’t you think?
We glad that you solve your issue!