Page control by clicking and swipe

I am trying make pages (or rather panel… well it doesn’t really matter) that can be switched by click buttons or swipe the screen. The example of tab-bar-navigation is the perfect sample that I was looking for. However I was trying to add some feature to the sample, which is that change the image at the bottom whenever the page changes too… For example, the initial layout of the images are hexagon, star, rectangle and triangle (from left to right) and the page color is dark bluish green but when the page changes(either by click or swipe) to blue I want the images at the bottom to change like star, hexagon, rectangle and triangle and when the page becomes pink or green, then the order of the images at the bottom changes too… I have tried several ways but all failed… hmm… please any one help me?? Thank you