Сообщений в теме: 2

[Виталий Анатольевич]

помогите, пожалуйста, со слайдером на CSS3

сам слайдер работает, но не могу понять, куда надо поставить <a> , чтобы с картинок слайдера переходить в разные разделы сайта.

HTML

{% IF index_page %}

<div class="slides">
<ul> <!-- Слайды -->
<li><img src="http://st.allregs.ru.../423/demo1.jpg" alt="Самые продвинутые регистраторы" />
<div>Самые продвинутые регистраторы</div></a>
</li>
<li><img src="http://st.allregs.ru.../424/demo2.jpg" alt="Самые надежные регистраторы" />
<div>Самые надежные регистраторы</div>
</li>
<li><img src="http://st.allregs.ru.../425/demo3.jpg" alt="Самые мощные регистраторы" />
<div>Самые мощные регистраторы</div>
</li>

<li><img src="http://st.allregs.ru...63/767/bax.jpg" alt="Подарок каждому клиенту" />
<div>... и в подарок - бахилы!</div>
</li>

</ul>
</div>

{% ENDIF %}

подключен css

/* Слайдер */
.slides {
height:300px;
margin:50px auto;
overflow:hidden;
position:relative;
width:600px;
}
.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;
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:#000000;
border-radius:10px 10px 10px 10px;
box-shadow:0 0 5px #FFFFFF inset;
color:#FFFFFF;
font-size:26px;
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;
}


Спасибо заранее.

[Castiel]

Виталий Анатольевич (30 Январь 2014 - 14:05) писал:

помогите, пожалуйста, со слайдером на CSS3

сам слайдер работает, но не могу понять, куда надо поставить <a> , чтобы с картинок слайдера переходить в разные разделы сайта.

Спасибо заранее.

Здравствуйте, редактируем шаблон HTML
Находим

	 <li><a src="http://allregs.ru/catalog/Blackvue"><img src="http://st.allregs.ru/2/936/423/demo1.jpg" alt="Самые продвинутые регистраторы" /></a>
		 <div>Самые продвинутые регистраторы</div></a>
	 </li>
	 <li><img src="http://st.allregs.ru/2/936/424/demo2.jpg" alt="Самые надежные регистраторы" />
		 <div>Самые надежные регистраторы</div>
	 </li>
	 <li><img src="http://st.allregs.ru/2/936/425/demo3.jpg" alt="Самые мощные регистраторы" />
		 <div>Самые мощные регистраторы</div>
	 </li>
	
	 <li><img src="http://st.allregs.ru/2/963/767/bax.jpg" alt="Подарок каждому клиенту" />
		 <div>... и в подарок - бахилы!</div>
	 </li>

Заменяем на

	 <li><a href="#"><img src="http://st.allregs.ru/2/936/423/demo1.jpg" alt="Самые продвинутые регистраторы" /></a>
		 <div>Самые продвинутые регистраторы</div></a>
	 </li>
	 <li><a href="#"><img src="http://st.allregs.ru/2/936/424/demo2.jpg" alt="Самые надежные регистраторы" /></a>
		 <div>Самые надежные регистраторы</div>
	 </li>
	 <li><a href="#"><img src="http://st.allregs.ru/2/936/425/demo3.jpg" alt="Самые мощные регистраторы" /></a>
		 <div>Самые мощные регистраторы</div>
	 </li>
	 <li><a href="#"><img src="http://st.allregs.ru/2/963/767/bax.jpg" alt="Подарок каждому клиенту" /></a>
		 <div>... и в подарок - бахилы!</div>
	 </li>

<a href="#"> вместо # указываем ссылку на страницу

[Виталий Анатольевич]

спасибо