I’m thrilled to announce the latest update to the WP Swiper plugin! With version 1.2.0, there are some significant changes and improvements aimed at enhancing both the performance and user experience. In this post, I’ll walk you through the exciting new features and improvements you can expect from this update.
1. Streamlined Configuration with data-swiper Attribute
One of the major updates in version 1.2.0 is the simplification of the Swiper configuration. Previously, configuring Swiper settings required multiple data attributes on HTML elements. This can now be done through a single, unified attribute: data-swiper.
Old Method (data-attributes):
<div class="swiper-container" data-slidesperview="1" data-navigation="true" data-pagination="true" data-autoplay="true" data-disableoninteraction="false" data-pauseonmouseenter="false" data-delay="3000" data-speed="500" data-loop="true" data-effect="slide" data-direction="horizontal" data-freemode="false" data-autoheight="true" data-spacebetween="0" data-mousewheel="false" data-releaseonedges="false" data-paginationtype="bullets">New Method (JSON Object):
<div class="swiper-container" data-swiper="{"slidesPerView":"1","navigation":true,"pagination":{"type":"bullets"},"delay":3000,"speed":500,"loop":false,"direction":"horizontal","slidesOffsetBefore":0,"slidesOffsetAfter":0,"autoHeight":true,"spaceBetween":0,"releaseOnEdges":false,"effect":"slide","debug":true}">Why this change?
This approach not only reduces clutter in your HTML but also makes Swiper settings more efficient and easier to manage. No more juggling between multiple attributes—everything is now controlled with a single attribute! Additionally, the frontend bundle is now much smaller because I’ve eliminated the need for multiple data attribute checks and the construction of a JSON object. In the old method, data attributes were converted into a JSON object, whereas the new method already provides a pre-constructed JSON object, improving both performance and simplicity.
2. Legacy Configuration Deprecation
With the new approach comes a deprecation warning for the legacy method of using multiple data-attributes. While this old configuration method is still functional, it will be deprecated in future releases.
Please note that the legacy mode will only work where you’ve manually updated the data-attributes. Updates made via Gutenberg will not trigger this mode.
If you prefer to continue using the old method and don’t want to upgrade to version 1.2.0, I’ve made version 1.1.3 available for download, and you can keep using it for now. However, be aware that the old WP Swiper script will not receive future updates, so transitioning to the new configuration is highly recommended.
You can still enable the legacy WP Swiper script via Settings > WP Swiper if you wish to continue using it.
3. WP Swiper Settings Page
In this release, I’ve added a dedicated WP Swiper Settings page under Settings > WP Swiper. This page allows you to control additional Swiper settings, such as whether to load the Swiper bundle on all pages or only where the block is used. You can also choose between the legacy or new Swiper JavaScript versions. More options will be added here as needed to give you greater control over how Swiper is used on your site.
4. Optimized Asset Loading
I’ve significantly improved the way assets (JS and CSS) for Swiper are loaded. With this update, Swiper assets will only be loaded on pages where Swiper is actively used, leading to improved performance and faster load times for your website. This optimization ensures that you won’t be loading unnecessary assets on pages that don’t require them.
If you prefer the previous behavior of loading Swiper assets globally across all pages, you can still opt in to this under Settings > WP Swiper.
A Big Change: Migration Considerations
After plugin update, when you visiting the editor for the first time, make sure to do a hard refresh and clear your cache.
This update represents a big change, and I understand that some of you may be using the plugin in custom ways. Things may break or need adjustments after updating. If you encounter any issues or need help migrating to the new configuration, please don’t hesitate to reach out to me. I’m more than happy to help!
Steps for Migrating to Version 1.2.x
During the migration to version 1.2.x, you might encounter a warning in the Gutenberg editor that says “Attempt Block Recovery”. This happens because the new HTML structure doesn’t match the HTML stored in the database for the existing blocks, which is expected with the changes made in this update.
What to do:
- Simply click “Attempt Block Recovery” to automatically resolve the issue.
- After that, click Save, and everything should work as before.
If you want to keep your frontend slider working as you handle backend changes, I’ve included the old legacy frontend code. You can enable Legacy Mode under Settings > WP Swiper to temporarily use the old version until you’re ready to fully migrate.
Issue: All Slides Appearing at the Same Time
You may encounter an issue where all slides are appearing at once or where slides get out of sync with the parent block. This is a result of changes in the Swiper configuration and how the blocks are rendered.
Manual Solution: To fix this, you can manually rebuild the slider by creating a new slider block and simply dragging the content for each slide (not a slide) into the newly created slider (under slide). This should resolve any synchronization issues between slides and the parent block.
I’m actively working on automating this process to make the migration smoother, but for now, this manual step will get things back on track.
A Heartfelt Thank You
I’d like to take a moment to thank all of you for helping build this plugin. Your feedback has been invaluable, and because you’ve taken the time to contact me, I’ve been able to make WP Swiper better for everyone. Your support truly means a lot!
If you’d like to support me and the work I do, please consider donating. You can buy me a coffee by heading to this site: https://buymeacoffee.com/wpplugins