<style>

#slider  {
    position: relative;
    overflow: hidden;
     margin: 0 0 30px;
}
.slides, .slide  {
    padding: 0;
     margin: 0;
     list-style: none;
}
.slide  {
    position: relative;
     display: none;
}
.slide:first-child  {
    display: block;
}
.slide img  {
    display: block;
     padding: 0;
     margin: 0 auto;
}
.caption  {
    position: absolute;
     padding: 0 0 20px;
     left: 0;
     bottom: 0;
     width: 100%;
     background: rgba(26, 188, 156, .8);
     color: #fff;
}
.cap-ttl  {
    padding: 20px 20px 10px;
     font-size: 20px;
     text-transform: uppercase;
    font-family: 'PT Sans';
}
.cap-ttl a  {
    color: #fff;
}
.cap-ds  {
    padding: 0 20px 20px;
     font-size: 15px;
}
#slider  {
    text-align:  center;
}
.flex-viewport  {
    text-align:  left;
}
.flex-control-nav  {
    margin:  0;
     padding:  0;
     list-style:  none;
}
.flex-control-nav  {
    position:  relative;
    bottom: 25px;
     text-align:  center;
     display:  inline-block;
}
.flex-control-nav li  {
    margin:  0 6px;
     display:  block;
     float:  left;
}
.flex-control-paging li a  {
    width:  11px;
     height:  11px;
     display:  block;
     background:  #fff;
     cursor:  pointer;
     text-indent: 100%;
     overflow: hidden;
     white-space: nowrap;
     -webkit-border-radius:  20px;
     -moz-border-radius:  20px;
     border-radius:  20px;
}
.flex-control-paging li a:hover  {
     background:  #f27935;
}
.flex-control-paging li a.flex-active  {
     background:  #f27935;
     cursor:  default;
}
.clr  {
    clear: both;
}
@media only screen and (max-width: 960px)  {
    .cap-ttl  {
    padding: 15px 20px 10px;
     font-size: 18px;
}
.cap-ds  {
    padding: 0 20px 15px;
     font-size: 14px;
}
}
@media only screen and (max-width: 640px) {
    .cap-ttl  {
    font-size: 15px;
}
.cap-ds  {
    font-size: 12px;
}
}
@media only screen and (max-width: 480px)  {
    .cap-ttl  {
    padding: 10px 20px;
     font-size: 14px;
}
.cap-ds  {
    display: none;
}
}
@media only screen and (max-width: 360px)  {
    #slider  {
    display: none;
}
}
</style>

<script type="text/javascript" src="/.s/t/1322/jquery.flexslider-min.js"></script>

<section>
<div id="slider">
<ul class="slides">
<li class="slide">
<img src="/_bd/14/53755529.jpg" alt="">
<div class="caption">
<div class="cap-ttl">
<a href="/_bd/14/53755529.jpg">название к слайдеру -1</a>
</div>
<div class="cap-ds">описание к слайду -1</div>
</div>
</li>
<li class="slide">
<img src="/_bd/9/33600318.jpg" alt="">
<div class="caption">
<div class="cap-ttl">
<a href="/_bd/9/33600318.jpg">название к слайдеру -2</a>
</div>
<div class="cap-ds">описание к слайду -2</div>
</div>
</li>
<li class="slide">
<img src="/_bd/14/53755529.jpg" alt="">
<div class="caption">
<div class="cap-ttl">
<a href="/_bd/14/53755529.jpg">название к слайдеру -3</a>
</div>
<div class="cap-ds">описание к слайду -3</div>
</div>
</li>
</ul>
</div>
</section>

<script>
$('#slider').flexslider({
animation: "slide",
slideshowSpeed: 10000,
directionNav: false
});
</script>