Красивый и эффектный слайдер на CSS3

Эффектный слайдер работающий на CSS3 без использования JavaScript.
Слайдер работает в автоматическом режиме смены изображений, с функцией паузы при наведении мыши.
Помимо изображений в слайдер можно ставить что угодно, начиная с обычной текстовой информации, заканчивая IFrame.
Каждый блок можно подписать своим названием.

Простая разметка HTML.

Код: Выделить всё

<div id="slider-shadow"> 
	<div id="slider"> 
		<div id="mask"> 
			<ul> 
				<li>
					<a href="#"><img src="/images/1.png" /></a>
				</li> 
				<li>
					<a href="#"><img src="/images/2.png" /></a> 
					<span><h2>Изображение</h2></span> 
				</li> 
				<li> 
					<iframe src="http://cabinetadmina.ru" width="600" height="200" frameborder="0" scrolling="no"></iframe> 
					<span><h2>IFrame</h2></span> 
				</li> 
				<li> 
					<a href="#"><img src="/images/3.png" /></a> 
				</li> 
			</ul> 
		</div> 
		<div id="progress"></div> 
		<div id="overlay"></div> 
		<div id="pause"></div> 
	</div> 
</div>
Стили для нашего слайдера.

Код: Выделить всё

#slider { 
	width: 600px; 
	height: 200px; 
	margin: 40px auto 0; 
	overflow: visible; 
	background-color: #362c30; 
	border: 10px solid #362c30; 
	-moz-transition: all 150ms ease-in; 
	-webkit-transition: all 150ms ease-in; 
	-o-transition: all 150ms ease-in; 
	position: relative; 
	transform: rotate(0deg); 
	-ms-transform: rotate(0deg); 
	-moz-transform: rotate(0deg); 
	-webkit-transform: rotate(0deg); 
	-o-transform: rotate(0deg); 
} 
#mask { 
	overflow: hidden; 
} 
#slider:hover { 
	background-color: #cccccc; 
	border: 10px solid #cccccc; 
	-webkit-animation: rotatey 400ms ease-out; 
	-moz-animation: rotatey 400ms ease-out; 
} 
#slider:hover #pause { 
	opacity: 1; 
} 
#slider:hover #progress { 
	background-color: rgba(255,255,255,0.0); 
} 
#slider:hover ul, #slider:hover #progress, #slider:hover #overlay { 
	-moz-animation-play-state: paused; 
	-webkit-animation-play-state: paused; 
} 
#pause { 
	width: 600px; 
	height: 200px; 
	position: absolute; 
	top: 0; 
	opacity: 0; 
	background-image: url('/images/paused.png'); 
	background-position: 566px 10px; 
	background-repeat: no-repeat; 
	pointer-events: none; 
	-moz-transition: all 150ms ease-in; 
	-webkit-transition: all 150ms ease-in; 
	-o-transition: all 150ms ease-in; 
} 
#progress { 
	width: 1px; 
	height: 1px; 
	background-color: #ffd000; 
	-moz-animation: progress 18s infinite; 
	-webkit-animation: progress 18s infinite; 
	position: relative; 
	top: -1px; 
	-moz-transition: all 150ms ease-in; 
	-webkit-transition: all 150ms ease-in; 
	-o-transition: all 150ms ease-in; 
} 
#overlay { 
	width: 600px; 
	height: 200px; 
	position: absolute; 
	top: 0; 
	background-image: url('/images/overlay.png'); 
	background-position: center; 
	background-repeat: no-repeat; 
	pointer-events: none; 
	-moz-transition: all 150ms ease-in; 
	-webkit-transition: all 150ms ease-in; 
	-o-transition: all 150ms ease-in; 
	opacity: 0.5; 
	-moz-animation: overlay-fade 18s infinite; 
	-webkit-animation: overlay-fade 18s infinite; 
} 
#slider ul { 
	width: 2400px; 
	list-style: none; 
	padding: 0; 
	margin: 0; 
	-moz-animation: slide-animation 18s infinite; 
	-webkit-animation: slide-animation 18s infinite; 
	position: relative; 
	left: 0px; 
} 
#slider li { 
	display: inline; 
	width: 600px; 
	height: 200px; 
	margin: 0; 
	padding: 0; 
	float: left; 
	position: relative; 
	background-image: url('/images/loader.gif'); 
	background-position: 50% 50%; 
	background-repeat: no-repeat; 
} 
#slider li:last-of-type { 
	background-color: #362c30; 
} 
#slider li a { 
	display: block; 
	text-decoration: none; 
} 
#slider li span { 
	display: block; 
	width: 560px; 
	padding: 15px 20px; 
	position: absolute;  
	bottom: 0;  
	left: 0; 
	background-color: rgba(54,44,48,0.6); 
	border-top: 1px solid #362c30; 
	text-shadow: 1px 1px 1px #362c30; 
	pointer-events: none; 
	text-align: left; 
}
#slider ul li span h2 { 
	font-size: 24px; 
	line-height: 24px; 
	color: #fff; 
	font-weight: normal; 
	font-family: 'Communist-Regular'; 
	text-shadow: 1px 1px 1px #362c30; 
}
#slider-shadow { 
	width: 100%; 
	height: 260px; 
	background-image: url('/images/slider-shadow.png'); 
	background-position: center bottom; 
	background-repeat: no-repeat; 
	margin: 10px auto 0; 
}
@-webkit-keyframes slide-animation { 
0% {opacity:0;} 
2% {opacity:1;} 
20% {left:0px; opacity:1;} 
22.5% {opacity:0.6;} 
25% {left:-600px; opacity:1;} 
45% {left:-600px; opacity:1;} 
47.5% {opacity:0.6;} 
50% {left:-1200px; opacity:1;} 
70% {left:-1200px; opacity:1;} 
72.5% {opacity:0.6;} 
75% {left:-1800px; opacity:1;} 
95% {opacity:1;} 
98% {left:-1800px; opacity:0;} 
100% {left:0px; opacity:0;} 
} 
@-moz-keyframes slide-animation { 
0% {opacity:0;} 
2% {opacity:1;} 
20% {left:0px; opacity:1;} 
22.5% {opacity:0.6;} 
25% {left:-600px; opacity:1;} 
45% {left:-600px; opacity:1;} 
47.5% {opacity:0.6;} 
50% {left:-1200px; opacity:1;} 
70% {left:-1200px; opacity:1;} 
72.5% {opacity:0.6;} 
75% {left:-1800px; opacity:1;} 
95% {opacity:1;} 
98% {left:-1800px; opacity:0;} 
100% {left:0px; opacity:0;} 
} 
@-webkit-keyframes progress { 
0% {width:0px; opacity:0;} 
2% {width:0px; opacity:1;} 
20% {width:600px; opacity:1;} 
22.5% {width:600px; opacity:0;} 
22.59% {width:0px;} 
25% {width:0px; opacity:1;} 
45% {width:600px; opacity:1;} 
47.5% {width:600px; opacity:0;} 
47.59% {width:0px;} 
50% {width:0px; opacity:1;} 
70% {width:600px; opacity:1;} 
72.5% {width:600px; opacity:0;} 
72.59% {width:0px;} 
75% {width:0px; opacity:1;} 
95% {width:600px; opacity:1;} 
98% {width:600px; opacity:0;} 
100% {width:0px; opacity:0;} 
} 
@-moz-keyframes progress { 
0% {width:0px; opacity:0;} 
2% {width:0px; opacity:1;} 
20% {width:600px; opacity:1;} 
22.5% {width:600px; opacity:0;} 
22.59% {width:0px;} 
25% {width:0px; opacity:1;} 
45% {width:600px; opacity:1;} 
47.5% {width:600px; opacity:0;} 
47.59% {width:0px;} 
50% {width:0px; opacity:1;} 
70% {width:600px; opacity:1;} 
72.5% {width:600px; opacity:0;} 
72.59% {width:0px;} 
75% {width:0px; opacity:1;} 
95% {width:600px; opacity:1;} 
98% {width:600px; opacity:0;} 
100% {width:0px; opacity:0;} 
} 
@-webkit-keyframes rotatey { 
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
} 
@-moz-keyframes rotatey { 
0% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
25% {transform:rotate(1deg); -ms-transform:rotate(1deg); -moz-transform:rotate(1deg); -webkit-transform:rotate(1deg); -o-transform:rotate(1deg);} 
50% {transform:rotate(-1deg); -ms-transform:rotate(-1deg); -moz-transform:rotate(-1deg); -webkit-transform:rotate(-1deg); -o-transform:rotate(-1deg);} 
100% {transform:rotate(0deg); -ms-transform:rotate(0deg); -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg);} 
} 
@-webkit-keyframes overlay-fade { 
0% {opacity:0;} 
2% {opacity:0.5;} 
95% {opacity:0.5;} 
98% {opacity:0;} 
100% {opacity:0;} 
} 
@-moz-keyframes overlay-fade { 
0% {opacity:0;} 
2% {opacity:0.5;} 
95% {opacity:0.5;} 
98% {opacity:0;} 
100% {opacity:0;} 
}

