Acredito que a solução está mesmo em usar algum plugin. Acho que uma variante de lightbox pode resolver bem o seu problema.
Em todo caso, se você quiser implementar a solução, montei um código bem básico que pode servir de base para você.
Implementei no jsFiddle, aqui: http://jsfiddle.net/2Sthd/5/
Basicamente, se você clicar em "anterior" ou "próximo", é disparado um evento que move o "menu". Ao clicar em um dos eventos, a "caixinha" atual é escondida, e uma outra é mostrada, correspondente ao novo item.
HTML:
<a class="event-arrow event-arrow-prev">
Anterior
</a>
<div class="event-list-container">
<ul class="event-list">
<li data-event-id="1" class="event-list-item event-selected">Evento 1</li>
<li data-event-id="2" class="event-list-item">Evento 2</li>
<li data-event-id="3" class="event-list-item">Evento 3</li>
<li data-event-id="4" class="event-list-item">Evento 4</li>
<li data-event-id="5" class="event-list-item">Evento 5</li>
<li data-event-id="6" class="event-list-item">Evento 6</li>
<li data-event-id="7" class="event-list-item">Evento 7</li>
<li data-event-id="8" class="event-list-item">Evento 8</li>
</ul>
</div>
<a class="event-arrow event-arrow-next">
Próximo
</a>
<div class="event-container">
<div class="event event-current" data-event-id="1">
<div class="event-title">
Evento 1
</div>
<div class="event-description">
Blabla bla bla
</div>
</div>
<div class="event" data-event-id="2">
<div class="event-title">
Evento 2
</div>
<div class="event-description">
Bleble ble
</div>
</div>
<div class="event" data-event-id="3">
<div class="event-title">
Evento 3
</div>
<div class="event-description">
Bli bli bli
</div>
</div>
<div class="event" data-event-id="4">
<div class="event-title">
Evento 4
</div>
<div class="event-description">
Blobblo blo
</div>
</div>
<div class="event" data-event-id="5">
<div class="event-title">
Evento 5
</div>
<div class="event-description">
Blobblo blo
</div>
</div>
<div class="event" data-event-id="6">
<div class="event-title">
Evento 6
</div>
<div class="event-description">
Blobblo blo
</div>
</div>
<div class="event" data-event-id="7">
<div class="event-title">
Evento 7
</div>
<div class="event-description">
Blobblo blo
</div>
</div>
<div class="event" data-event-id="8">
<div class="event-title">
Evento 8
</div>
<div class="event-description">
Blobblo blo
</div>
</div>
</div>
CSS:
.event {
width: 200px;
height: 100px;
background-color: gray;
margin: 5px;
}
.event-list {
list-style: none;
margin: 0;
padding: 0;
width: 800px;
margin-left: 0;
}
.event-list-container {
width: 210px;
overflow: hidden;
background-color: yellow;
height: 20px;
}
.event-list-item {
margin-left: 5px;
margin-right: 5px;
cursor: pointer;
width: 60px;
float: left;
display: block;
background-color: gray;
text-align: center;
}
.event-arrow {
color: blue;
cursor: pointer;
}
.event-selected {
text-decoration: underline;
color: green;
}
.event {
display: none;
}
.event-current {
display: block;
}
.event-title {
font-size: 26px;
font-weight: strong;
margin-bottom: 5px;
background-color: black;
color: gray;
}
Javascript (com jQuery):
function showCurrentEvent(eventId) {
$('.event-current').removeClass('event-current');
$('.event[data-event-id=' + eventId + ']').addClass('event-current');
}
$(function() {
$('.event-arrow-prev').on('click', function() {
$('.event-list').css('margin-left', function (index, curValue) {
var cur = parseInt(curValue, 10) + 70;
if (cur < 0) {
return cur + 'px';
}
else {
return '0px';
}
});
return false;
});
$('.event-arrow-next').on('click', function() {
$('.event-list').css('margin-left', function (index, curValue) {
var cur = parseInt(curValue, 10) - 70;
if (cur >= -70*5) {
return cur + 'px';
}
else {
return (-70*5) + 'px';
}
});
return false;
});
$('.event-list-item').on('click', function() {
var currentEvent = $('.event-selected');
currentEvent.removeClass('event-selected');
var newEventId = $(this).data('event-id');
$('.event-list-item[data-event-id=' + newEventId + ']').addClass('event-selected');
showCurrentEvent(newEventId);
return false;
});
});