<style>
#slider {
    margin: 0 auto;
    margin-left: -51px;
}
#slider #main {
    height: 200px;
    width: 740px;
}
#slider #main div {
    height: 100%;
}
#slider .bx-window table {
    height: 100%;
    width: 100%;
    border-spacing: 0;
}
#slider .bx-window table td {
    width: auto;
    height: auto;
    text-align: center;
}
</style>


<table id="slider"><tr><td id="prev"></td>
<td><div id="main">
    <div>
        <table><tr>
            <td rowspan=2> 1 </td>
            <td rowspan=2> 2 </td>
            <td> 3 </td>
        </tr><tr>
            <td> 4 </td>
        </tr></table>
    </div>
    <div>
        <table><tr>
            <td> 5 </td>
            <td> 6 </td>
        </tr></table>
    </div>
    <div>
        <table><tr>
            <td> 7 </td>
            <td> 8 </td>
        </tr></table>
    </div>
    <div>
        <table><tr>
            <td> 9 </td>
            <td> 10 </td>
        </tr></table>
    </div>
</div></td>
<td id="next"></td>
</tr><tr>
</table>

<script src="https://raw.github.com/wandoledzep/bxslider/master/jquery.bxSlider.min.js"></script>
<script>
$('#slider #main').bxSlider({
    prevSelector: '#slider #prev',
    prevImage: 'http://s3.uploads.ru/jUwX5.png',
    nextSelector: '#slider #next',
    nextImage: 'http://s3.uploads.ru/8rQWz.png',
    pager: false,
    auto: false,
}); 
</script>

<style>
.rootAnn {
    border-radius: 5px;
    background: rgba(127,127,127,0.5);
}
#pun-announcement table/*, #slider #main*/ {
    width: 100%;
}
#slider {
    margin: 0 auto;
}
#slider #main {
    height: 200px;
    width: 300px;
}
a.bx-prev, a.bx-next {
    display: inline-block;
    pointer: cursor;
    width: 30px;
    height: 25px;
    padding-top: 5px;
    border-radius: 15px;
    background: #374C64;
    font: normal 13px Verdana;
    color: whitesmoke;
    text-decoration: none;
}
a.pager-link.pager-active {
    background: #44678E; cursor: auto;
}
a.pager-link:hover, a.bx-prev:hover, a.bx-next:hover, a.bx-start:hover {
    background: #6289B4;
}
.rootAnn.ann p * { 
    vertical-align: middle;
}
.rootAnn.ann p .type {
    display: inline-block;
    width: 100px;
    padding: auto 8px;
    vertical-align: middle;
    text-align: center;
    border-radius: 3px;
}
.rootAnn.ann p .date { width: 75px; }
.rootAnn.ann p.ann .type { 
    background-image: linear-gradient(left top, #FF0000 0%, #FF5A5A 100%);
    background-image: -o-linear-gradient(left top, #FF0000 0%, #FF5A5A 100%);
    background-image: -moz-linear-gradient(left top, #FF0000 0%, #FF5A5A 100%);
    background-image: -webkit-linear-gradient(left top, #FF0000 0%, #FF5A5A 100%);
    background-image: -ms-linear-gradient(left top, #FF0000 0%, #FF5A5A 100%);
    
    background-image: -webkit-gradient(
        linear,
    	left top,
    	right bottom,
    	color-stop(0, #FF0000),
    	color-stop(1, #FF5A5A)
    );
}
.rootAnn.ann p.news .type { 
    background-image: linear-gradient(left top, #FFFF00 0%, #FFC800 100%);
    background-image: -o-linear-gradient(left top, #FFFF00 0%, #FFC800 100%);
    background-image: -moz-linear-gradient(left top, #FFFF00 0%, #FFC800 100%);
    background-image: -webkit-linear-gradient(left top, #FFFF00 0%, #FFC800 100%);
    background-image: -ms-linear-gradient(left top, #FFFF00 0%, #FFC800 100%);
    
    background-image: -webkit-gradient(
        linear,
    	left top,
    	right bottom,
    	color-stop(0, #FFFF00),
    	color-stop(1, #FFC800)
    );
}
.rootAnn.ann p.cont .type { background: pink; }
.rootAnn.ann p.info .type { background: blue; color: white; }
</style>

<table><tr><td class="rootAnn ann">
<h3>Объявления</h3>
<p class="ann">
    <span class="date">01.01.2001</span>
    <span class="type">Объявление</span>
    <span class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</p>
<p class="news">
    <span class="date">02.01.2003</span>
    <span class="type">Новость</span>
    <span class="content">Pellentesque rhoncus, odio ut dignissim fermentum, sem lectus interdum odio, et aliquet ipsum mauris id ante.</span>
</p>
<p class="cont">
    <span class="date">04.08.2007</span>
    <span class="type">Конкурс</span>
    <span class="content">Curabitur rhoncus iaculis vulputate. Duis at diam vehicula metus sodales pharetra.</span>
</p>
<p class="info">
    <span class="date">21.12.2012</span>
    <span class="type">Информация</span>
    <span class="content">Pellentesque eros augue, bibendum id viverra ac, luctus ut augue. Etiam bibendum venenatis tortor.</span>
</p>
</td><td class="rootAnn">
<table id="slider"><tr><td id="prev"></td>
<td><div id="main">
  <div>Slide one content</div>
  <div>Slide two content</div>
  <div>Slide three content</div>
  <div>And so on...</div>
</div></td>
<td id="next"></td>
</tr><tr></table>
</td></tr></table>

<script src="https://raw.github.com/wandoledzep/bxslider/master/jquery.bxSlider.min.js"></script>
<script>
$('#slider #main').bxSlider({
    prevSelector: '#slider #prev',
    prevText: '<',
    nextSelector: '#slider #next',
    nextText: '>',
    pager: false,
    auto: false
}); 
</script>