code.pixies Webdesign Agentur Logo

How we created a dynamic product slider

Discover how we developed a customer-friendly solution for a custom slider that dynamically presents the bestsellers while providing an interactive user experience.


Web Developer at code.pixies

Our client wanted a slider on their website that would showcase the 24 most sold products in a unique and dynamic way. The challenge was that only 12 products should be visible in the slider at any given time. To make things more interesting, these products should only be selected from the top sellers. Additionally, the client wanted to have the freedom to select certain products that would always appear in the slider and to be able to arrange them however they wanted. It was important for these selected products to always be displayed at the top of the slider, with a maximum of four such products being able to be specified.

Our Creative Solution

To meet this demanding requirement, we developed a new interface within the WordPress system. This allows the customer to see their preferred products from the WooCommerce store and arrange them in the desired order with a simple drag and drop function. With the use of PHP, we fetch these selected products and arrange the first four of them in the slider exactly as requested by the customer.

We then use a special database query to determine the shop's 24 top-selling products and arrange them in a random order. From this list, as many products as possible are then added to the slider until a total of 12 products are reached. We take the number of manually selected products into account to ensure that the slider always shows the perfect mix of customer favorites and bestsellers.

Integration of JavaScript and responsive design

To bring it all to life, we used JavaScript to animate the slider. This animation creates a smooth and engaging user experience by making the transition between products seamless. A key feature of our slider is its responsiveness. Regardless of the device or screen size, the slider dynamically adjusts and displays fewer products per slide on smaller viewports. This adaptability ensures that the website is just as attractive and user-friendly on mobile as it is on a desktop computer.

The result

The result is a flexible and dynamic product slider that not only exceeds our client's requirements, but also adds an engaging and interactive component to the website. With this solution, visitors can see the most popular products at a glance and are encouraged to explore further by the manually highlighted products.

Custom WordPress SolutionJavaScriptPHPWoocommerceWordPress

More insights

The success of your website depends on the concept

Famously said: “A man who does not plan far in advance will find trouble at his door.” – Confucius…
Custom WordPress SolutionWeb Development

Responsive tables with Ninja Tables Pro

Discover how Ninja Tables Pro optimizes your WordPress tables and sets new standards in responsive display of table content….
Custom WordPress SolutionWeb Development

Environmental Protection: Forest Foundation for Saxony

Learn more about our custom solution for Stiftung Wald für Sachsen with progress bars and dynamic forms for seamless user interaction….
Custom WordPress SolutionWeb Development

Stay up to date - Subscribe to our Newsletter!

Sign up for our newsletter and stay up to date with all the latest updates, news and trends in your inbox. Your email address will only be used to send you our newsletter and information about the activities of code.pixies You can unsubscribe at any time using the link included in the newsletter.