使用jQuery构建带有库的产品页面

Question

我正在帮助客户建立一个产品网站，其中一个页面显示他们销售的产品的详细信息。产品详细信息页面的要求之一是拥有产品的多个图像（我很好，将实现一个滑块），但产品图像也将采用不同的颜色。根据用户选择的颜色，显示相关的产品图像。我在如何实现颜色选择选项方面遇到了麻烦。

我在另一个页面上使用BX-Slider（http://bxslider.com/），因此希望能够重用相同的滑块。有人给我任何指示吗？

我在这里包含了产品页面的设计：

非常感谢任何帮助！

Answer 1

我从未使用过bxslider，但看起来你可以利用这个优势：

http://bxslider.com/examples/custom-next-prev-selectors

如果您创建自定义上一个/下一个选择器，则可以创建一个索引，以便您知道当前在滑块中选择了哪种颜色，然后显示相应的图像。使用自定义选择器，可以在两个跨度的JQuery.click()函数中完成（在示例中）。

$("#slider-next").click(...change image to index + 1...);
$("#slider-prev").click(...change image to index - 1...);