<script type="text/javascript" src="/js/jmpress.min.js"></script>  
  <script type="text/javascript" src="/js/jquery.jmslideshow.js"></script>  
  <script>  
  $(document).ready(function() {  
  $('#jms-slideshow').jmslideshow();  
  });  
  </script>

.jms-slideshow {  
  position: relative;  
  width: 80%;  
  max-width: 1400px;  
  min-width: 640px;  
  margin: 20px auto;  
  height: 460px;  
  }  
  .jms-wrapper {  
  width: auto;  
  min-width: 600px;  
  height: 440px;  
  background-color: #fff;  
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);  
  -webkit-background-clip: padding;  
  -moz-background-clip: padding;  
  background-clip: padding-box;  
  border: 10px solid #fff;  
  border: 10px solid rgba(255, 255, 255, 0.9);  
  outline: none;  
  -webkit-transition: background-color 1s linear;  
  -moz-transition: background-color 1s linear;  
  -o-transition: background-color 1s linear;  
  -ms-transition: background-color 1s linear;  
  transition: background-color 1s linear;  
  }  
  .color-1 {  
  background-color: #E3D8FF;  
  background-color: rgba(227, 216, 268, 1);  
  }  
  .color-2 {  
  background-color: #EBBBBC;  
  background-color: rgba(235, 187, 188, 1);  
  }  
  .color-3 {  
  background-color: #EED9C0;  
  background-color: rgba(238, 217, 192, 1);  
  }  
  .color-4 {  
  background-color: #DFEBB1;  
  background-color: rgba(223, 235, 177, 1);  
  }  
  .color-5 {  
  background-color: #C1E6E5;  
  background-color: rgba(193, 230, 229, 1);  
  }  
  .step {  
  width: 900px;  
  height: 420px;  
  display: block;  
  -webkit-transition: opacity 1s;  
  -moz-transition: opacity 1s;  
  -ms-transition: opacity 1s;  
  -o-transition: opacity 1s;  
  transition: opacity 1s;  
  }  
  .step:not(.active) {  
  opacity: 0;  
  filter: alpha(opacity=0);  
  /* internet explorer */  
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";  
  /*IE8*/  
  }  
  .jms-content {  
  margin: 0px 370px 0px 20px;  
  position: relative;  
  clear: both;  
  }  
  .step h3 {  
  color: #fff;  
  font-size: 52px;  
  font-weight: bold;  
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);  
  margin: 0;  
  padding: 60px 0 10px 0;  
  }  
  .step p {  
  color: #fff;  
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);  
  font-size: 34px;  
  font-weight: normal;  
  position: relative;  
  margin: 0;  
  }  
  a.jms-link {  
  color: #fff;  
  text-transform: uppercase;  
  background: #969696;  
  /* Old browsers */  
  background: -moz-linear-gradient(top, #969696 0%, #727272 100%);  
  /* FF3.6+ */  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #969696), color-stop(100%, #727272));  
  /* Chrome,Safari4+ */  
  background: -webkit-linear-gradient(top, #969696 0%, #727272 100%);  
  /* Chrome10+,Safari5.1+ */  
  background: -o-linear-gradient(top, #969696 0%, #727272 100%);  
  /* Opera 11.10+ */  
  background: -ms-linear-gradient(top, #969696 0%, #727272 100%);  
  /* IE10+ */  
  background: linear-gradient(top, #969696 0%, #727272 100%);  
  /* W3C */  
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#969696', endColorstr='#727272', GradientType=0);  
  /* IE6-9 */  
  padding: 8px 15px;  
  display: inline-block;  
  font-size: 16px;  
  font-weight: bold;  
  color: #fff;  
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);  
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);  
  border: 1px solid #444;  
  border-radius: 4px;  
  opacity: 1;  
  margin-top: 40px;  
  clear: both;  
  -webkit-transition: all 0.4s ease-in-out 1s;  
  -moz-transition: all 0.4s ease-in-out 1s;  
  -ms-transition: all 0.4s ease-in-out 1s;  
  -o-transition: all 0.4s ease-in-out 1s;  
  transition: all 0.4s ease-in-out 1s;  
  }  
  .step:not(.active) a.jms-link {  
  opacity: 0;  
  margin-top: 80px;  
  }  
  .step img {  
  position: absolute;  
  right: 0px;  
  top: 30px;  
  }  
  .jms-dots {  
  width: 100%;  
  position: absolute;  
  text-align: center;  
  left: 0px;  
  bottom: 20px;  
  z-index: 2000;  
  -webkit-user-select: none;  
  -moz-user-select: none;  
  -ms-user-select: none;  
  -o-user-select: none;  
  user-select: none;  
  }  
  .jms-dots span {  
  display: inline-block;  
  position: relative;  
  width: 12px;  
  height: 12px;  
  border-radius: 50%;  
  background: #777;  
  margin: 3px;  
  cursor: pointer;  
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 1px rgba(255, 255, 255, 0.3);  
  }  
  .jms-dots span.jms-dots-current:after {  
  content:'';  
  width: 8px;  
  height: 8px;  
  position: absolute;  
  top: 2px;  
  left: 2px;  
  border-radius: 50%;  
  background: #ffffff;  
  /* Old browsers */  
  background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);  
  /* FF3.6+ */  
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(47%, #f6f6f6), color-stop(100%, #ededed));  
  /* Chrome,Safari4+ */  
  background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);  
  /* Chrome10+,Safari5.1+ */  
  background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);  
  /* Opera 11.10+ */  
  background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);  
  /* IE10+ */  
  background: linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);  
  /* W3C */  
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);  
  /* IE6-9 */  
  }  
  .jms-arrows {  
  -webkit-user-select: none;  
  -moz-user-select: none;  
  -ms-user-select: none;  
  -o-user-select: none;  
  user-select: none;  
  }  
  .jms-arrows span {  
  position: absolute;  
  top: 50%;  
  margin-top: -40px;  
  height: 80px;  
  width: 30px;  
  cursor: pointer;  
  z-index: 2000;  
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);  
  border-radius: 3px;  
  }  
  .jms-arrows span.jms-arrows-prev {  
  background: #fff url(/images/arrow_left.png) no-repeat 50% 50%;  
  left: -10px;  
  }  
  .jms-arrows span.jms-arrows-next {  
  background: #fff url(/images/arrow_right.png) no-repeat 50% 50%;  
  right: -10px;  
  }  
  /* Not supported style */  
  .jms-wrapper.not-supported {  
  background-color: #E3D8FF;  
  background-color: rgba(227, 216, 268, 1);  
  }  
  .jms-wrapper.not-supported:after {  
  content:'The slideshow functionality is not supported on your device.';  
  padding: 0px 0px 30px 0px;  
  text-align: center;  
  display: block;  
  }  
  .jms-wrapper.not-supported .step {  
  display: none;  
  position: relative;  
  opacity: 1;  
  filter: alpha(opacity=99);  
  /* internet explorer */  
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)";  
  /*IE8*/  
  margin: 20px auto;  
  }  
  .jms-wrapper.not-supported .step:first-of-type {  
  display: block;  
  }  
  .jms-wrapper.not-supported .step:not(.active) a.jms-link {  
  opacity: 1;  
  margin-top: 40px;  
  }

