sliders not working

Hello

I had a look at both sites, I dont see a broken slider

live:?https://cardinalbagsupplies.com/
staging:?https://cardinalbstage.wpengine.com/

Ah May be I do, https://cardinalbagsupplies.com/product-tag/media-pouch/

Please share with me how you are adding the swiper.

Is it via parts? tempaltes? in the editor.

Once you let me know, ill be able to replicate the issue and patch it up.

but the problem is , the script doesnt see wp-swiper, so it fails to init. once frontend.js for the swiper finished initialising, you shoudl see two class wp-swiper wp-swiper–0

in other words, when wp-swiper frontend js is loaded and we run document.querySelectorAll(“.wp-swiper”)

we do not see wp-swiper on page

in prod frontend.js for the swiper is on line 150
staging in line 139

something definitely is different, hope this helps, let me know how it goes.

@digitalapps thanks for your speedy reply, we added the swiper using the block editor.

@digitalapps just to add. we found that on live the popupally pro scripts are loaded before wpswiper tahts why thelocations of the scripts are on different lines. however we tried disabling popupally and also wp rocket but the slider still does not work. when you mentioned that wp-swiper cannot be found on page load we thought it was just wprocket trying to defer laoding stuff but now that is ruled out too. it is just unfortunate we cannot do a plugin conflict test since it only happens on live.

any more thoghts on this?

thanks!

on the swiper block, enable debug, and see if you get debug data to show up in the console log. I suspect that the frontend js is not running.

the issue is environment specific and not a plugin issue

@digitalapps this is what I got on console https://i.imgur.com/EpBEQ1z.png

looks like frontend is ok, do I need to look for something on those options?

I dont see the same object in prod, this further confirms that the scrip isnt running at the right time, it must be caching of some sort.

I have added a new filter, wpswiper_frontend_js_register_args, which allows users to customize specific parameters when enqueueing the frontend-js script.

Upgrade to v1.2.12

This filter lets you adjust script dependencies (deps), choose if the script should load in the footer (in_footer), and specify additional script loading strategies (e.g., async or defer).

How to Use This Hook

To modify these parameters, add a filter callback to functions.php or your custom plugin. Here’s an example that demonstrates the available options:

add_filter('wpswiper_frontend_js_register_args', function($args) {
    // Modify script dependencies
    // 'wpswiper-bundle-js' must be always declared
    $args['deps'] = ['wpswiper-bundle-js', 'your-custom-dependency'];

    // Example: Set the script to load in the footer
    $args['args']['in_footer'] = true;

    // Example: Specify an additional loading strategy, such as async or defer
    $args['args'] = ['strategy' => 'defer']; // Options: 'async' or 'defer'

    return $args;
});

Explanation of Options

• deps: Use this to add or remove dependencies for the script, ensuring any additional scripts load before frontend-js.
• in_footer: Set to true if you prefer the script to load in the footer, reducing load time on the page’s initial render.
• args: Specify additional script loading strategies by setting 'strategy' => 'async' or 'strategy' => 'defer' within the args array.

With this filter, you can fully customise how the frontend-js script is loaded, making it easier to optimise for your site’s specific needs.

• This reply was modified 3 weeks ago by digitalapps.

IMPORTANT

SInce my last post above, the reference to the bundle script has changed

From: ‘wpswiper-bundle-js’ must be always declared
To: ‘wpswiper-bundle’ must be always declared

@digitalapps sorry for the late reply. Thanks for this update. we will test this out and let you know how it goes.

@digitalapps still not working. we have also updated to your latest version but slider still not working.

all js files are already forced loaded including the frontend block js

we have cloned live here https://cbbakstg.wpenginepowered.com/
debug shows that the slider is loaded properly but it only shows 1 slide and the nav bullets are not showing https://i.imgur.com/nQLOsxR.png

• This reply was modified 1 week, 3 days ago by wooassist.

i followed the link https://cbbakstg.wpenginepowered.com/

slider is loaded, am i looking at the wrong site?

@digitalapps hi yes sorry for the confusion, that is the stg site and it works there. still nothing on live even with the same setup https://cardinalbagsupplies.com/

these sites are practically a clone. we have also tried disabling premium plugins that are not running on stg due to lack of license but still no slider.

the problem is with the loading order of scripts.

its either this; https://docs.wp-rocket.me/article/976-exclude-files-from-defer-js

or similar, make sure you empty cache after each setting change.

keep me posted, curious to hear how you solved this.