Glossy Square Gray

<link rel="stylesheet" type="text/css" href="/advanced-slider/css/responsive-slider.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/advanced-slider/css/advanced-slider-base.css" media="screen"/>
<link rel="stylesheet" type="text/css" href="/advanced-slider/css/glossy-square-gray.css" media="screen"/>
<script type="text/javascript" src="/advanced-slider/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="/advanced-slider/js/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="/advanced-slider/js/jquery.advancedSlider.min.js"></script>

<script type="text/javascript">  
  jQuery(document).ready(function($){
  $('#responsive-slider').advancedSlider({width: '80%',
  height: '70%',
  scaleType: 'outsideFit',
  skin: 'glossy-square-gray',
  effectType: 'swipe',
  pauseSlideshowOnHover: true,
  swipeThreshold: 50,
  slideButtons: false,
  thumbnailType: 'scroller',
  thumbnailButtons: true,
  thumbnailScrollerResponsive: true,
  minimumVisibleThumbnails: 2,
  slideProperties:{
  0:{captionSize: 35, captionHideEffect: 'slide'},
  1:{captionPosition: 'custom', captionShowEffect: 'fade', captionHeight: 160, captionLeft: 70, slideshowDelay: 10000},
  3:{captionSize: 40},
  5:{captionPosition: 'left', captionSize: 150, captionHideEffect: 'slide'},
  7:{captionPosition: 'right', captionSize: 150, captionHideEffect: 'slide'}
  }
  });
  });
   
   
</script>

<div class="advanced-slider" id="responsive-slider">
  <ul class="slides">
  <li class="slide">
  <img class="image" src="/advanced-slider/images/image1.jpg" alt=""/>
  <img class="thumbnail" src="/advanced-slider/images/thumb1.jpg" alt="Название"/>
  <div class="caption">Данный текст является как наглядный пример.</div>
  </li>
   
  <li class="slide rounded-caption">
  <img class="image" src="/advanced-slider/images/image2.jpg" alt=""/>
  <img class="thumbnail" src="/advanced-slider/images/thumb2.jpg" alt="Название"/>
  <div class="caption"><b><i>Данный текст</i></b> <br/><br/> является как наглядный пример описания материала и обращать на него внимания не стоит.  
  Данный текст является как наглядный пример описания материала и обращать на него внимания не стоит.</div>
  </li>
   
  <li class="slide">
  <img class="image" src="/advanced-slider/images/image3.jpg" alt=""/>
  <img class="thumbnail" src="/advanced-slider/images/thumb3.jpg" alt="Название"/>
  </li>
   
  <li class="slide">
  <img class="image" src="/advanced-slider/images/image4.jpg" alt=""/>
  <img class="thumbnail" src="/advanced-slider/images/thumb4.jpg" alt="Название"/>
  <div class="caption">Данный текст является как наглядный пример <a href="#">ССЫЛКА</a> или <input type="button" value="Кнопка"/></div>
  </li>
   
  <li class="slide">
  <img class="image" src="/advanced-slider/images/image5.jpg" alt=""/>
  <img class="thumbnail" src="/advanced-slider/images/thumb5.jpg" alt="Название"/>
  </li>
   
  <li class="slide">
  <img class="image" src="/advanced-slider/images/image6.jpg" alt=""/>
  <img class="thumbnail" src="/advanced-slider/images/thumb6.jpg" alt="Название"/>
  <div class="caption"><u>Название</u><br/><br/>Данный текст является<ul><li>как пример</li><li>как пример</li><li>как пример</li></ul></div>
  </li>
   
  <li class="slide">
  <img class="image" src="/advanced-slider/images/image7.jpg" alt=""/>
  <img class="thumbnail" src="/advanced-slider/images/thumb7.jpg" alt="Название"/>
  </li>
   
  <li class="slide">
  <img class="image" src="/advanced-slider/images/image8.jpg" alt=""/>
  <img class="thumbnail" src="/advanced-slider/images/thumb8.jpg" alt="Название"/>
  <div class="caption"><u>Название</u><br/><br/><br/>Данный текст является<ul><li>как пример</li><li>как пример</li><li>как пример</li></ul></div>
  </li>
   
  <li class="slide">
  <img class="image" src="/advanced-slider/images/image9.jpg" alt=""/>
  <img class="thumbnail" src="/advanced-slider/images/thumb9.jpg" alt="Название"/>
  </li>
   
  <li class="slide">
  <img class="image" src="/advanced-slider/images/image10.jpg" alt=""/>
  <img class="thumbnail" src="/advanced-slider/images/thumb10.jpg" alt="Название"/>
  </li>
  </ul>
  </div>