<section id="jms-slideshow" class="jms-slideshow">  
  <div class="step" data-color="color-1">  
  <div class="jms-content">  
  <h3>Заголовок</h3>  
   

Любой текст</p>  
  <a class="jms-link" href="#">Заголовок ссылки</a>  
  </div>  
  <img src="Ссылка на картинку" />  
  </div>  

  <div class="step" data-color="color-2" data-y="500" data-scale="0.4" data-rotate-x="30">  
  <div class="jms-content">  
  <h3>Заголовок</h3>  
   

Любой текст</p>  
  <a class="jms-link" href="#">Заголовок ссылки</a>  
  </div>  
  <img src="Ссылка на картинку" />  
  </div>  

  <div class="step" data-color="color-3" data-x="2000" data-z="3000" data-rotate="170">  
  <div class="jms-content">  
  <h3>Заголовок</h3>  
   

Любой текст</p>  
  <a class="jms-link" href="#">Заголовок ссылки</a>  
  </div>  
  <img src="Ссылка на картинку" />  
  </div>  

  <div class="step" data-color="color-4" data-x="3000">  
  <div class="jms-content">  
  <h3>Заголовок</h3>  
   

Любой текст</p>  
  <a class="jms-link" href="#">Заголовок ссылки</a>  
  </div>  
  <img src="Ссылка на картинку" />  
  </div>  

  <div class="step" data-color="color-5" data-x="4500" data-z="1000" data-rotate-y="45">  
  <div class="jms-content">  
  <h3>Заголовок</h3>  
   

Любой текст</p>  
  <a class="jms-link" href="#">Заголовок ссылки</a>  
  </div>  
  <img src="Ссылка на картинку" />  
  </div>  
  </section>