Živá ukázka

Výsledek

HTML

Autoformát
Standardní režim
Mobilní zobrazení

/* zrušení orámování odkazu v Exploreru */
img {border: 0;}
a:focus {outline: 0}
.large {height: 400px; overflow: hidden; position: relative;}
.large div {height: 400px; width: 600px; position: relative; }
    .large div a {position: absolute; top: 0; height: 100%; width: 50%; text-decoration: none; background: url('http://img.dummy-image-generator.com/abstract/dummy-600x400-Circus-plain.jpg') -1000px -1000px no-repeat; /* nějaký obrázek, jinak plocha nekliká v Exploreru */}
.large div a span {position: absolute; top: 190px; padding: 10px; line-height: 20px;  width: 30px; background: #fff; color: #000; visibility: hidden}
.large div a:hover span {visibility: visible;}
.large div a.next, .large div a.next span {right: 0}
.large div a.prev, .large div a.prev span {left: 0}
    
    .thumb {float: left; width: 130px; margin-right: 10px}
    .thumb a {border: 5px solid #000; display: block;}
    .thumb img {display: block; width: 120px; height: 80px}
    .thumb a:hover {border-color: red;}
    .large {float: left}

CSS

Autoformát
CSS reset
Až na konci

JS

Autoformát
jQuery
Umístění JS