Минус этого слайдера состоит только в том, что он не будет работать на старых браузерах, не поддерживающих CSS3. А может быть и не минус...

Комментарии: 29

romaamor 23 фев 2014, 19:08 Сообщение

Все равно что то не то. Вот так получается -
Изображение
  • 0

CabinetAdmin 23 фев 2014, 19:19 Сообщение

Да нет, у меня нормально отображается.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 23 фев 2014, 19:24 Сообщение

CabinetAdmin » 3 минуты назад писал(а):Да нет, у меня нормально отображается.
На разных браузерах по разному. На гугловском нормально. А на яндевском тот на хроме троится.
  • 0

CabinetAdmin 23 фев 2014, 19:31 Сообщение

:unknown
У меня нету этого браузера. Но все остальные показывают нормально, даже в IE8 всего один блок, не работает правда, но и не троится.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 23 фев 2014, 19:35 Сообщение

Но тогда почему в яндекс браузере в шапке нормально работает, а в подвале троится? Так же и в Netscape Navigator.
  • 0

CabinetAdmin 23 фев 2014, 19:54 Сообщение

Возможно из-за места установки, какие нибудь стили влияют...

Попробуй в #slider2-shadow { изменить width: 100%; на реальный размер блока, на 245px.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 23 фев 2014, 20:07 Сообщение

