<div class="wrapper">
  <div id="cn-slideshow" class="cn-slideshow">
  <div class="cn-images">
  <img src="/images/large/1.jpg" alt="image01" title="Красивые пейзажи 1" data-thumb="images/thumbs/1.jpg" style="display:block;"/>
  <img src="/images/large/2.jpg" alt="image02" title="Красивые пейзажи 2" data-thumb="images/thumbs/2.jpg"/>
  <img src="/images/large/3.jpg" alt="image03" title="Красивые пейзажи 3" data-thumb="images/thumbs/3.jpg"/>
  <img src="/images/large/4.jpg" alt="image04" title="Красивые пейзажи 4" data-thumb="images/thumbs/4.jpg"/>
  </div><!-- cn-images -->
  </div><!-- cn-slideshow -->
  </div>
  <noscript>
  <style>
  .cn-images img{position: relative;display: block;border-bottom: 5px solid #d0ab47;}  
  .cn-slideshow{height: auto;}
  </style>
  </noscript>
  <script id="barTmpl" type="text/x-jquery-tmpl">
  <div class="cn-bar">
  <div class="cn-nav">
  <a href="#" class="cn-nav-prev">
  <span>Previous</span>
  <div style="background-image:url(${prevSource});"></div>  
  </a>
  <a href="#" class="cn-nav-next">
  <span>Next</span>
  <div style="background-image:url(${nextSource});"></div>
  </a>
  </div><!-- cn-nav -->
  <div class="cn-nav-content">
  <div class="cn-nav-content-prev">
  <span>ПРЕДЫДУЩЕЕ ИЗОБРАЖЕНИЕ</span>
  <h3>${prevTitle}</h3>
  </div>
  <div class="cn-nav-content-current">
  <span>Сейчас вы просматриваете</span>
  <h2>${currentTitle}</h2>
  </div>
  <div class="cn-nav-content-next">
  <span>СЛЕДУЮЩЕЕ ИЗОБРАЖЕНИЕ</span>
  <h3>${nextTitle}</h3>
  </div>
  </div><!-- cn-nav-content -->
  </div><!-- cn-bar -->
  </script>

<link rel="stylesheet" type="text/css" href="/css/style.css" />
<script type="text/javascript" src="/js/jquery.tmpl.min.js"></script>
<script type="text/javascript" src="/js/jquery.slideshow.js"></script>
  <script type="text/javascript">
  $(function() {
  $('#cn-slideshow').slideshow();
  });
  </script>