Если что то слайдер был сделан только под изображения не более того не вздумайте его всунуть под другое что-то !
Код
.slider {
float:left;
width:600px;
height:200px;
position:relative;
padding:0px;
}
.sliderContent {
float:left;
width:600px;
height:200px;
clear:both;
position:relative;
overflow:hidden;
border:1px solid #888;
padding:28px;
background: #eee;
background: -moz-linear-gradient(-45deg, #eee 0%, #e5e5e5 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#eee), color-stop(100%,#e5e5e5));
background: -webkit-linear-gradient(-45deg, #eee 0%,#e5e5e5 100%);
background: -o-linear-gradient(-45deg, #eee 0%,#e5e5e5 100%);
background: -ms-linear-gradient(-45deg, #eee 0%,#e5e5e5 100%);
background: linear-gradient(135deg, #eee 0%,#e5e5e5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eee', endColorstr='#e5e5e5',GradientType=1 );
}
.sliderArrows a {
display:block;
text-indent:-9999px;
outline:none;
z-index:50;
background-image:url(http://www.testcs.ru/RaznieSkripti/next_prev.png);
width: 56px;
height: 66px;
position:absolute;
bottom:40px;
margin-bottom:0px;
}
.prev, .next{
-webkit-transition: all .2s linear;
-moz-transition: all .2s linear;
-o-transition: all .2s linear;
-ms-transition: all .2s linear;
transition: all .2s linear;
}
.prev {
left:-36px;
background-position: 0 0;
width: 56px;
height: 66px;
}
.prev:hover {
-webkit-transform: matrix(1,0,0,1,-10,0);
-moz-transform: matrix(1,0,0,1,-10px,0px);
-ms-transform: matrix(1,0,0,1,-10,0);
-o-transform: matrix(1,0,0,1,-10,0);
transform: matrix(1,0,0,1,-10,0);
}
.next {
right:-96px;
background-position: -60px -1px ;
width: 56px;
height: 66px;
}
.next:hover {
-webkit-transform: matrix(1,0,0,1,10,0);
-moz-transform: matrix(1,0,0,1,10px,0px);
-ms-transform: matrix(1,0,0,1,10,0);
-o-transform: matrix(1,0,0,1,10,0);
transform: matrix(1,0,0,1,10,0);
}
.sliderContent .item {
position:absolute;
width:600px;
height:200px;
background:#ddd;
border:1px solid #999;
}
.sliderBullets {
display:none;
text-decoration:none;
}
.sliderBullets a {
display:none;
text-indent:-9999px;
outline:none;
text-decoration:none;
}
.sliderBullets .active {
background-position:left;
}
.sliderContent a {
outline:none;
text-decoration:none;
}
a img {
border:none;
}
.sliderContent #images{padding:0px;display:block;}
#image{width:600px;height:200px;margin:0px;}
Код
<script src="http://www.testcs.ru/RaznieSkripti/mobilyslider.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('.images').mobilyslider({
transition: 'fade',
animationSpeed:400,
bullets: false,
autoplay: true,
pauseOnHover: true,
arrows: true,
arrowsHide: false
});
});
</script>
Вставляем Где хотим увидеть наш слайдер,ставить можно его в любое удобное для вас место вот код: