Создать сайт бесплатно!
Главная
AI Code
Как создать адаптивный слайдер с помощью AI Code
Telegram
Будьте в курсе всех обновлений: подпишитесь на наш официальный Telegram-канал uCoz и задавайте вопросы в чате сообщества!

Как создать адаптивный слайдер с помощью AI Code

Как создать адаптивный слайдер с помощью AI Code
Материал добавлен: 29 Сентября 2025
Материал обновлен: 30 Сентября 2025

AI Code может помочь вам быстро сгенерировать готовый слайдер для сайта uCoz. Достаточно описать задачу простыми словами, и ассистент предложит код на HTML, CSS и JavaScript.

В этом примере создадим адаптивный слайдер на Swiper.js с тремя слайдами, блоком текста и кнопкой, стрелками навигации и автопрокруткой.

Анимация AI Code

Как это работает

  1. Перейдите в раздел «Дизайн» → «Редактор шаблонов», выберите нужный шаблон и откройте AI Code.
  2. Сформулируйте запрос обычным текстом, без технических терминов.
  3. Получите готовый код и вставьте его в шаблон.
  4. При необходимости уточните детали: ассистент доработает скрипт под ваши условия.

Пример промпта

Модуль: Блог

Шаблон: Главная страница блога

Сделай красивый адаптивный слайдер на Swiper.js с [3] слайдами. 
Подключи Swiper через CDN. 
На каждом слайде используй картинку: 
1) [ссылка_на_изображение_1] 
2) [ссылка_на_изображение_2] 
3) [ссылка_на_изображение_3] 
Слева у каждого слайда добавь блок с заголовком “[Заголовок_1 / Заголовок_2 / Заголовок_3]”, 
описанием “[Описание_1 / Описание_2 / Описание_3]” и синей кнопкой “[Кнопка_1 / Кнопка_2 / Кнопка_3]”. 
Стрелки сделай в [круглых] полупрозрачных кнопках, а снизу добавь точки для переключения. 
Слайдер должен листаться сам каждые [5] секунд и с эффектом [fade]. 
Дай полный HTML, CSS и JS код сразу в одном примере.

Где разместить код в шаблоне?

  1. HTML разметку слайдера вставьте в шаблон в том месте, где он должен отображаться.
  2. CSS добавьте в «Таблицу стилей (CSS)» или прямо рядом в блоке <style>.
  3. Подключение Swiper.js и JS-инициализацию вставьте перед закрывающим тегом </body>.
Если вы не уверены, куда именно вставить код, уточните у AI Code — ассистент подскажет подходящее место.

Готовый код (ориентир)


<!-- Connect Swiper via CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<style>
.swiper { width:100%; height:450px; border-radius:12px; overflow:hidden; }
.swiper-slide { position:relative; display:flex; align-items:center; justify-content:flex-start;
 background-size:cover; background-position:center; padding:40px 0 40px 80px; }
.slide-content { max-width:400px; background:rgba(0,0,0,0.45); padding:20px 25px; border-radius:10px; color:#fff; }
.slide-content h2 { font-size:28px; margin-bottom:10px; }
.slide-content p { font-size:16px; margin-bottom:15px; line-height:1.4; }
.slide-content .btn { display:inline-block; background:#007bff; color:#fff; padding:10px 18px; border-radius:6px; text-decoration:none; font-weight:bold; transition:background 0.3s; }
.slide-content .btn:hover { background:#0056b3; }
.swiper-button-next, .swiper-button-prev { background:rgba(50,50,50,0.6); width:42px; height:42px; border-radius:50%; color:#fff; }
.swiper-button-next::after, .swiper-button-prev::after { font-size:18px; }
.swiper-button-next:hover, .swiper-button-prev:hover { background:rgba(50,50,50,0.85); }
@media(max-width:600px){ .swiper{height:300px;} .slide-content h2{font-size:20px;} .slide-content p{font-size:14px;} .swiper-slide{padding:20px;} }
</style>

<!-- Slider -->
<div class="swiper mySwiper">
 <div class="swiper-wrapper">
 <div class="swiper-slide" style="background-image:url('/images/slide1.jpg')">
 <div class="slide-content">
 <h2>Первый слайд</h2>
 <p>Описание для первого изображения.</p>
 <a href="#" class="btn">Подробнее</a>
 </div>
 </div>
 <div class="swiper-slide" style="background-image:url('/images/slide2.jpg')">
 <div class="slide-content">
 <h2>Второй слайд</h2>
 <p>Описание для второго изображения.</p>
 <a href="#" class="btn">Перейти</a>
 </div>
 </div>
 <div class="swiper-slide" style="background-image:url('/images/slide3.jpg')">
 <div class="slide-content">
 <h2>Третий слайд</h2>
 <p>Описание для третьего изображения.</p>
 <a href="#" class="btn">Читать</a>
 </div>
 </div>
 </div>
 <div class="swiper-button-next"></div>
 <div class="swiper-button-prev"></div>
 <div class="swiper-pagination"></div>
</div>

<script>
var swiper = new Swiper(".mySwiper", {
 loop:true,
 autoplay:{ delay:5000, disableOnInteraction:false },
 navigation:{ nextEl:".swiper-button-next", prevEl:".swiper-button-prev" },
 pagination:{ el:".swiper-pagination", clickable:true },
 effect:"fade",
 speed:800,
});
</script>

Проверка работы

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

Как доработать результат с помощью ассистента

Если результат вас не устраивает, просто уточните условия в диалоге с AI Code. Он доработает внешний вид и поведение слайдера под ваши требования.

Примеры уточнений

  • Сделай кнопки переключения квадратными вместо круглых.
  • Добавь ещё слайды — пусть будет 5 штук, с разными картинками.
  • Сделай слайдер повыше — примерно 600 px.
  • Останавливай автопрокрутку, когда навожу мышку на слайдер.
  • На телефонах сделай текст и отступы поменьше, чтобы всё влезало.
  • Подвинь точки-переключатели чуть выше — на 40 px от низа.
Как создать адаптивный слайдер с помощью AI Code