слайдэр минимальный картинка и переключатели(вперед/назад)
<div style="padding:10px">
<div class="sp-slideshow">
<input id="button-1" type="radio" name="radio-set" class="sp-selector-1" checked="checked" />
<label for="button-1" class="button-label-1"></label>
<input id="button-2" type="radio" name="radio-set" class="sp-selector-2" />
<label for="button-2" class="button-label-2"></label>
<div class="sp-content">
<ul class="sp-slider clearfix">
<li><img width="100%" src="/img/op_valkiriya.png"></li>
<li><img width="100%" src="/img/op_valkiriya_device.png"></li>
</ul>
</div>
</div>
<div style="background:#f3f3f3;color:#777;border:1px solid #ddd;padding:5px;">
<div class="floatr">
<label for="button-2"><img src="/img/arrow_go.png" title="Вернутся назад" /></label>
</div>
<label for="button-1"><img src="/img/arrow_back.png" title="Вернутся назад" /></label>
</div>
</div>
/*css*/
.sp-slideshow {position:relative;width:100%;max-height:460px;}
.sp-content {background: #7d7f72 url(../images/grid.png) repeat scroll 0 0;position: relative;width: 100%;height: 100%;overflow: hidden;}
.sp-slideshow input {position: absolute;bottom: 15px;left: 50%; width: 9px;height: 9px; z-index: 1001;cursor: pointer; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0);opacity: 0;}
.sp-slideshow input + label {position: absolute;bottom: 15px; left: 50%; width: 6px; height: 6px; display: block; z-index: 1000; border: 3px solid #fff; border: 3px solid rgba(255,255,255,0.9); -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -webkit-transition: background-color linear 0.1s; -moz-transition: background-color linear 0.1s; -o-transition: background-color linear 0.1s; -ms-transition: background-color linear 0.1s; transition: background-color linear 0.1s;}
.sp-slideshow input:checked + label { background-color: #fff; background-color: rgba(255,255,255,0.9);}
.sp-selector-1, .button-label-1 { margin-left: -36px;}
.sp-selector-2, .button-label-2 { margin-left: -18px;}
.sp-selector-4, .button-label-4 { margin-left: 18px;}
.sp-selector-5, .button-label-5 { margin-left: 36px;}
.sp-slideshow input:checked ~ .sp-content { -webkit-transition: background-position linear 0.6s, background-color linear 0.8s; -moz-transition: background-position linear 0.6s, background-color linear 0.8s; -o-transition: background-position linear 0.6s, background-color linear 0.8s; -ms-transition: background-position linear 0.6s, background-color linear 0.8s; transition: background-position linear 0.6s, background-color linear 0.8s;}
.sp-slideshow input:checked ~ .sp-content .sp-parallax-bg { -webkit-transition: background-position linear 0.7s; -moz-transition: background-position linear 0.7s; -o-transition: background-position linear 0.7s; -ms-transition: background-position linear 0.7s; transition: background-position linear 0.7s;}
.sp-arrow_go { position: absolute; top: 50%; width: 28px; height: 38px; margin-top: -19px; display: none; opacity: 0.8; cursor: pointer; z-index: 1000; background: transparent url(/img/arrow_go.png) no-repeat; -webkit-transition: opacity linear 0.3s; -moz-transition: opacity linear 0.3s; -o-transition: opacity linear 0.3s; -ms-transition: opacity linear 0.3s; transition: opacity linear 0.3s;}
.sp-arrow_go:hover{ opacity: 1;}
.sp-arrow_go:active{ margin-top: -18px;}
input.sp-selector-1:checked ~ .sp-content { background-position: 0 0; background-color: #727b7f;}
input.sp-selector-2:checked ~ .sp-content { background-position: -100px 0; background-color: #7f7276;}
input.sp-selector-3:checked ~ .sp-content { background-position: -200px 0; background-color: #737f72;}
input.sp-selector-4:checked ~ .sp-content { background-position: -300px 0; background-color: #79727f;}
input.sp-selector-5:checked ~ .sp-content { background-position: -400px 0; background-color: #7d7f72;}
input.sp-selector-1:checked ~ .sp-content .sp-parallax-bg { background-position: 0 0;}
input.sp-selector-2:checked ~ .sp-content .sp-parallax-bg { background-position: -200px 0;}
input.sp-selector-3:checked ~ .sp-content .sp-parallax-bg { background-position: -400px 0;}
input.sp-selector-4:checked ~ .sp-content .sp-parallax-bg { background-position: -600px 0;}
input.sp-selector-5:checked ~ .sp-content .sp-parallax-bg { background-position: -800px 0;}
.sp-slider { position: relative; left: 0; width: 500%; height: 100%; list-style: none; margin: 0; padding: 0; -webkit-transition: left ease-in 0.8s; -moz-transition: left ease-in 0.8s; -o-transition: left ease-in 0.8s; -ms-transition: left ease-in 0.8s; transition: left ease-in 0.8s; }
.sp-slider > li { color: #fff; width: 20%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; height: 100%; float: left; text-align: center; opacity: 0.4; -webkit-transition: opacity ease-in 0.4s 0.8s; -moz-transition: opacity ease-in 0.4s 0.8s; -o-transition: opacity ease-in 0.4s 0.8s; -ms-transition: opacity ease-in 0.4s 0.8s; transition: opacity ease-in 0.4s 0.8s; }
.sp-slider > li img{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; display: block; margin: 0 auto; max-height: 100%; max-width: 100%;}
input.sp-selector-1:checked ~ .sp-content .sp-slider { left: 0;}
input.sp-selector-2:checked ~ .sp-content .sp-slider { left: -100%;}
input.sp-selector-3:checked ~ .sp-content .sp-slider { left: -200%;}
input.sp-selector-4:checked ~ .sp-content .sp-slider { left: -300%;}
input.sp-selector-5:checked ~ .sp-content .sp-slider { left: -400%;}
input.sp-selector-1:checked ~ .sp-content .sp-slider > li:first-child,
input.sp-selector-2:checked ~ .sp-content .sp-slider > li:nth-child(2),
input.sp-selector-3:checked ~ .sp-content .sp-slider > li:nth-child(3),
input.sp-selector-4:checked ~ .sp-content .sp-slider > li:nth-child(4),
input.sp-selector-5:checked ~ .sp-content .sp-slider > li:nth-child(5){ opacity: 1;}
Нужно 10 слайдеров на одной странице
Контент-модули
Продвижение сайта
Управление сайтом