регистрация
856материалов
3264комментария
230тем на форуме
6750пользователей

слайдер контента с обалденными эффектами


Описание:

Один хороший человек посоветовал мне посмотреть этот слайдер и я в него влюбился с первого взгляда, после чего не мог не оформить его здесь на apo-ucoz

Установка:

Для правильной работы слайдера нам нужна библиотека jQuery 1.7.2 или выше

После /head на нужных страницах вставляйте:
Код
<script type="text/javascript" src="/js/jmpress.min.js"></script>     
<script type="text/javascript" src="/js/jquery.jmslideshow.js"></script>     
<script>     
$(document).ready(function() {     
$('#jms-slideshow').jmslideshow();     
});     
</script>

В самый низ вашего css вставляйте:
Код
.jms-slideshow {     
position: relative;     
width: 80%;     
max-width: 1400px;     
min-width: 640px;     
margin: 20px auto;     
height: 460px;     
}     
.jms-wrapper {     
width: auto;     
min-width: 600px;     
height: 440px;     
background-color: #fff;     
box-shadow: 0 2px 6px rgba(0, 0, 0, .2);     
-webkit-background-clip: padding;     
-moz-background-clip: padding;     
background-clip: padding-box;     
border: 10px solid #fff;     
border: 10px solid rgba(255, 255, 255, 0.9);     
outline: none;     
-webkit-transition: background-color 1s linear;     
-moz-transition: background-color 1s linear;     
-o-transition: background-color 1s linear;     
-ms-transition: background-color 1s linear;     
transition: background-color 1s linear;     
}     
.color-1 {     
background-color: #E3D8FF;     
background-color: rgba(227, 216, 268, 1);     
}     
.color-2 {     
background-color: #EBBBBC;     
background-color: rgba(235, 187, 188, 1);     
}     
.color-3 {     
background-color: #EED9C0;     
background-color: rgba(238, 217, 192, 1);     
}     
.color-4 {     
background-color: #DFEBB1;     
background-color: rgba(223, 235, 177, 1);     
}     
.color-5 {     
background-color: #C1E6E5;     
background-color: rgba(193, 230, 229, 1);     
}     
.step {     
width: 900px;     
height: 420px;     
display: block;     
-webkit-transition: opacity 1s;     
-moz-transition: opacity 1s;     
-ms-transition: opacity 1s;     
-o-transition: opacity 1s;     
transition: opacity 1s;     
}     
.step:not(.active) {     
opacity: 0;     
filter: alpha(opacity=0);     
/* internet explorer */     
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)";     
/*IE8*/     
}     
.jms-content {     
margin: 0px 370px 0px 20px;     
position: relative;     
clear: both;     
}     
.step h3 {     
color: #fff;     
font-size: 52px;     
font-weight: bold;     
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);     
margin: 0;     
padding: 60px 0 10px 0;     
}     
.step p {     
color: #fff;     
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);     
font-size: 34px;     
font-weight: normal;     
position: relative;     
margin: 0;     
}     
a.jms-link {     
color: #fff;     
text-transform: uppercase;     
background: #969696;     
/* Old browsers */     
background: -moz-linear-gradient(top, #969696 0%, #727272 100%);     
/* FF3.6+ */     
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #969696), color-stop(100%, #727272));     
/* Chrome,Safari4+ */     
background: -webkit-linear-gradient(top, #969696 0%, #727272 100%);     
/* Chrome10+,Safari5.1+ */     
background: -o-linear-gradient(top, #969696 0%, #727272 100%);     
/* Opera 11.10+ */     
background: -ms-linear-gradient(top, #969696 0%, #727272 100%);     
/* IE10+ */     
background: linear-gradient(top, #969696 0%, #727272 100%);     
/* W3C */     
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#969696', endColorstr='#727272', GradientType=0);     
/* IE6-9 */     
padding: 8px 15px;     
display: inline-block;     
font-size: 16px;     
font-weight: bold;     
color: #fff;     
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);     
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);     
border: 1px solid #444;     
border-radius: 4px;     
opacity: 1;     
margin-top: 40px;     
clear: both;     
-webkit-transition: all 0.4s ease-in-out 1s;     
-moz-transition: all 0.4s ease-in-out 1s;     
-ms-transition: all 0.4s ease-in-out 1s;     
-o-transition: all 0.4s ease-in-out 1s;     
transition: all 0.4s ease-in-out 1s;     
}     
.step:not(.active) a.jms-link {     
opacity: 0;     
margin-top: 80px;     
}     
.step img {     
position: absolute;     
right: 0px;     
top: 30px;     
}     
.jms-dots {     
width: 100%;     
position: absolute;     
text-align: center;     
left: 0px;     
bottom: 20px;     
z-index: 2000;     
-webkit-user-select: none;     
-moz-user-select: none;     
-ms-user-select: none;     
-o-user-select: none;     
user-select: none;     
}     
.jms-dots span {     
display: inline-block;     
position: relative;     
width: 12px;     
height: 12px;     
border-radius: 50%;     
background: #777;     
margin: 3px;     
cursor: pointer;     
box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1) inset, 1px 1px 1px rgba(255, 255, 255, 0.3);     
}     
.jms-dots span.jms-dots-current:after {     
content:'';     
width: 8px;     
height: 8px;     
position: absolute;     
top: 2px;     
left: 2px;     
border-radius: 50%;     
background: #ffffff;     
/* Old browsers */     
background: -moz-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);     
/* FF3.6+ */     
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(47%, #f6f6f6), color-stop(100%, #ededed));     
/* Chrome,Safari4+ */     
background: -webkit-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);     
/* Chrome10+,Safari5.1+ */     
background: -o-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);     
/* Opera 11.10+ */     
background: -ms-linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);     
/* IE10+ */     
background: linear-gradient(top, #ffffff 0%, #f6f6f6 47%, #ededed 100%);     
/* W3C */     
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);     
/* IE6-9 */     
}     
.jms-arrows {     
-webkit-user-select: none;     
-moz-user-select: none;     
-ms-user-select: none;     
-o-user-select: none;     
user-select: none;     
}     
.jms-arrows span {     
position: absolute;     
top: 50%;     
margin-top: -40px;     
height: 80px;     
width: 30px;     
cursor: pointer;     
z-index: 2000;     
box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);     
border-radius: 3px;     
}     
.jms-arrows span.jms-arrows-prev {     
background: #fff url(/images/arrow_left.png) no-repeat 50% 50%;     
left: -10px;     
}     
.jms-arrows span.jms-arrows-next {     
background: #fff url(/images/arrow_right.png) no-repeat 50% 50%;     
right: -10px;     
}     
/* Not supported style */     
.jms-wrapper.not-supported {     
background-color: #E3D8FF;     
background-color: rgba(227, 216, 268, 1);     
}     
.jms-wrapper.not-supported:after {     
content:'The slideshow functionality is not supported on your device.';     
padding: 0px 0px 30px 0px;     
text-align: center;     
display: block;     
}     
.jms-wrapper.not-supported .step {     
display: none;     
position: relative;     
opacity: 1;     
filter: alpha(opacity=99);     
/* internet explorer */     
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=99)";     
/*IE8*/     
margin: 20px auto;     
}     
.jms-wrapper.not-supported .step:first-of-type {     
display: block;     
}     
.jms-wrapper.not-supported .step:not(.active) a.jms-link {     
opacity: 1;     
margin-top: 40px;     
}

