💥Для формирования слайдера с 🖼️картинками используйте этот шаблон:

В кавычках 📜списка пишете нужные вам адреса картинок : 

🚨Обратите внимание, что в конце каждой строки списка стоит запятая, но в последней строчке запятой не должно быть.

❗Рекомендуется использовать картинки, загруженные на этот форум (для скрипта это доверенный источник данных).

Результат будет таким:

[html]<!-- Подключаем стили -->
<link rel="stylesheet" href="https://forumstatic.ru/files/001a/f0/7d/94827.css">
<!-- Данные: только URL изображений! -->
<script>
  window.sliderSlidesData = [
    "https://forumstatic.ru/files/0013/44/56/61036.png",
    "https://forumstatic.ru/files/0013/44/56/73446.png",
    "https://forumstatic.ru/files/0013/44/56/54143.png",
   "https://forumstatic.ru/files/0013/44/56/21344.png",
"https://forumstatic.ru/files/0013/44/56/87837.png"
    // Просто перечислите URL — соотношение определится автоматически!
  ].map(src => ({ src }));
</script>

<!-- Разметка слайдера -->
<div class="slider-container">
  <div class="slider-viewport">
    <div class="slider-wrapper"></div>
  </div>
  <div class="slider-dots"></div>
  <div class="slider-controls">
    <button class="slider-arrow left">‹</button>
   
    <!-- Кнопка автопрокрутки с SVG-иконками -->
    <button class="slider-autoplay-toggle">
      <svg class="play-icon" viewBox="0 0 24 24" width="16" height="16">
        <polygon points="8,6 8,18 18,12" fill="white"/>
      </svg>
      <svg class="pause-icon" viewBox="0 0 24 24" width="16" height="16" style="display:none">
        <rect x="6" y="4" width="4" height="16" fill="white"/>
        <rect x="14" y="4" width="4" height="16" fill="white"/>
      </svg>
    </button>
   
    <button class="slider-arrow right">›</button>
  </div>
  <div class="slider-switches">
    <div class="slider-switch">
      <input type="checkbox" id="animationSwitch" checked />
      <label for="animationSwitch">Анимация</label>
    </div>
    <div class="slider-switch">
      <input type="checkbox" id="carouselSwitch" />
      <label for="carouselSwitch">Карусель</label>
    </div>
    <div class="slider-switch">
      <input type="checkbox" id="uniformRatioSwitch" />
      <label for="uniformRatioSwitch">Единый формат</label>
      <select id="uniformRatioSelect">
        <option value="21/9">21:9</option>
        <option value="16/9" selected>16:9</option>
        <option value="4/3">4:3</option>
        <option value="3/2">3:2</option>
        <option value="1/1">1:1</option>
        <option value="2/3">2:3</option>
        <option value="9/16">9:16</option>
        <option value="239/100">2.39:1</option>
      </select>
    </div>
  </div>
</div>

<!-- Подключаем скрипт с автоопределением ratio -->
<script src="https://forumstatic.ru/files/001a/f0/7d/98661.js"></script>[/html]

Расшифровка элементов под слайдером:

• ✅Кнопки - влево, вправо и между ними кнопка автоматического листания.

На 🖥️десктопном браузере также можно листать изображения стрелками на клавиатуре.

• ✅Точки - кликабельные ссылки на картинки.

• ✅"Анимация" - увеличение изображения при листании.

• ✅"Карусель" - режим просмотра (с центрированием картинки при листании или нет).

• ✅Единый формат - принудительная смена формата представления картинок.

В принципе, почти все картинки похожи либо на квадрат, либо на вытянутый по горизонтали или вертикали прямоугольник. Но при разных соотношениях сторон скрипт заполняет слайдер по  формуле заполнения  слайда по максимальной стороне, но это не всегда имеет субъективно лучший вид для  просмотра, поэтому для лучшего вида лучше всего включите   функцию ✔️"Единый формат" и выберите комфортное для вас соотношение.

В 📱мобильном виде слайдер, в зависимости от соотношения размеров картинок, может превращаться  в слайдер с листанием по одной картинке, и там использование кнопки ✔️"Единый формат" также даёт отличный результат.

Подпись автора

Функционал форума Книга жалоб Книга предложений Знак зодиака Как вставить видео на форум Форум"Грибные места" Слайдер для картинок