Как сделать простое слайдшоу

Сообщение **serg** » 01 апр 2022, 23:18

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

Все, что нужно сделать это - поместить ваши фотографии в определенную разметку и подключить нужный скрипт.

Разметка

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

<div class="cycle-slideshow">
  <img src="/christmas/photo-1.jpg">
  <img src="/christmas/photo-2.jpg">
  <img src="/christmas/photo-3.jpg">
</div>

Скрипт

В шаблон вашего сайта, например, в секцию <head>, нужно подключить последний из трех приведенных скриптов. Два первых, или им подобные, обычно подключает CMS.

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

<script src="jquery-1.12.0.min.js"></script>
<script src="jquery-migrate-1.3.0.min.js"></script>
<script src="jquery.cycle2.min.js"></script>

Оформление

Чтобы фотографии не вылезали за пределы блока <div>, нужно добавить одно css-правило в файл стилей:

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

.cycle-slideshow img { max-width: 100%; }

Скачать

Скачать нужный скрипт и посмотреть остальные примеры можно на сайте разработчика этого скрипта.

http://jquery.malsup.com/cycle2/

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