Наша Кнопка



Мини профиль
Онлайн лист
Онлайн всего: 5
Гостей: 5
Пользователей: 0
Пользователи
Гости сайта
Главная » Файлы » Всё для Ucoz » Скрипты для Ucoz [ Добавить материал ]

Красивый Слайдер Для ucoz на Css

Добавил: Гость » Дата: 15.12.2017
Категория:
Скрипты для Ucoz
Удобно-Красивый слайдер смотрится красиво на черных тонах так и на белых
Если поставите особо не пожалеете!
Если что то слайдер был сделан только под изображения не более того не вздумайте его всунуть под другое что-то !
Установка не большая,и так пререходим к ней
Установка:
Идем в Css и в самый низ вставляем вот это:
Код
.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>


Остался последний Шаг:
Вставляем Где хотим увидеть наш слайдер,ставить можно его в любое удобное для вас место вот код:
Код
<div class="slider images">  
  <div class="sliderContent">  
  <div class="item">  
  <img id="image" src="http://Путь_к_картинке/img/1.jpg">  
  </div>  
  <div class="item">  
  <img id="image" src="http://Путь_к_картинке/img/2.jpg">  
  </div>  
  <div class="item">  
  <img id="image" src="http://Путь_к_картинке/img/3.jpg">  
  </div>  
  <div class="item">  
  <img id="image" src="http://Путь_к_картинке/img/4.jpg">  
  </div>  
  <div class="item">  
  <img id="image" src="http://Путь_к_картинке/img/5.jpg">  
  </div>  
  <div class="item">  
  <img id="image" src="http://Путь_к_картинке/img/6.jpg">  
  </div>  
  </div>  
</div>


Все скрипт Установлен )
www.Testcs.Ru

Чтобы скачивать файлы вам нужна или Это займёт не больше 2х минут...

· ·
Метки: CSS, ucoz, красивый, на, скрипты для ucoz, для, слайдер
Просмотров: 883 | Загрузок: 0 | Комментариев: 0


Не забудь поделится с Друзьями

Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]