Sozdaiblog.ru
Назад

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

Опубликовано: 01.02.2013
Время на чтение: 5 мин
32
7

Как сделать Слайд-Шоу из фотографий с помощью 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» к любому изображению или кнопке на Вашем Интернет-ресурсе и при нажатии, взору посетителя будет открываться полноэкранное слайд-шоу.

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

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

 

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

Поделиться
Похожие записи
Комментарии:
  • Александр Красильный
    Опубликовано: 01.02.2013 Ответить на сообщение

    Отличная статья Денис, все оказывается не так уж и сложно, если разобраться как следует. Теперь надо только покумекать, где-бы применить данный эффект.

    • Денис Черников
      Опубликовано: 01.02.2013 Ответить на сообщение

      Спасибо, Александр! Статья получилась короткая, но информативная.

  • Anna
    Опубликовано: 01.02.2013 Ответить на сообщение

    Здорово как! Я уже придумала какую галерею можно сделать, только осталось собрать фото))) Спасибо за такой интересный и красивый советик!

    • Денис Черников
      Опубликовано: 01.02.2013 Ответить на сообщение

      Пожалуйста, Анна! Смотрится очень эффектно!

  • Alex
    Опубликовано: 01.02.2013 Ответить на сообщение

    Что-то ничего не видно кроме черного экрана и 4-х кнопок ДЕМО 1-4, когда переходишь на демо-просмотр. Почему так?

    • Денис Черников
      Опубликовано: 01.02.2013 Ответить на сообщение

      У Вас наверное такая низкая скорость Интернета, что даже картинки не подгружаются или Вы самым плохим браузером пользуетесь типа оперы!

      • Alex
        Опубликовано: 02.02.2013 Ответить на сообщение

        Точно! Опера! На других нормально. Может 12-я Опера и хороша, но я сижу на 11.10. Привык и она мне больше нравится. Просто когда нужно перехожу сразу же на другие, а здесь даже не подумал.

        • Денис Черников
          Опубликовано: 02.02.2013 Ответить на сообщение

          Вот видите, оказывается всё решаемо. Может когда-нибудь владельцы оперы её допилят и она тоже будет правильно работать.

  • Ольга
    Опубликовано: 01.02.2013 Ответить на сообщение

    Для меня это слишком сложно.

    • Денис Черников
      Опубликовано: 01.02.2013 Ответить на сообщение

      Это не сложно, просто нужно попробовать!

  • Алексей Виноградов
    Опубликовано: 02.02.2013 Ответить на сообщение

    классно, и не надо мудрить со скриптами, ajax'ами

    • Денис Черников
      Опубликовано: 02.02.2013 Ответить на сообщение

      Рад, что понравилось!Просто, сердито и красиво.

  • Николай
    Опубликовано: 02.02.2013 Ответить на сообщение

    Классная вещь! И главное доступно все описано и объяснено, спасибо!

    • Денис Черников
      Опубликовано: 02.02.2013 Ответить на сообщение

      Пожалуйста, Николай! Применяйте на здоровье!

  • Ольга
    Опубликовано: 04.02.2013 Ответить на сообщение

    Спасибо! У вас очень много всего, думаю что пропишусь надолго. Моему блогу только три месяца, так что опыт пока маленький, но я учусь.Поэтому задам вопрос делитанта.Прописать путь к файлу( я так понимаю , что эти картинки будут хранится в папке images, значит и путь нужно будет указывать к этой папке. Просто с этим у меня немного туго ещё.)Можно пример как это примерно будет выглядеть, я зрительно улавливаю быстрее.С этими путями к файлу я всё время что нибудь путаю.Ещё раз спасибо, за такую нужную информацию. с меня соц. сети.

    • Денис Черников
      Опубликовано: 04.02.2013 Ответить на сообщение

      Пожалуйста! Вот так выглядит путь — http:// Ваш сайт/public/wp-content/images/название картинки. В зависимости, где находится «images».

  • Андрей
    Опубликовано: 04.02.2013 Ответить на сообщение

    Спасибо. Воспользуюсь обязательно!

    • Денис Черников
      Опубликовано: 04.02.2013 Ответить на сообщение

      Пожалуйста! Если что стучитесь!

  • Кирилл
    Опубликовано: 12.03.2013 Ответить на сообщение

    как такую галерею поместить на фон сайта , а то весь текст который я вбиваю виден только тогда, когда фотографии меняются...

    • Денис Черников
      Опубликовано: 12.03.2013 Ответить на сообщение

      Не задавался этим вопросом! По теории сделайте свой сайт и и для фона вместо цвета или обоев пропишите CSS для слайд-шоу.

  • DarkSerHer
    Опубликовано: 07.04.2013 Ответить на сообщение

    Замечательная статья, только вот не прокаментино пришлось 3 часа потратить что бы понять что где)))))))) теперь пытаюсь вставить в свою страницу, чет не получается... СПАСИБО

    • Денис Черников
      Опубликовано: 07.04.2013 Ответить на сообщение

      Рад, что Вам понравилось!

  • Константин
    Опубликовано: 17.06.2013 Ответить на сообщение

    Здравствуйте Денис! Прекрасная статья. Я много чего перенимаю с вашего блога, Спасибо! Хотел задать вопрос- нужно сделать заставку на страницу входа, наподобие однотипных сайтов из Яндекс -каталога.Знаете когда посетитель заходит и попадает в дебри и не понятно где выход. Подскажите пожалуйста как сделать такую страницу? Просто сайт попал под фильтр и нужно таким образом прикрыть главную. Спасибо.

    • Денис Черников
      Опубликовано: 17.06.2013 Ответить на сообщение

      Здравствуйте, Константин! Немного не понял, зачем Вам это? Вы так не прикроете главную, а только распугаете всех посетителей!

  • Константин
    Опубликовано: 17.06.2013 Ответить на сообщение

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

    • Денис Черников
      Опубликовано: 17.06.2013 Ответить на сообщение

      Так сделайте отдельный файл в корне темы и редирект с главной. В принципе это всё!

      • Константин
        Опубликовано: 17.06.2013 Ответить на сообщение

        Спасибо! Попробую.

        • Денис Черников
          Опубликовано: 17.06.2013 Ответить на сообщение

          Обращайтесь!

  • Степан
    Опубликовано: 28.05.2014 Ответить на сообщение

    Здравствуйте Денис! Мне не понятно как это вставлять в сайт. Ведь там уже есть файлы стилей и ... index.php. Как быть? Пожалуйста помогите!))

    • Денис Черников
      Опубликовано: 29.05.2014 Ответить на сообщение

      Здравствуйте! Вставлять файлы стилей, значит добавить кусок кода в уже существующий файл!

  • Андрей
    Опубликовано: 27.10.2015 Ответить на сообщение

    Отличное решение, но к большому сожалению не работает в Explorer. Может есть возможность исправить?

  • Валерий
    Опубликовано: 21.02.2016 Ответить на сообщение

    Как слайд шоу css3 с музыкой преобразовать в видео.
    Попробовал oCam, хорошо сканирует до 854×480
    А вот шире хуже. Но ведь (в слайд шоу css3) фото 1024×681 на весь экран растягивается без потерь.
    Есть ли какой нибудь конвертер: html css3 в видео?

Имя
Укажите своё имя и фамилию
E-mail
Без СПАМа, обещаем
Текст сообщения
Отправляя данную форму, вы соглашаетесь с политикой конфиденциальности и правилами нашего сайта.