The task is to build a responsive product selector using JQuery 2.x and Bootstrap 3.x.
As user clicks vendor buttons, product icons animate in. Clicking the product icons will be a simple link to a product detail page.
Default view will be the first vendor's product selection (i.e., in the sample image, Apple will be selected showing the Apple icon - clicking on Adobe will animate the Apple icons off to the left and the Adobe ones will fly in from the right).
When the selector is viewed on an iPhone, the vendor buttons should collapse down to be vendor logos (so they will fit on the limited width). When there are more products than the horizontal space allows for, arrows should appear to allow the user to scroll left and right through the available products.
The product icons will always be 80px x 80px png files. There will be no fixed number of products or vendors, so the code needs to be flexible enough to cope with this. Ultimately this selector will be back ended by a database, so there needs to be a simple, flexible way to provide the list of products and vendors (ideally an HTML list, for instance)