Logo
Logo

Infinite Product Slider

Creating an Infinite WooCommerce Product Slider in Breakdance

In this tutorial, you will learn how to create an animated WooCommerce product slider that automatically plays. This feature is simple to implement in Breakdance and doesn’t require any coding, thanks to the built-in products list element.

Setting Up the Products List

Adding the Products List Element & Selecting Specific Products

  1. Open Breakdance.
  2. Click the “Add” button in the top left of the builder interface.
  3. Search for the “Products List” element.
  4. Click or drag and drop this element onto your page. By default, it displays a list of products from your store.
  5. Decide on the specific products you wish to showcase in the slider. You can choose from options such as “featured” or “on sale,” or select products manually.
  6. To pick products manually, click on each product you want to include in the list.
  7. Confirm your selection. The products list should now display the chosen products.

Configuring the Slider

Adjusting Layout Settings

  1. Go to the “Design” tab of the products list element.
  2. Navigate to “Layout.” The default layout is “Grid.”
  3. Change the layout to “Slider.” Your products will now be displayed in a slider format.

Customizing Slider Options

  1. Expand the “Slider” options panel and then the “Settings” options panel for more detailed settings.
  2. Expand the “Advanced” options panel and change “Slides Per View” to 1 so that only 1 product is displayed at a time.
  3. Back under the “Slider” options panel, expand the “Arrows” options panel and toggle the “Disable” option on.
  4. Expand the slider’s “Settings” options panel again and enable the “Autoplay option.”
  5. While there, also enable the “Infinite” option.
  6. Expand the “Autoplay Settings” option panel, adjust the speed to your liking. 1000-2000 milliseconds is a good range.
  7. Enable the “Pause On Hover” option.

Finalizing and Reviewing

  1. Once satisfied with the configuration, save your changes.
  2. Exit the editor to view the product slider live on your site.
  3. Test the slider functionality, ensuring it transitions smoothly between products and displays correctly.

Additional Notes

This autoplaying, infinite slider is a dynamic method for showcasing WooCommerce products, enhancing user interaction and experience on your website. It’s important to configure the autoplay settings according to your preferences to ensure optimal functionality and user engagement.