Как сделать слайдер «Было/Стало» в конструкторе Bazium

Если вы создали сайт на платформе Bazium и хотите добавить интерактивный блок сравнения «было/стало», но не имеете доступа к CSS-редактору - это не проблема. В конструкторе предусмотрена вставка собственного HTML-кода, однако возникает вопрос: где взять ссылки на изображения, если загрузка файлов напрямую не поддерживается? В этой инструкции мы простыми словами объясним все варианты.

Где хранить изображения для HTML-блока в Bazium

Поскольку Bazium не позволяет загружать файлы через стандартную медиатеку, вам потребуется внешний хостинг изображений. Вот три надёжных способа:

• Бесплатные фотохостинги - например, ImgBB, PostImage или Flickr. Загрузите туда картинки, скопируйте прямую ссылку (обычно заканчивается на .jpg, .png).
• Облачные сервисы - Google Диск, Яндекс.Диск или Dropbox. Сделайте файл публичным и получите прямую ссылку (инструкции есть в справке сервиса).
• GitHub - создайте публичный репозиторий, загрузите файлы и используйте ссылки вида https://raw.githubusercontent.com/ваш_логин/репозиторий/main/имя_файла.jpg.

Как прописать ссылку в HTML-коде слайдера

Когда у вас есть прямые ссылки на изображения (например, https://example.com/bylo.jpg и https://example.com/stalo.jpg), вставьте их в атрибут src тега <img>. Пример простого слайдера для блока «было/стало»:

<div class="comparison-slider">
  <img src="ССЫЛКА_НА_БЫЛО.jpg" alt="Было">
  <img src="ССЫЛКА_НА_СТАЛО.jpg" alt="Стало">
</div>

Затем добавьте JavaScript для переключения (например, по клику или наведению). Если вы не знакомы с программированием, воспользуйтесь готовым кодом из открытых источников (например, CSS-Tricks или CodePen) - скопируйте его и замените только ссылки на свои картинки.

Проверка и размещение блока

В редакторе Bazium выберите опцию «Добавить блок» → «HTML-код» (или «Свой код»). Вставьте подготовленный HTML вместе с JavaScript и CSS (если нужно). Сохраните изменения и посмотрите результат на предпросмотре. Убедитесь, что изображения загружаются (ссылки рабочие) и слайдер корректно работает на мобильных устройствах.

Частые ошибки новичков

• Использование ссылок с ограниченным доступом (например, из личного кабинета) - они не отобразятся у посетителей.
• Отсутствие атрибута alt у изображений - это важно для SEO и доступности.
• Слишком большие картинки - оптимизируйте их перед загрузкой (сжимайте до 200-500 КБ).

Теперь вы знаете, как обойти ограничения Bazium и добавить эффектный слайдер «было/стало» без знания программирования. Просто выберите удобный хостинг, получите прямые ссылки и вставьте их в готовый HTML-код.