Слайдер для фото с анимацией

Слайдер для фото с анимацией без  jquery,а с использованием чекбоксов простой,но тем не менее стильный и не тормозящий загрузку сайта.Добавить фото в блог не сложно,но красиво оформить и подать посетителю это уже совсем другая тема.Установив слайдер для ротации фотографий можно не только сэкономить место,но и увеличить юзабилети страницы убрав излишнюю на громождённость.Это наверное самый простой вариант установки слайдера для фото на страницы блога или сайта

Установка кода слайдера для фото.

Код слайдера-ротатора состоит из двух частей и так как адрес фото уже непосредственно следует вносить в код CSS,то значит можно взять и добавить весь скопированный и отредактированный код с Вашими фото непосредственно на страницу,где планируется показ слайдера где нибудь в самом низу,чтобы не тормозить загрузку.

<style>/*слайдер для фото v-gol.ru*/ .vgol {border: 1px solid #ddd;/*цвет и толщина рамки*/   background: url(урл фото)no-repeat;   width: 600px;/*ширина блока*/   height: 300px;/*высота блока*/   transition: 1.2s;/*задержка анимации*/ } #chet2:checked ~ .vgol {   background: url(урл фото)no-repeat; } #chet3:checked ~ .vgol {   background: url(урл фото)no-repeat; } #chetyre4:checked ~ .vgol {   background: url(урл фото)no-repeat; } #chet5:checked ~ .vgol {   background: url(урл фото)no-repeat; } #chet6:checked ~ .vgol {   background: url(урл фото)no-repeat; } </style> @v-gol.ru

Смотреть ещё Оформление блоков для кодаСлайдер- ротатор для блога Ротатор для баннеров Эффекты для фото на CSS. Как добавить форум на блог

Вторая часть НТМЛ или просто говоря обыкновенные чекбоксы с которыми вы часто сталкиваетесь заполняя различные анкеты устанавливается не посредственно там,где планируется вывод показа слайдов фотографий.

<input type="radio" name="chetyre" id="chet"/> <input type="radio" name="chetyre" id="chet2"/> <input type="radio" name="chetyre" id="chet3"/><input type="radio" name="chetyre" id="chet4"/><input type="radio" name="chetyre" id="chet5"/><input type="radio" name="chetyre" id="chet6"/>
<div class="vgol"></div>

Плавно меняющийся фон фотографий придаст слайдеру красивый анимированный эффект,который конечно же украсит страницу и придаст вашим фото совершенно другой вид.

Настройки слайдера для фото.

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

---