<div class="item">
<div id="cont">
<img id="newsimage" src="$IMG_URL1$">
<div id="text">
<h2>$TITLE$</h2>
$MESSAGE$
<a href="$ENTRY_URL$" id="readmore">Чтать дальше...</a></div></div>
</div>

<script src="http://getelement.3dn.ru/materials/mobslider_news/mobilyslider.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
  $('.news').mobilyslider({
  transition: 'horizontal',
  animationSpeed:300,
  bullets: true,
  autoplay: true,
  pauseOnHover: true
  });
});
</script>

<div class="slider news"><div class="sliderContent">$MYINF_1$</div></div>

.slider {
float:left;
width:600px;
height:200px;
position:relative;
padding-bottom:26px;
}

.sliderContent {
float:left;
width:600px;
height:200px;
clear:both;
position:relative;
overflow:hidden;
border:1px solid #ddd;
}

.sliderArrows a {
color:transparent!important;
display:block;
text-indent:-9999px;
outline:none;
z-index:50;
background-image:url(http://getelement.3dn.ru/materials/mobslider_news/prev_next.png);
width:25px;
height:27px;
position:absolute;
top:50%;
margin-top:-34px;
}

.prev {
left:5px;
background-position:-27px 0px;
}

.prev:hover {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
filter: alpha(opacity=50);
}

.next {
right:5px;
background-position: 0px 0px;
}

.next:hover {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);
-moz-opacity: 0.5;
opacity: 0.5;
filter: alpha(opacity=50);
}

.sliderContent .item {
position:absolute;
width:600px;
height:200px;
background: #f1f1f1;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#EEE));
background-image: -webkit-linear-gradient(top, #f1f1f1, #EEE);
background-image: -moz-linear-gradient(top, #f1f1f1, #EEE);
background-image: -ms-linear-gradient(top, #f1f1f1, #EEE);
background-image: -o-linear-gradient(top, #f1f1f1, #EEE);
background-image: linear-gradient(top, #f1f1f1, #EEE);
}

.sliderBullets {
position:absolute;
bottom:0;
left:50%;
z-index:50;
margin-left:-45px;
}

.sliderBullets a {
color:transparent!important;
display:block;
float:left;
text-indent:-9999px;
outline:none;
margin-left:5px;
width:10px;
height:11px;
background:url(http://getelement.3dn.ru/materials/mobslider_news/bullets.png) no-repeat;
}

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

.sliderContent a {
outline:none!important;
text-decoration:none!important;
}

.sliderContent #cont{padding:25px 40px 10px 40px;display:block;}

#text{text-align:left;float:right;width:320px;height:128px;color:#666;font-size:12px;overflow:hidden;}
#text h2{font-size:13px;color:#444;}
#readmore{
background-image: -webkit-gradient(linear, left top, left bottom, from(#EEE), to(#E1E1E1));
background-image: -webkit-linear-gradient(top, #EEE, #E1E1E1);
background-image: -moz-linear-gradient(top, #EEE, #E1E1E1);
background-image: -ms-linear-gradient(top, #EEE, #E1E1E1);
background-image: -ms-linear-gradient(top, #EEE, #E1E1E1);
background-image: -o-linear-gradient(top, #EEE, #E1E1E1);
background-image: linear-gradient(top, #EEE, #E1E1E1);
-webkit-border-radius: 3px;
-moz-border-radius:3px;
border-radius: 3px;
-webkit-box-shadow: 0 0px 2px #666;
-moz-box-shadow: 0 0px 2px #666;
box-shadow: 0 0px 2px #666;
color:#333;
float:right;
display:inline-block;
font-size:11px;
font-weight:bold;
padding:4px;
position:absolute;
top:80%;
right:35px;
}
#readmore:hover{color:yellowgreen;}
#newsimage{float:left;border: 4px solid #fff;width:180px;height:120px;margin:10px 10px 0px 0px;}