Страница 1 из 11
Форум » Разное » Общение » Почему при движении слайдера, появляется задержка
Почему при движении слайдера, появляется задержка
Snaik Offline
Проверенный
1
Дата: Четверг, 20.02.2014, 13:38 | Сообщение # 1
Друзья, подскажите пожалуйста, в чем может быть дело: поставил слайдер из трех картинок, все работает, но когда эти три слайдера заканчиваются остается один фон (то есть, идет сильная задержка) и потом все заново слайдеры начинают передвигаться. Как избавиться от такой задержки: Вот сам код

Код
<!-- Слайды -->
<div class="slides">
  <ul>  
  <li><img src="http://rumrum.ru/rumrum/web/advokat-imanov/img/slide_1.jpg" alt="image02" />
  <div>В зависимости от характера и степени общественной опасности деяния, предусмотренные настоящим Кодексом, подразделяются на преступления небольшой тяжести, преступления средней тяжести, тяжкие преступления и особо тяжкие преступления</div>
  </li>
  <li><img src="http://rumrum.ru/rumrum/web/advokat-imanov/img/slide_2.jpg" alt="image03" />
  <div>Возраст, с которого наступает уголовная ответственность
1. Уголовной ответственности подлежит лицо, достигшее ко времени совершения преступле-ния шестнадцатилетнего возраста
</div>
  </li>
  <li><img src="http://rumrum.ru/rumrum/web/advokat-imanov/img/slide_4.jpg" alt="image04" />
  <div>Преступление признается оконченным, если в совершенном лицом деянии содержатся все признаки состава преступления, предусмотренного настоящим Кодексом.</div>
  </li>
  </ul>
</div>
<!-- Слайды end-->


а вот css

Код
/* ---( СЛАЙДЕР )--- */
.slides {
  height:530px;
  margin:-12px 0 0;
  overflow:hidden;
  position:relative;
  width:1004px;
  border-bottom: 3px solid #CC5C36;
}
.slides ul {
  list-style:none;
  position:relative;
  margin: 12px 0 0 -40px;
}

/* Кадры анимации #anim_slides */
@-webkit-keyframes anim_slides {
  0% {
  opacity:0;
  }
  6% {
  opacity:1;
  }
  24% {
  opacity:1;
  }
  30% {
  opacity:0;
  }
  100% {
  opacity:0;
  }
}
@-moz-keyframes anim_slides {
  0% {
  opacity:0;
  }
  6% {
  opacity:1;
  }
  24% {
  opacity:1;
  }
  30% {
  opacity:0;
  }
  100% {
  opacity:0;
  }
}

.slides ul li {
  opacity:0;
  position:absolute;
  top:0;

  /* анимация css3 */
  -webkit-animation-name: anim_slides;
  -webkit-animation-duration: 24.0s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0;
  -webkit-animation-play-state: running;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: anim_slides;
  -moz-animation-duration: 24.0s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: normal;
  -moz-animation-delay: 0;
  -moz-animation-play-state: running;
  -moz-animation-fill-mode: forwards;
}

/* Задержки css3 */
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {
  -webkit-animation-delay: 6.0s;
  -moz-animation-delay: 6.0s;
}
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {
  -webkit-animation-delay: 12.0s;
  -moz-animation-delay: 12.0s;
}
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {
  -webkit-animation-delay: 18.0s;
  -moz-animation-delay: 18.0s;
}
.slides ul li img {
  display:block;
}

/* Кадры анимации #anim_titles */
@-webkit-keyframes anim_titles {
  0% {
  left:100%;
  opacity:0;
  }
  5% {
  left:10%;
  opacity:1;
  }
  20% {
  left:10%;
  opacity:1;
  }
  25% {
  left:100%;
  opacity:0;
  }
  100% {
  left:100%;
  opacity:0;
  }
}
@-moz-keyframes anim_titles {
  0% {
  left:100%;
  opacity:0;
  }
  5% {
  left:10%;
  opacity:1;
  }
  20% {
  left:10%;
  opacity:1;
  }
  25% {
  left:100%;
  opacity:0;
  }
  100% {
  left:100%;
  opacity:0;
  }
}

.slides ul li div {
  background:#341607;
  border-radius:25px 0 0 25px;
  box-shadow:0 0 5px #a84c2b inset;
  color:#FFFFFF;
  left:10%;
  margin:0 auto;
  padding:20px;
  position:absolute;
  top:80%;
  width:868px;

  /* Анимация css3 */
  -webkit-animation-name: anim_titles;
  -webkit-animation-duration: 24.0s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0;
  -webkit-animation-play-state: running;
  -webkit-animation-fill-mode: forwards;

  -moz-animation-name: anim_titles;
  -moz-animation-duration: 24.0s;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-animation-direction: normal;
  -moz-animation-delay: 0;
  -moz-animation-play-state: running;
  -moz-animation-fill-mode: forwards;
}
/* -------------------- */


Дом Каминов и теплого интерьера, уникальные предметы интерьера на сайте kamin-hous.ru

Сообщение отредактировал Snaik - Четверг, 20.02.2014, 13:42
Профиль
Ilia Offline
Проверенный
45
Дата: Четверг, 20.02.2014, 18:00 | Сообщение # 2
Вижу в вас в коде вот такое:
Код
/* Задержки css3 */  
.slides ul li:nth-child(2), .slides ul li:nth-child(2) div {  
   -webkit-animation-delay: 6.0s;  
   -moz-animation-delay: 6.0s;  
}  
.slides ul li:nth-child(3), .slides ul li:nth-child(3) div {  
   -webkit-animation-delay: 12.0s;  
   -moz-animation-delay: 12.0s;  
}  
.slides ul li:nth-child(4), .slides ul li:nth-child(4) div {  
   -webkit-animation-delay: 18.0s;  
   -moz-animation-delay: 18.0s;  
}  
.slides ul li img {  
   display:block;  
}  

Поменяйте значения (6.0s, 12,0s, 18.0s)
Код
-webkit-animation-delay:

и
Код
-moz-animation-delay:

На меньшие (1.0s , 2.0s, 3,0s например).
В общем поиграйтесь с этими значениями, должно помочь.
Удачи.


Профессиональный дизайн сайтов, логотипов, ui/ux.
Только до конца месяца скидка 25% на все услуги!
Профиль
Snaik Offline
Проверенный
1
Дата: Пятница, 21.02.2014, 17:28 | Сообщение # 3
Ничего не получилось: Попытался доработать код самого слайдера, не вышло.

Дом Каминов и теплого интерьера, уникальные предметы интерьера на сайте kamin-hous.ru
Профиль
fil_ru Offline
Проверенный
56
Дата: Пятница, 21.02.2014, 21:24 | Сообщение # 4
Даш ссылку где этот слайдер стоит, может помогу.
Профиль
kadeiver Offline
Заблокирован
0
Дата: Понедельник, 30.03.2015, 15:46 | Сообщение # 5
Специально для Вас:
Несколько методов заработка
Мгновенные выплаты в нескольких платёжных системах
Отсутствие порнографии
Уникальный функциональный интерфейс
Интересная работа в надёжном проекте

http://kadeiver.wix.com/rabotaseo
Профиль
Форум » Разное » Общение » Почему при движении слайдера, появляется задержка
Страница 1 из 11
Поиск: