Как сделать Слайд-Шоу из фотографий с помощью CSS3?

Здравствуйте, дорогие читатели – Sozdaiblog.ru!

Сегодня я покажу, как сделать слайд-шоу из фотографий с помощью CSS3.

Используя только одни CSS стили, мы сделаем слайд-шоу, которое будет отображать фоновые изображения в полноэкранном режиме.

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

Вашему вниманию будет представлено  4 различных эффекта «слайд-шоу», из которых Вы сможете выбрать наиболее подходящий для своих нужд.

Как создать Слайд-Шоу из фотографий на CSS3.

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

ДЕМО СКАЧАТЬ

Затем, его нужно распаковать и с помощью ftp-клиента закинуть содержимое на сервер в папку с Вашим сайтом.

Теперь, давайте разберёмся с настройками.

Внутри распакованного файла будет папка «images», там будут храниться все изображения для создания слайд шоу.

В папке «CSS», Вы увидите 4 файла «style» и один «demo».

Определившись с выбором стиля (style) оформления слайд-шоу, открываем его и прописываем адреса ко всем картинкам. Сделать это не сложно, ищите похожие строки кода:

background-image: url(/wp-content/uploads/Путь к файлу/images/5.jpg);

Далее, открываем один из четырёх присутствующих в папке файлов «index» и прописываем путь к стилям CSS:

 <link rel="stylesheet" type="text/css" href="Путь к файлу/style1.css" />

В этом же файле задаём необходимые заголовки фотографиям.

После всех манипуляций, достаточно привязать ссылку на файл «index» к любому изображению или кнопке на Вашем Интернет-ресурсе и при нажатии, взору посетителя будет открываться полноэкранное слайд-шоу.

В ближайшее время появятся ещё публикации о том, как сделать слайд шоу из фотографий, а на сегодня это всё.

До новых статей….

С уважением, Денис Черников!