.slider {
float:left;
width:560px;
height:200px;
position:relative;
padding:0px;
background:#eee;
border:1px solid #ddd;
}

.sliderContent {
float:left;
width:500px;
height:200px;
clear:both;
position:relative;
overflow:hidden;
border:none;
padding:0px 30px 0px 30px;
background:url('http://webelement.info/materials/NoteSlider/topbg.png')repeat;
}

.title_note{
text-align:center;
display:block;
margin:0 0px 0 -34px;
background:#fefefe;
padding:1px 0px 0px 0px;
width:560px;
}
.title_note h1{
font:23px Verdana,sans-serif;
color:#777;
padding:0px;
}
.title_note h1:before{
position:absolute;
content:' ';
display:inline-block;
border-left:4px double #f2c4c4;
width:4px;
height:62px;
top:0px;
left:-4px;
}

.content_note{
font: 13px Verdana,sans-serif;
color:#777;
padding:0px 0px 0px 10px;
margin-top:-10px;
line-height:25px;
height:120px;
overflow:hidden;
}

.sliderArrows a {
display:none;
text-indent:-9999px;
}

.sliderContent .item {
position:absolute;
width:500px;
height:200px;
background:transparent;
border-left:4px double #f2c4c4;
}

.sliderBullets {
position:absolute;  
bottom:5px;  
right:10px;  
z-index:50;  
margin-left:13px;
}  

.sliderBullets a {  
display:block;  
float:left;  
text-indent:-9999px;  
outline:none;  
margin-left:5px;  
border:none;
background:url('http://webelement.info/materials/NoteSlider/active_noactive.png')no-repeat;
background-position:-15px;
width:13px;
height:13px;
}  

.sliderBullets .active {  
background-position:0px 0px;
}  

.sliderContent a {
outline:none;
}

<script src="http://webelement.info/materials/NoteSlider/mobilyslider.js" type="text/javascript"></script>  
<script type="text/javascript">  
$(function(){
$('.note').mobilyslider({
  transition: 'fade',
  animationSpeed:400,
  autoplaySpeed:5000,
  bullets: true,
  autoplay: true,
  pauseOnHover: true,
  arrows: false,
  arrowsHide: false
  });
});
</script>  

  <div class="slider note">
  <div class="sliderContent">
  <div class="item">
  <span class="title_note"><h1>Первая запись</h1></span>
  <p class="content_note">Описание первой записи</p>
  </div>
  <div class="item">
  <span class="title_note"><h1>Вторая запись</h1></span>
  <p class="content_note">Описание второй записи</p>
  </div>
  <div class="item">
  <span class="title_note"><h1>Третья запись</h1></span>
  <p class="content_note">Описание третьей записи</p>
  </div>
  <div class="item">
  <span class="title_note"><h1>Четвертая запись</h1></span>
  <p class="content_note">Описание четвертой записи</p>
  </div>
  <div class="item">
  <span class="title_note"><h1>Пятая запись</h1></span>
  <p class="content_note">Описание пятой записи</p>
  </div>
  <div class="item">
  <span class="title_note"><h1>Шестая запись</h1></span>
  <p class="content_note">Описание шестой записи</p>
  </div>
  </div>
  </div>