В то место, где будет сам слайдер, вставляйте:
Код
<section id="jms-slideshow" class="jms-slideshow">     
<div class="step" data-color="color-1">     
<div class="jms-content">     
<h3>Заголовок</h3>     
<p>Любой текст</p>     
<a class="jms-link" href="#">Заголовок ссылки</a>     
</div>     
<img src="Ссылка на картинку" />     
</div>     

<div class="step" data-color="color-2" data-y="500" data-scale="0.4" data-rotate-x="30">     
<div class="jms-content">     
<h3>Заголовок</h3>     
<p>Любой текст</p>     
<a class="jms-link" href="#">Заголовок ссылки</a>     
</div>     
<img src="Ссылка на картинку" />     
</div>     

<div class="step" data-color="color-3" data-x="2000" data-z="3000" data-rotate="170">     
<div class="jms-content">     
<h3>Заголовок</h3>     
<p>Любой текст</p>     
<a class="jms-link" href="#">Заголовок ссылки</a>     
</div>     
<img src="Ссылка на картинку" />     
</div>     

<div class="step" data-color="color-4" data-x="3000">     
<div class="jms-content">     
<h3>Заголовок</h3>     
<p>Любой текст</p>     
<a class="jms-link" href="#">Заголовок ссылки</a>     
</div>     
<img src="Ссылка на картинку" />     
</div>     

<div class="step" data-color="color-5" data-x="4500" data-z="1000" data-rotate-y="45">     
<div class="jms-content">     
<h3>Заголовок</h3>     
<p>Любой текст</p>     
<a class="jms-link" href="#">Заголовок ссылки</a>     
</div>     
<img src="Ссылка на картинку" />     
</div>     
</section>
Скрипты из прикреплённого архива залейте в папку js, картинки в папку images


Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 20.07.2013 в 01:45
Материал просмотрен: 1961 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 12 комментариев

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

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


qweqwe
qwenti @qweqwe 18.04.2015 22:491
+1
кто может помочь с установкой?
Romchik
Роман @Romchik 19.04.2015 00:062
0
Чем Вам помочь? В инструкции и так все подробно расписано)
qweqwe
Иван @qweqwe 19.04.2015 07:043
+1
Инструкция да, простейшая, а не действует.. В Css  добавил, файлы залил по указанным путям, а скрипты куда только не вставлял - не отображается слайдер!
qweqwe
Иван @qweqwe 19.04.2015 19:254
+1
да действительно работает, только код для css пришлось вставить в нижнюю часть сайта между тегами style. Подскажи пожалуйста какого разрешения должно быть изображение чтобы было по размеру экрана?
Romchik
Роман @Romchik 19.04.2015 20:585
0
Для слайдера?
qweqwe
Иван @qweqwe 19.04.2015 21:426
+1
да. и ненашел еще куда вставлять ссылку на кнопку ссылки, есть только поле где можно назвать эту кнопку ссылки а не дать саму ссылку на желаемую страницу.. Подскажи пожалуйста
ufnsrm
Помогите пожалуйста!!!
Слайдер установлен. Работает - картинки показывает и они сменяются.
Все ссылки изменил на свои.
Но Заголовок, текст и кнопка ссылки не отображаются.
Ромчик
Ссылку на сайт пожалуйста
ufnsrm
Это тестовая страница для слайдера
http://profidi.ru/index/karta_sajta/0-59
1 2 »
avatar
-50% на шаблоны от TemplateMonster
Создать сайт вместе с uKit.com
Статистики нашего сайта
Правила чата
Пользователи онлайн
Закрыть мини-чат
+Открыть мини-чат
0
Онлайн всего: 2
Гостей: 2
Пользователей: 0