What is Flickity (LEGACY)?
What is Splide (NEW)?
Splide.js offers several key features. It has a responsive design, automatically adapting to various screen sizes and device orientations. The library supports touch and gesture interactions, allowing smooth swiping, dragging, and flicking to navigate through the slides. Additionally, it enables keyboard navigation, allowing users to use arrow keys or specified controls for slide navigation. Splide.js implements lazy loading, loading slide content only when it becomes visible, which optimizes the initial page load time. The controls in Splide.js are customizable, providing options for navigation arrows, pagination, and progress indicators. The library also offers flexible layout options, accommodating both single and multiple item layouts, with customizable visibility and navigation settings.
Why Change to Splide?
Splide is a much more robust library system that allows for better usability as well as load speeds due to it's utilization of lazy loading.
Benefits to Splide vs. Flickity
While Splide.JS does not make an explicit claim of 100% compliance with the Americans with Disabilities Act (ADA), the website of Splide.JS includes the following statement...
"Splide strives to improve accessibility so that all users can easily and comfortably use the carousel. Splide v4 conforms to the W3C Carousel Design Pattern and includes a Live Region that allows screen readers to read content whenever slides change."
To begin, please log in to your Rebuy administrative portal and navigate to the "Account" tab. Once you've arrived, locate and click on the "Settings" button.
Upon reaching that section, locate the "Carousel for widgets" setting and select the dropdown menu. From the options presented, choose between Flickity (legacy) and Splide. Opt for Splide and save your selection. Upon successful saving, a notification will appear at the top of the screen, stating "Success! Your changes have been saved."
After saving your changes, the migration to the new Splide carousel library is complete and successful. Moving forward, your website will operate using the new library.
.flickity-carousel .carousel-item). However, upon migrating to Splide, these selectors will no longer match elements, leading to errors when the code is executed as is.
Based on the provided screenshot below, our focus is on the ".flickity-viewport" element. However, if you switch from Flickity to Splide, your custom callback will no longer work as intended because it won't be able to reference Flickity anymore.
What happens if I change it to splide and I am using custom flickity actively?
If you change the setting to Splide while users are actively utilizing custom Flickity implementations, there may be implications. The custom Flickity features will not automatically transfer over to Splide. Therefore, caution should be exercised when making this transition to ensure that any custom functionality is appropriately adjusted or reimplemented to align with Splide.
Will changing between the two delete all the existing custom code?
Switching to Splide from Flickity will not delete or remove any existing code. You can always switch back to Flickity if needed and continue business as usual. The transition between the two libraries does not result in the deletion or loss of any code. However, it's important to note that customizations or functionalities specific to one library may not work seamlessly with the other, so careful consideration and testing are recommended before making any changes.
What do I need to to before making the switch from Flickity to Splide?
Before making the switch from Flickity to Splide, there are a few steps you can take to ensure a smooth transition:
Review and understand the differences: Familiarize yourself with the features, options, and APIs provided by Splide.js. Understand how it differs from Flickity and how it may impact your existing code and functionality.
Note - Currently, the Splide APIs are not being made available within the Rebuy.libraries.
Test and update customizations: If you have any customizations or modifications specific to Flickity, review them and assess their compatibility with Splide.js. Some adjustments or updates might be required to make them work with the new library.
Backup your code: It's always a good practice to create backups of your existing code, including any Flickity-related files or configurations. This ensures that you have a safety net in case anything goes wrong during the migration process.
Set up a testing environment: Create a separate testing environment or staging site where you can experiment with the migration. This allows you to verify that Splide.js works as expected and that your content and functionality are not negatively affected.
Communicate the change: If your website or application has users or stakeholders, communicate the upcoming switch from Flickity to Splide.js. Inform them about any potential impacts or improvements resulting from the migration.
If you have any other questions, send us those questions through the messenger on this page with your details in hand!