Мини-слайдер для uCoz
827материалов
228тем на форуме
3003комментария
6151пользователь

Мини-слайдер для uCoz


Доброго времени суток всем, кто на данный момент просматривает этот красивый мини-слайдер. Ну что же, не буду распинаться, сразу преступим к установке. 

Этот код вставьте там, где хотите увидеть слайдер: 
Код
<!-- Первый слайд -->   
<div class="wrapper" id="sldOne">  
   <div id="loader"></div>  
   <div id="content">  
   <h1>Первый слайд</h1>  
   <p>Если вы это видите, значит это - первый слайд мини-слайдера!</p>  
   </div>  
   <a href="#" class="next"><span class="entypo-right-thin"></span></a>  
</div>  
<!-- Второй слайд -->  
<div class="wrapper" id="sldTwo">  
   <div id="loader"></div>  
   <div id="content">  
   <h1>Второй слайд=)</h1>  
   <p>О боже, оно еще и работает, неужели это - второй слайд о_О</p>  
   </div>  
   <a href="#" class="next"><span class="entypo-right-thin"></span></a>  
</div>  
<!-- Третий слайд -->  
<div class="wrapper" id="sldThree">  
   <div id="loader"></div>  
   <div id="content">  
   <h1>Третий слайд</h1>  
   <p>Капитан очевидность говорит, что ты на третьем слайде. Надеемся, что вы будете использовать его с <a href="http://ru.wikipedia.org/wiki/%D0%A3%D0%BC">умом</a></p>  
   </div>  
   <a href="#" class="next"><span class="entypo-right-thin"></span></a>  
</div>  
<script src="http://webo4ka.ru/Ucoz7/mini-slider.js"></script>

Это вставьте в самый конец ваших стилей (CSS): 
Код
@import url(http://fonts.googleapis.com/css?family=Alegreya);  
@import url(http://weloveiconfonts.com/api/?family=entypo);  
[class*="entypo-"]:before { font-family: 'entypo', sans-serif }  
.wrapper {  
   width: 240px;  
   height: 180px;  
   background: ;  
   margin: 100px auto;  
   /*box-shadow*/  
   -webkit-box-shadow: 0px 0 0px rgba(0,0,0,.2), 0 0 45px rgba(0,0,0,.05);  
   -moz-box-shadow: 0px 0 0px rgba(0,0,0,.2), 0 0 45px rgba(0,0,0,.05);  
   box-shadow: 0px 0 0px rgba(0,0,0,.2), 0 0 45px rgba(0,0,0,.05);  
}  
#loader {  
   width: 0px;  
   height: 180px;  
   background: #44b5ff;  
   /*transition*/  
   -webkit-transition: width 1s ease-in;  
   -moz-transition: width 1s ease-in;  
   -o-transition: width 1s ease-in;  
   transition: width 1s ease-in;  
}  
#content {  
   width: 240px;  
   height: 180px;  
   background: #fff;  
   margin-top: -178px;  
   border-bottom: 1px solid rgba(0,0,0,.1);  
}  
#content p,  
#content h1 {  
   padding: 0;  
   margin: 0;  
   -webkit-font-smoothing: antialiased;  
   color: #999;  
   padding: 10px;  
   font-family: 'Alegreya', serif;  
}  
#content p { line-height: 1.5 }  
#content p { margin: 0 }  
#content h1 {  
   font-size: 1.6em;  
   background: #4dd2b1;  
   color: #fff;  
   border-bottom: 2px solid #00b380;  
   text-shadow: 0 1px 0 #00b380;  
}  
.wrapper .next {  
   display: block;  
   float: left;  
   width: 40px;  
   height: 35px;  
   margin: -41px 195px;  
   /*border-radius*/  
   -webkit-border-radius: 3px;  
   -moz-border-radius: 3px;  
   border-radius: 3px;  
   border-bottom: 2px solid #00b380;  
   position: relattive;  
   background: #4dd2b1;  
   text-decoration: none;  
   color: #fff;  
   text-align: center;  
   line-height: 2.3;  
   cursor: pointer;  
}  
.wrapper a:active {  
   margin-top: -39px;  
   border-bottom: 0;  
}  
#content ul {  
   list-style: none;  
   padding: 0;  
   margin: 10px 0;  
}  
#content p a {  
   color: #4dd2b1;  
   margin: 5px 10px;  
}  
#sldOne,  
#sldTwo,  
#sldThree { display: none }
 
Готово. Установка закончена.

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 17.07.2013 в 18:51
Материал просмотрен: 1377 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта