Rebuy introduced a new carousel JavaScript library, based on Splide.js, on May 18, 2023. This library is designated as the main carousel solution for all new installations from that date onward. Existing installations will continue using the older Flickity carousel library, unless a decision is made to switch to Splide, which is strongly recommended. In this document, you will find details about the disparities between the two libraries, advantages of migrating, instructions for installation, and frequently asked questions (FAQs).
Flickity is undergoing deprecation, and there will be a designated end-of-support date in the future. Although the specific date has not been determined, it is recommended to transition away from Flickity if you currently utilize it. Instead, it is advised to migrate to the more advanced and robust Splide.js, which was released on Rebuy platform on May 18, 2023.
What is Flickity (LEGACY)?
Flickity is a JavaScript library for creating touch-enabled, responsive carousels or sliders on websites. It provides a flexible and customizable way to display a series of images or other content in a horizontal or vertical scrolling fashion.
Flickity is undergoing deprecation, and there will be a designated end-of-support date in the future. Although the specific date has not been determined, it is recommended to transition away from Flickity if you currently utilize it. Instead, it is advised to migrate to the more advanced and robust Splide.js, which was released on Rebuy platform on May 18, 2023.
What is Splide (NEW)?
Splide.js is a lightweight, flexible, and customizable JavaScript library for creating responsive sliders or carousels on websites. Similar to Flickity, Splide.js provides a range of features and options for building interactive and touch-enabled sliders.
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
ADA Compliance
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."
Installation Instructions
Exercise caution when modifying this setting if you currently depend on custom callbacks related to flickity. Certain callbacks may necessitate compatibility updates in order to accommodate changes to your existing carousel.
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.
In case you need to switch back to Flickity for any reason, you can easily follow the aforementioned steps, but this time select Flickity instead of Splide. It is important to note that any existing customizations made using Flickity will be retained during the transition between carousels. However, please be cautious as the two libraries are not interchangeable, and customizations may not function as expected when switching between them.
Example
It's important to note that any custom code written in the theme or custom JavaScript used in Widgets > Advanced callbacks could potentially face errors when switching between carousels. In the provided example, the code uses a querySelector to target elements with specific Flickity-related selectors (.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.
FAQs
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!