слайдер контента с обалденными эффектами
827материалов
228тем на форуме
3004комментария
6159пользователей

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


Описание:

Один хороший человек посоветовал мне посмотреть этот слайдер и я в него влюбился с первого взгляда, после чего не мог не оформить его здесь на 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
Материал просмотрен: 1548 раз
Категория материала: Скрипты для 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
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта