I'm working on a product page for an e-commerce website, and I have a carousel component to display different colour variants for the product itself. When you select a colour, the product picture updates accordingly to offer a preview.

My question is: if you have a particular colour selected, and then you use the arrows to navigate the carousel and display other colours, once the selected colour is hidden should the selection change?

Example: I have a carousel with 3 colours displayed at a time. I select the first colour, green. I use the right arrow to see other colours, thus the green moves to the left and I can't see it anymore. Should I change the selection automatically so there's always a correspondence between a visible colour in the carousel and the product picture displayed above? Or is it too frustrating that the selection changes automatically?

Wireframe example

3 Answers 3


Do not change the selected color just because someone uses the carousel to see other colors.

  • Using the carousel means the user wants to see other available colors.
  • The selected color was, and still is selected, and should be should keep being marked as such.
  • Only if the user selects a different color, the image should be changed.

Change of perspective: If the user uses the carousel and the selected color gets scrolled past, which color would we chose to be display instead?


Good Day!!

The Standard interaction is to change the colour selection as the user see or checks the other remaining colour. The preview image should change correspondingly.

If the interactions are separated, such as colour selection and viewing the remaining colour available in the carousal colour, it doesn't add value.

It increases the complexity.

Do not worry about the green colour will be moved or hidden.

Consider the below information: You have three colours or more. The default interaction should be all three colours will be present or visible until the user moves to the next colour. When the user checks the 4th colour or the remaining colours, the carousel will hide the green colour or the first colour. Now, the carousel left arrow will get enabled. (Which was disabled earlier)

Please refer "Carousel" interaction on the Amazon website and replicate the same.


They are two different functions.

  • The color icon shows the color and can be selected to display the corresponding product
  • The color carousel slider is to display all colors

The solution is to clearly show which color is being viewed as the user navigates in all available colors.

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.