Форум Сайтостроение Веб-строительство

Слайдер с паралаксом, автозапуск

L
На сайте с 18.02.2012
Offline
83
l17l
620

Здравствуйте, поставил и настройил слайдер для сайта.

http://tympanus.net/Tutorials/CSS3FluidParallaxSlideshow/

Работает по стрелке, как сделать что бы он автозапускался, и через кол-во времени сам перелистывался.

---------- Добавлено 13.03.2015 в 19:49 ----------

Так же появился вопрос по картинке которая плывет !

Как сделать ее по верх, хочу что бы по верх фона тот что паралакс она выходила.

css


.sp-slideshow {
position: relative;
margin: 0px auto;
width: 80%;
width: 1100px;
height: 325px;
}

.sp-content {
background: url(../images/grid.png) repeat scroll 0 0;
position: relative;
width: 100%;
height: 163px;
overflow: hidden;
}

.sp-slider {
position: relative;
left: 0;
width: 500%;
height: 100%;
list-style: none;
margin: 0;
padding: 0;
-webkit-transition: left ease-in 0.8s;
-moz-transition: left ease-in 0.8s;
-o-transition: left ease-in 0.8s;
-ms-transition: left ease-in 0.8s;
transition: left ease-in 0.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: 0 0px;
float: left;
text-align: center;
opacity: 0.4;
-webkit-transition: opacity ease-in 0.4s 0.8s;
-moz-transition: opacity ease-in 0.4s 0.8s;
-o-transition: opacity ease-in 0.4s 0.8s;
-ms-transition: opacity ease-in 0.4s 0.8s;
transition: opacity ease-in 0.4s 0.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;
margin: -120px auto;
height: 325px;
width: 524px;
}

.sp-parallax-bg {
background: url(../images/map.png) repeat-x scroll 0 0;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

щас вот так:

надо так: - что бы машина была по верх.

если сделать так:


.sp-content {
background: url(../images/grid.png) repeat scroll 0 0;
position: relative;
width: 100%;
height: 163px;
}

убрать в css строку overflow: hidden;

то все ок, вглядит как надо, но появился скрол и все машины видно за границы.

как нормально сделать?

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий