Question

Здравствуйте!

Установил слайдер на 5 слайдов. Но пятый слайд не появляется ни в каком браузере. Не могу понять, чего не хватает? И как сделать, если, например, 7 слайдов необходимо вставить?

Шаблон сайта # 1080

 

код

<?if($PAGE_ID$ == 'sitePage1')?>
<div id="header">
<div class="slides"> 
<ul>
<li><img src="/slider/1.jpg" alt="image01"><div>Професор Сергій Михайлович Куделко. Екскурсія на Донецькому городищі</div></li> 
<li><img src="/slider/2.jpg" alt="image02"><div>Володимир Васильович Колода. Виступ в Археологічному музеї ХНУ</div></li> 
<li><img src="/slider/3.jpg" alt="image03"><div>Отець Олександр (Бєлозор). Різдвяне богослужіння</div></li> 
<li><img src="/slider/4.jpg" alt="image04"><div>Володимир Васильович Колода. Розкопки на Мохначанському городищі</div></li>
<li><img src="/slider/5.jpg" alt="image05"><div>Міжнародна краєзнавча конференція</div></li>
</ul> 
</div>
<div class="content-padding">
</div>
</div>
<?endif?>

Стили:

/* Слайдер */ 
 .slides { 
 height:336px; 
 overflow:visible;
 margin:-12px 1px 1px -20px;
 position:relative; 
 width:681px; 
 } 
 .slides ul { 
 list-style:none; 
 position:relative; 
 } 

 /* Кадры анимации #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;
 overflow:hidden;
 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-color:#515151; 
 border-radius:10px 10px 10px 10px; 
 box-shadow:0 0 5px #FFF inset; 
 color:#FFF; 
 font-size:16px; 
 left:10%; 
 margin:0 auto; 
 padding:20px; 
 position:absolute; 
 top:50%; 
 width:200px; 

 /* Анимация 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; 
 }

 

Answer 1

Все корректно работает, 5 слайд отображается http://joxi.ru/L216LK8C8Kv7GA

Comments

Прошу прощения, первый не показывается: https://zmiev-societas.at.ua/slider/1.jpg  Вообще их пять, но ротируются только четыре.

---

Юрата Коловрат,

Замените стили слайдера на следующие:

 

стили

.slides {
 height:336px;
 overflow:visible;
 margin:-12px 1px 1px -20px;
 position:relative;
 width:681px;
 } 
 .slides ul { 
 list-style:none; 
 position:relative; 
 } 

 @-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;
 overflow:hidden;
 top:0;  
 -webkit-animation-name: anim_slides; 
 -webkit-animation-duration: 30.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: 30.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; 
 } 
  .slides ul li:nth-child(1), .slides ul li:nth-child(1) div { 
 -webkit-animation-delay: 6.0s; 
 -moz-animation-delay: 6.0s; 
 }
 .slides ul li:nth-child(2), .slides ul li:nth-child(2) div { 
 -webkit-animation-delay: 12.0s; 
 -moz-animation-delay: 12.0s; 
 } 
 .slides ul li:nth-child(3), .slides ul li:nth-child(3) div { 
 -webkit-animation-delay: 18.0s; 
 -moz-animation-delay: 18.0s; 
 } 
 .slides ul li:nth-child(4), .slides ul li:nth-child(4) div { 
 -webkit-animation-delay: 24.0s; 
 -moz-animation-delay: 24.0s; 
 } 
  .slides ul li:nth-child(5), .slides ul li:nth-child(5) div { 
 -webkit-animation-delay: 30.0s; 
 -moz-animation-delay: 30.0s; 
 }
 .slides ul li img {
 display:block;
 } 

 @-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-color:#515151; 
 border-radius:10px 10px 10px 10px; 
 box-shadow:0 0 5px #FFF inset; 
 color:#FFF; 
 font-size:16px; 
 left:10%; 
 margin:0 auto; 
 padding:20px; 
 position:absolute; 
 top:50%; 
 width:200px; 
 -webkit-animation-name: anim_titles; 
 -webkit-animation-duration: 30.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: 30.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; 
 }

после все слайды заработают.

1. Выделил красным, если будете добавлять новые слайды, значение 30 нужно увеличивать с каждым новым слайдом на 6. То есть было 5 слайдов стало 6 значит нужно заменить значение 30 на 36.
2. Далее, выделили синим, данную часть кода нужно добавлять для каждого нового слайда и так же увеличивать значение 30 на 6. У 5-го слайда стоит значение 30, значит у 6-го будет 36 и так по возврастанию для всех новых. Надеюсь все понятно.
3. Выделил зеленым, данное значение увеличивать для каждого нового слайда на + 1 . То есть у 5-го слайда там стоит 5, будет 6-й слайд, значит нужно ставить 6.

В результате все будет работать корректно.