| admin | Дата: Суббота, 21.12.2013, 16:12 | Сообщение # 1 |
 Главный админ
Группа: Администраторы
Сообщений: 336
Награды: 0
Репутация: 1
Статус: Offline
| Слайдер изображений новостей для uCoz
В этом материале мы для вас подготовили одно интересное готовое решение для новостных порталов на бесплатном хостинге uCoz. Слайдер достаточно красивый, фон слайдера прокручивается медленнее чем сами слайды, что создаёт трёхмерный эффект. Отлично подойдёт для любого новостного портала, а так же и для фото порталов. В этом материале код предназначен именно для фотографий, но html можно доработать и для новостей. Для этого нужно иметь хотя бы минимальные знания html разметки шаблонов сайта uCoz и немножко фантазии.
Для начала вам нужно скачать прикреплённый архив с картинками и загрузить его на свой сайт при помощи файлового менеджера в папку images.
Установка:
№1 Заходим в админ панель вашего сайта uCoz
№2 В верхнем меню ищем CSS шаблон сайта и вставляем ниже приведенный код в него.
Код CSS:
Код .sp-slideshow {
position: relative;
margin:10pxauto;
width:80%;
max-width:1000px;
min-width:260px;
height:460px;
border:10px solid #fff;
border:10px solid rgba(255,255,255,0.9);
box-shadow:02px6px rgba(0,0,0,0.2);
}
.sp-content {
background:#7d7f72 url(/images/grid.png) repeat scroll 0 0;
position: relative;
width:100%;
height:100%;
overflow: hidden;
}
.sp-parallax-bg {
background: url(/images/map.png) repeat-x scroll 00;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
position: absolute;
top:0;
left:0;
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-arrow {
position: absolute;
top:50%;
width:28px;
height:38px;
margin-top:-19px;
display: none;
opacity:0.8;
cursor: pointer;
z-index:1000;
background: transparent url(/images/arrows.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:hover {
opacity:1;
}
.sp-arrow:active {
margin-top:-18px;
}
.sp-selector-1:checked~.sp-arrow.sp-a2,.sp-selector-2:checked~.sp-arrow.sp-a3,.sp-selector-3:checked~.sp-arrow.sp-a4,.sp-selector-4:checked~ .sp-arrow.sp-a5 {
right:15px;
display: block;
background-position: top right;
}
.sp-selector-2:checked~.sp-arrow.sp-a1,.sp-selector-3:checked~.sp-arrow.sp-a2,.sp-selector-4:checked~.sp-arrow.sp-a3,.sp-selector-5:checked~ .sp-arrow.sp-a4 {
left:15px;
display: block;
background-position: top left;
}
.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;
}
input.sp-selector-1:checked~.sp-content {
background-position:00;
background-color:#727b7f;
}
input.sp-selector-2:checked~.sp-content {
background-position:-100px0;
background-color:#7f7276;
}
input.sp-selector-3:checked~.sp-content {
background-position:-200px0;
background-color:#737f72;
}
input.sp-selector-4:checked~.sp-content {
background-position:-300px0;
background-color:#79727f;
}
input.sp-selector-5:checked~.sp-content {
background-position:-400px0;
background-color:#7d7f72;
}
input.sp-selector-1:checked~.sp-content .sp-parallax-bg {
background-position:00;
}
input.sp-selector-2:checked~.sp-content .sp-parallax-bg {
background-position:-200px0;
}
input.sp-selector-3:checked~.sp-content .sp-parallax-bg {
background-position:-400px0;
}
input.sp-selector-4:checked~.sp-content .sp-parallax-bg {
background-position:-600px0;
}
input.sp-selector-5:checked~.sp-content .sp-parallax-bg {
background-position:-800px0;
}
.sp-slider {
position: relative;
left:0;
width:500%;
height:100%;
list-style: none;
margin:0;
padding:0;
-webkit-transition: left ease-in0.8s;
-moz-transition: left ease-in0.8s;
-o-transition: left ease-in0.8s;
-ms-transition: left ease-in0.8s;
transition: left ease-in0.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%;
padding:060px;
float: left;
text-align: center;
opacity:0.4;
-webkit-transition: opacity ease-in0.4s0.8s;
-moz-transition: opacity ease-in0.4s0.8s;
-o-transition: opacity ease-in0.4s0.8s;
-ms-transition: opacity ease-in0.4s0.8s;
transition: opacity ease-in0.4s0.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:0auto;
padding:40px050px0;
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;
}
@media screen and(max-width:840px){
.sp-slideshow {
height:345px;
}
}
@media screen and(max-width:680px){
.sp-slideshow {
height:285px;
}
}
@media screen and(max-width:560px){
.sp-slideshow {
height:235px;
}
}
@media screen and(max-width:320px){
.sp-slideshow {
height:158px;
}
}
№3 В нужное для вас место (в то место где вы хотите видеть слайдер) копируйте нижеприведённый код.
Следующий код в то место, где должен быть сам слайдер:
Код <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> <input id="button-3" type="radio" name="radio-set" class="sp-selector-3" /> <label for="button-3" class="button-label-3"></label> <input id="button-4" type="radio" name="radio-set" class="sp-selector-4" /> <label for="button-4" class="button-label-4"></label> <input id="button-5" type="radio" name="radio-set" class="sp-selector-5" /> <label for="button-5" class="button-label-5"></label> <label for="button-1" class="sp-arrow sp-a1"></label> <label for="button-2" class="sp-arrow sp-a2"></label> <label for="button-3" class="sp-arrow sp-a3"></label> <label for="button-4" class="sp-arrow sp-a4"></label> <label for="button-5" class="sp-arrow sp-a5"></label> <div class="sp-content"> <div class="sp-parallax-bg"></div> <ul class="sp-slider clearfix"> <li> <img src="Ссылка на картинку" alt="image01" /> </li> <li> <img src="Ссылка на картинку" alt="image02" /> </li> <li> <img src="Ссылка на картинку" alt="image03" /> </li> <li> <img src="Ссылка на картинку" alt="image04" /> </li> <li> <img src="Ссылка на картинку" alt="image05" /> </li> </ul> </div> <!-- sp-content --> </div> <!-- sp-slideshow -->
Если же вы всё делали верно, тогда могу вас обрадовать - установка завершена. Но если уровень ваших знаний не такой большой и мало опыта с установкой скриптов и html кодов на сайт uCoz и если всё-таки у вас что то не получается или какие-то проблемы с установкой , тогда напишите комментарий к этому материалу и обязательно один из модераторов обязательно вам поможет. Обычно ответ можно получить уже в течении нескольких следующих дней. Так же не забудьте поделиться новостью в социальных сетях. =)
charset="utf-8">
data-yashareType="button" data-
yashareQuickServices="yaru,vkontakte,facebook,twitter,odnoklassniki,moimir,lj,gplus">
data-mrc-config="{'cm' : '1', 'sz' : '20', 'st' : '1', 'tp' : 'mm'}">Нравится
|
| |
| |
