<div class="anonce-table">
    <div class="anon-table-col coll">
      <ul class="tabs">
        <li id="tabs1" class="active" ><a href="#tab1"><img src="http://sa.uploads.ru/t/6tcey.jpg" width="35px"></a></li>
        <li id="tabs2"><a href="#tab2"><img src="http://sa.uploads.ru/t/zej7b.jpg" width="35px"></a></li>
        <li id="tabs3"><a href="#tab3"><img src="http://sa.uploads.ru/t/smaf1.jpg" width="35px"></a></li>
        <li id="tabs4"><a href="#tab4"><img src="http://sa.uploads.ru/t/ROtcq.jpg" width="35px"></a></li>
      </ul>
      <div style="display: block;" id="tab1" class="tab_content">
        Контект вкладки 1
      </div>
      <div style="display: block;" id="tab2" class="tab_content">
        Контект вкладки 2
      </div>
      <div style="display: block;" id="tab3" class="tab_content">
        Контект вкладки 3
      </div>
      <div style="display: block;" id="tab4" class="tab_content">
        Контект вкладки 4
      </div>
    </div>
    <div class="anon-table-slider coll">
       <div id="slider-wrap">
        <div id="slider">
          <div class="slide">Контент 1</div>
          <div class="slide">Контент 2</div>
          <div class="slide">Контент 3</div>
          <div class="slide">Контент 4</div>
        </div>
      </div>
    </div>
    <div class="anon-table-simple coll">
      Текст
    </div>

</div>

<!--Вкладки и слайдер-->
<script type="text/javascript">
$(document).ready(function() {


	$(".tab_content").hide(); 
	$("ul.tabs li:first").addClass("active").show();
	$(".tab_content:first").show();
	
	$("ul.tabs li").click(function() {
    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");
    $(".tab_content").hide();
    var activeTab = $(this).find("a").attr("href");
    $(activeTab).fadeIn(700);
    return false;
	});

  
  (function ($) {
var hwSlideSpeed = 700;
var hwTimeOut = 3000;
var hwNeedLinks = false;

$(document).ready(function(e) {
	$('.slide').css(
    {"position" : "absolute",
     "top":'0', "left": '0'}).hide().eq(0).show();
	var slideNum = 0;
	var slideTime;
	slideCount = $("#slider .slide").size();
	var animSlide = function(arrow){
    clearTimeout(slideTime);
    $('.slide').eq(slideNum).fadeOut(hwSlideSpeed);
    if(arrow == "next"){
    	if(slideNum == (slideCount-1)){slideNum=0;}
    	else{slideNum++}
    	}
    else if(arrow == "prew")
    {
    	if(slideNum == 0){slideNum=slideCount-1;}
    	else{slideNum-=1}
    }
    else{
    	slideNum = arrow;
    	}
    $('.slide').eq(slideNum).fadeIn(hwSlideSpeed, rotator);
    $(".control-slide.active").removeClass("active");
    $('.control-slide').eq(slideNum).addClass('active');
    }

	var $adderSpan = '';
	$('.slide').each(function(index) {
    	$adderSpan += '<span class = "control-slide">' + index + '</span>';
    });
	$('<div class ="sli-links">' + $adderSpan +'</div>').appendTo('#slider-wrap');
	$(".control-slide:first").addClass("active");
	$('.control-slide').click(function(){
	var goToNum = parseFloat($(this).text());
	animSlide(goToNum);
	});
	var pause = false;
	var rotator = function(){
    	if(!pause){slideTime = setTimeout(function(){animSlide('next')}, hwTimeOut);}
    	}
	$('#slider-wrap').hover(	
    function(){clearTimeout(slideTime); pause = true;},
    function(){pause = false; rotator();
    });
	rotator();
});
})(jQuery);
  
});
</script>

.anonce-table {
  background: url("http://sa.uploads.ru/t/9LxQd.png") no-repeat;
  height:300px;
  width:100%;
  clear:both;
}

.anonce-table .coll {
  float:left;
  overflow:hidden;
}
.anon-table-col {
  width:165px;
  height:185px;
  margin:20px 20px;
}
.anon-table-slider {
  width:185px;
  margin:30px 30px;
  height: 140px;
}
.anon-table-simple {
  width:130px;
  margin:20px 10px;
  height: 160px;
}

.anonce-table ul li {
  list-style:none;
  display: inline;
}

.anonce-table .tabs li {
  opacity:0.6;
}

.anonce-table .tabs li:hover {
  opacity:0.8; 
  transition:1s;
}

.anonce-table .tabs .active {
  opacity:1;
}

.anonce-table ul {
  padding:0 5px;
  margin:0;
}


#slider {
height:115px;
	overflow: hidden;
	position:relative;
}
.sli-links {
  margin-left: 40px;
}

.sli-links .control-slide {
  opacity: 0.8;
	background: #8D8F8D;
	margin: 0 8px 0 0;
	width: 16px;
	height: 16px;
	border-radius: 8px;
	cursor: pointer;
	overflow: hidden;
	display: block;
	float: left;
	box-shadow: 0 1px 2px #000;
  text-indent:-9999px;
}

.sli-links .control-slide:hover, .sli-links .control-slide.active {
	background:#464746;
  transition:1s;
}