/* Carousel */  
.container_car {  
  position:relative;  
  overflow:hidden;  
}  
.clear {  
  clear:both;  
  display:block;  
  overflow:hidden;  
  visibility:hidden;  
  width:0;  
  height: 0;  
} .carousel {  
  position:relative;  
  margin:0 auto;  
  padding:0px 30px;  
}  
.carousel, .carousel_mask {  
  width:960px;  
  wwidth:767px;  
  wwidth:570px;  
}  
.carousel_btn_left, .carousel_btn_right {  
  display:none;  
  position:absolute;  
  background:url("http://mvcreative.ru/example/13/images/btn_carousel.png") no-repeat 0px 0px;  
  width:15px;  
  height:20px;  
  top:50px;  
}  
.carousel_btn_left {  
  left:10px;  
}  
.carousel_btn_right {  
  background:url("http://mvcreative.ru/example/13/images/btn_carousel.png") no-repeat 0px -20px;  
  right:10px;  
}  
.carousel_btn_left:active, .carousel_btn_right:active{ margin-top:1px; }  
.carousel_mask {  
  position:relative;  
  overflow:hidden !important;  
}  
.carousel ul.carousel_items {  
  position:relative;  
  margin:0px;  
}  
.carousel ul.carousel_items li {  
  float:left;  
  margin-right:19px;  
}  
.carousel ul.carousel_items li img {  
  width:160px;  
  height:100px;  
} .img_frame {  
  display:inline-block;  
  margin:4px;  
  padding:5px;  
  background-color:#fff;  
  line-height:0px;  
  border:1px solid #c0c1c2;  
  -moz-border-radius:3px;  
  border-radius:3px;  
  box-shadow:0px 0px 4px 0px rgba(0,0,0,0.12);  
}  
.img_frame .container_car ul {position:absolute;}  
.img_frame .container_car ul li {  
  margin:0px;  
  padding:0px;  
  width:100%;  
  overflow:hidden;  
}  
.img_frame a.description {  
  display:block;  
  padding:5px 8px;  
  background-color:#ffd86a;  
  color:#555;  
  line-height:16px;  
  font-size:12px;  
  text-decoration:none;  
}  
.img_frame a.description h4 {padding:0px;}

</body>

<script src="http://mvcreative.ru/example/13/js/jquery.easing.1.3.js"></script>  
<script src="http://mvcreative.ru/example/13/js/carousel.js"></script>

<div class="carousel">  
  <a class="carousel_btn_left" href="#"></a>  
  <a class="carousel_btn_right" href="#"></a>  

  <div class="carousel_mask">  
  <ul class="carousel_items">  
  <li class="img_frame">  
  <div class="container_car">  
  <ul>  
  <li><a class="single_image" href="#"><img src="http://mvcreative.ru/example/13/images/13_thumb_160.jpg" alt="" /></a></li>  
  <li><a class="description" href="#">Hover эффекты для ваших новостей</a></li>  
  </ul>  
  </div>  
  </li>  
  <li class="img_frame">  
  <div class="container_car">  
  <ul>  
  <li><a class="iframe" href="#"><img src="http://mvcreative.ru/example/13/images/18_thumb_160.jpg" alt="" /></a></li>  
  <li><a class="description" href="#">Как изменить страницу "технические работы"</a></li>  
  </ul>  
  </div>  
  </li>  
  <li class="img_frame">  
  <div class="container_car">  
  <ul>  
  <li><a class="single_image" href="#"><img src="images/06_thumb_160.jpg" alt="" /></a></li>  
  <li><a class="description" href="#">Сложная задача? Простое решение!</a></li>  
  </ul>  
  </div>  
  </li>  
  <li class="img_frame">  
  <div class="container_car">  
  <ul>  
  <li><a class="single_image" href="#"><img src="http://mvcreative.ru/example/13/images/15_thumb_160.jpg" alt="" /></a></li>  
  <li><a class="description" href="#">Информационные сообщения</a></li>  
  </ul>  
  </div>  
  </li>  
  <li class="img_frame">  
  <div class="container_car">  
  <ul>  
  <li><a class="iframe" href="#"><img src="http://mvcreative.ru/example/13/images/13_thumb_160.jpg" alt="" /></a></li>  
  <li><a class="description" href="#">Hover эффекты для ваших новостей</a></li>  
  </ul>  
  </div>  
  </li>  
  <li class="img_frame">  
  <div class="container_car">  
  <ul>  
  <li><a class="single_image" href="#"><img src="http://mvcreative.ru/example/13/images/11_thumb_160.jpg" alt="" /></a></li>  
  <li><a class="description" href="#">Информационные сообщения</a></li>  
  </ul>  
  </div>  
  </li>  
  <li class="img_frame">  
  <div class="container_car">  
  <ul>  
  <li><a class="single_image" href="#"><img src="http://mvcreative.ru/example/13/images/07_thumb_160.jpg" alt="" /></a></li>  
  <li><a class="description" href="#">Сложная задача? Простое решение!</a></li>  
  </ul>  
  </div>  
  </li>  
  <li class="img_frame">  
  <div class="container_car">  
  <ul>  
  <li><a class="single_image" href="#"><img src="http://mvcreative.ru/example/13/images/18_thumb_160.jpg" alt="" /></a></li>  
  <li><a class="description" href="#">Как изменить страницу "технические работы"</a></li>  
  </ul>  
  </div>  
  </li>  
  </ul>  
  </div>  
</div><!--/carousel-->

<li class="img_frame">  
  <div class="container_car">  
  <ul>  
  <li><a class="single_image" href="$ENTRY_URL$"><img src="$IMG_URL1$" alt="" /></a></li>  
  <li><a class="description" href="$ENTRY_URL$">$TITLE$</a></li>  
  </ul>  
  </div>  
</li>

<div class="carousel">  
  <a class="carousel_btn_left" href="#"></a>  
  <a class="carousel_btn_right" href="#"></a>  

  <div class="carousel_mask">  
  <ul class="carousel_items">  
  $MYINF_#$  
  </ul>  
  </div>  
</div><!--/carousel-->

.carousel, .carousel_mask
5 слайдов - width:960px;
4 слайда - width:767px;
3 слайда - width:570px;

.carousel_btn_left, .carousel_btn_right {  
  display:block !important;  
}