Нет. Вообще перекосило.
  • 0

CabinetAdmin 23 фев 2014, 20:15 Сообщение

Какой-то горе-браузер:)

зы. Почему width: 225px;, там же ещё бордюр в 10 пикселей на сторону, width: 245px; надо. Попробуй 245, да и высоту можно уменьшить до 155px.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 23 фев 2014, 20:22 Сообщение

CabinetAdmin » 1 минуту назад писал(а):зы. Почему width: 225px;, там же ещё бордюр в 10 пикселей на сторону, width: 245px; надо. Попробуй 245, да и высоту можно уменьшить до 155px.
Сменил то я. Вод как он смотрится в яндексе:
Изображение
  • 0

CabinetAdmin 24 фев 2014, 06:15 Сообщение

:(
Может воспользоваться другим слайдером? Который на jquery, и работать будет везде.
  • 0

romaamor 24 фев 2014, 08:55 Сообщение

CabinetAdmin писал(а)::(
Может воспользоваться другим слайдером? Который на jquery, и работать будет везде.
А есть что то на примете ? Такое что бы не сильно грузило форум ?
  • 0

CabinetAdmin 24 фев 2014, 12:52 Сообщение

Да хотя бы тот же, что стоит здесь на форуме - http://cabinetadmina.ru/viewtopic.php?f=122&t=3779
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

romaamor 24 фев 2014, 14:33 Сообщение

CabinetAdmin » Сегодня, 13:52 писал(а):Да хотя бы тот же, что стоит здесь на форуме - viewtopic.php?f=122&t=3779
Я видел тот. Нашол другой. Создал тему.
  • 0

Иринка 01 фев 2019, 11:20 Сообщение

CabinetAdmin писал(а): Помимо изображений в слайдер можно ставить что угодно, начиная с обычной текстовой информации, заканчивая IFrame.
А можно сделать слайды меняющего текста-ссылки?
  • 0

CabinetAdmin 01 фев 2019, 15:58 Сообщение

Можно, но наверно не в этом слайдере. По ссылке тремя сообщениями выше есть слайдер, который стоял здесь на форуме, в нём можно.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!