Let’s set up our markup first: 

As you can see, we have some events listed in an unordered list on the right column and a main image in the left column. We only specify our first main image in the markup, we’ll preload the other images in our jQuery.

When the user hovers over the menu items in the right column, the main image will change to that menu item’s associated main image, as specified by the data-carousel-img attribute. if they click the menu item, the link as specified in the href attribute of the A tag will be opened. It will be opened in a new window if the newWindow variable is set to true.

Lastly, we just need to add some styling with CSS.

You can change the margin on #carousel if you don’t want it centered within its containing element.

You can see an example below.

View Demo »