Question

I’m looking for sample code of how I could display a full centered website in the center of the screen, and two other websites to the left and right of it (probably only see half of the side sites) but be able to navigate using the carousel between the iframes. I’ve included a basic mock-up of what I am trying to explain…

TL;DR: Looking for a Carousel I can use with full websites inside iframes instead of images.

Answer 1

There’s nothing like DIY.

A basic carousel can be made simply by placing the elements side-by-side:

--------  --------  --------
|Box 1 |  |Box 2 |  |Box 3 |
--------  --------  --------

With a container that’s only big enough to hold one of them, you can scroll horizontally between boxes.

Then, with a little CSS magic, you can make it look like that image in your question. Try using transform, where the scale and translate are proprtional to the distance from the centre. Also add a z-index to the centremost box to place it on top of the others.

Of course, there are ways to make more complex or better-looking carousels, but a simple effect can go a long way.