Простенький слайдер для материала страниц

Слайдер работет без скриптов .js в работе слайдера принимают участие только свойства CSS3. Слайдер довольно прост в настройке, в местах регулировок установлены комментарии для упрощения настроек. Количество изображений, ширина слайдера и высота могут быть любой. Дополнительно я его делал так что размеры применяемых изображений не имеют значения, то есть не нужно делать отдельно маленькие и большие. Сейчас в нём установлены изображения 1920Х1080, а применяемые свойства сами упаковывают изображения под нужный размер. Думаю опытный сразу заметит что дело здесь не в самом слайдере а в способе показать работу псевдокласса

:target.

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

<style> /* -- Общий блок -- */ #blockvsegoslaidera { /* -- Делаем посередине -- */ margin:0 auto; padding:0; } /* -- Большой блок -- */ #blockpokaza { /* -- Отступ блока -- */ margin: 0 5px; /* -- Ширина блока -- */ width:500px; /* -- Высота блока -- */ height:500px; /* -- Упаковка изображения в блок -- */ background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; /* -- Тени блока -- */ -o-background-size:100% 100%; -o-box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1); box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1); /* -- Тени блока плавно проявляются -- */ -webkit-transition:box-shadow 0.3s ease-in-out; -moz-transition:box-shadow 0.3s ease-in-out; -o-transition:box-shadow 0.3s ease-in-out; transition:box-shadow 0.3s ease-in-out; /* -- Закругляем края блока -- */ border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; } /* -- Большой блок при наведении мышки -- */ #blockpokaza:hover { /* -- Тени блока при наведении мышки -- */ -o-box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1); box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1); } /* -- Маленькие блоки -- */ .blockupravlenia { /* -- Высота поля блоков -- */ height:150px; /* -- Отступ с низу -- */ margin-bottom:10px; } /* -- Маленькие блоки активны -- */ .blockupravlenia a { /* -- Плавающее положение -- */ float:left; /* -- Отступы чтобы не слипались -- */ margin: 0 5px; /* -- Вид курсора при наведении на блоки -- */ cursor: pointer; /* -- Высота маленьких блоков -- */ height: 150px; /* -- Ширина маленьких блоков -- */ width: 160px; /* -- Тени маленьких блоков -- */ -o-box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1); box-shadow:0px 0px 7px rgba(0,0,0,0.2), 0px 0px 0px 1px rgba(188,188,188,0.1); /* -- Плавность проявления теней -- */ -webkit-transition:box-shadow 0.3s ease-in-out; -moz-transition:box-shadow 0.3s ease-in-out; -o-transition:box-shadow 0.3s ease-in-out; transition:box-shadow 0.3s ease-in-out; /* -- Округляем края -- */ border-radius: 8px; -webkit-border-radius: 8px; -o-border-radius: 8px; -ms-border-radius: 8px; } /* -- Маленькие блоки при наведении -- */ .blockupravlenia a:hover { /* -- Тени маленьких блоков -- */ -o-box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1); box-shadow:0px 0px 9px rgba(0,0,0,0.4), 0px 0px 0px 1px rgba(188,188,188,0.1); } /* -- Маленький блок с картинкой1 -- */ .blockupravlenia .Auto1 { /* -- Ссылка на картинку -- */ background: url('http://delaisait.ucoz.ru/script/img/1/Auto1.jpg'); /* -- Упаковка картинок в размер -- */ background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; -o-background-size:100% 100%; } /* -- Маленький блок с картинкой2 -- */ .blockupravlenia .Auto2 { /* -- Ссылка на картинку -- */ background: url('http://delaisait.ucoz.ru/script/img/1/Auto2.jpg'); /* -- Упаковка картинок в размер -- */ background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; -o-background-size:100% 100%; } /* -- Маленький блок с картинкой3 -- */ .blockupravlenia .Auto3 { /* -- Ссылка на картинку -- */ background: url('http://delaisait.ucoz.ru/script/img/1/Auto3.jpg'); /* -- Упаковка картинок в размер -- */ background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; -o-background-size:100% 100%; } /* -- Маленький блок с картинкой1 при смене -- */ #Auto1:target ~ #blockizmenenia #blockpokaza { /* -- Ссылка на картинку -- */ background: url('http://delaisait.ucoz.ru/script/img/1/Auto1.jpg'); /* -- Упаковка картинок в размер -- */ background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; -o-background-size:100% 100%; } /* -- Маленький блок с картинкой2 при смене -- */ #Auto2:target ~ #blockizmenenia #blockpokaza { /* -- Ссылка на картинку -- */ background: url('http://delaisait.ucoz.ru/script/img/1/Auto2.jpg'); /* -- Упаковка картинок в размер -- */ background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; -o-background-size:100% 100%; } /* -- Маленький блок с картинкой3 при смене -- */ #Auto3:target ~ #blockizmenenia #blockpokaza { /* -- Ссылка на картинку -- */ background: url('http://delaisait.ucoz.ru/script/img/1/Auto3.jpg'); /* -- Упаковка картинок в размер -- */ background-size:100% 100%; -moz-background-size:100% 100%; -webkit-background-size:100% 100%; -o-background-size:100% 100%; } </style> <! -- Общий блок -- > <table border="0" id="blockvsegoslaidera"> <tr> <td> <! -- Привязка к смене -- > <span id="Auto1"></span> <span id="Auto2"></span> <span id="Auto3"></span> <! -- Блок управления сменой -- > <div class="blockupravlenia"> <a href="#Auto1" class="Auto1"></a> <a href="#Auto2" class="Auto2"></a> <a href="#Auto3" class="Auto3"></a> </div> <div id="blockizmenenia"> <div id="blockpokaza"> </div> </div> </div> </td> </tr> </table>

источник