Решён
Как сделать карусель на сайте WordPress с кнопками навигации?

Question

Решён
Как сделать карусель на сайте WordPress с кнопками навигации?

12 дней назад

5.5k

7

Нужна карусель (слайдер) на главной странице сайта WP. Чтобы были кнопки "назад" и "вперед", автопрокрутка и индикаторы (точки) снизу.

Ставил плагин MetaSlider, но там нет кнопок навигации, только точки. Пробовал Slider Revolution - слишком тяжелый, сайт стал грузиться по 5 секунд.

Как сделать простую карусель на WordPress с кнопками? Может быть есть готовый код или легкий плагин?

JavaScript WordPress Карусель Плагины Слайдер

Илья MTG · Answer 1 · 2026-04-02T15:33:43+03:00

Решение

71

Илья MTG Участник • 2 ответа

12 дней назад

Swiper.js. Легкая библиотека, весит 30кб, работает быстро.

Добавь в functions.php:

function load_swiper() {
  wp_enqueue_style('swiper-css', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css');
  wp_enqueue_script('swiper-js', 'https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'load_swiper');

Потом в шаблоне страницы:

<div class="swiper">
  <div class="swiper-wrapper">
    <div class="swiper-slide"><img src="slide1.jpg"></div>
    <div class="swiper-slide"><img src="slide2.jpg"></div>
    <div class="swiper-slide"><img src="slide3.jpg"></div>
  </div>
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <div class="swiper-pagination"></div>
</div>

<script>
const swiper = new Swiper('.swiper', {
  loop: true,
  autoplay: { delay: 3000 },
  pagination: { el: '.swiper-pagination', clickable: true },
  navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev' }
});
</script>

Все кнопки и точки будут работать из коробки.

Николай 12 дней назад

Зависит от темы. Если используешь конструктор типа Elementor - вставляй через виджет HTML. Если правишь шаблон напрямую - в файл front-page.php или header.php твоей темы.

Игорь Стройка Автор 11 дней назад

Спасибо! А куда этот html код вставлять? В редактор страницы или в файл темы?

Марина Ruby · Answer 2 · 2026-04-02T11:59:22+03:00

Плагин Smart Slider 3. Бесплатная версия имеет все что нужно - кнопки, точки, автоплей, адаптивность. Визуальный редактор, никакого кода.

Устанавливаешь, создаешь новый слайдер, добавляешь слайды, вставляешь шорткод на страницу. 5 минут работы максимум.

Anton_IT · Answer 3 · 2026-04-02T22:20:59+03:00

слайдер револьюшн тяжелый потому что ты наверное все модули включил в настройках

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

Feature · Answer 4 · 2026-04-03T07:17:19+03:00

Зачем вообще карусель в 2026 году? Исследования показывают что пользователи игнорируют слайдеры, конверсия от них близка к нулю. Первый слайд смотрят 90% посетителей, второй 20%, третий 5%.

Лучше сделать статичный баннер с одним четким призывом к действию.

Сергей Верстальщик · Answer 5 · 2026-04-03T12:15:14+03:00

Если тема поддерживает Gutenberg, есть встроенный блок "Галерея" который можно переключить в режим карусели. Никаких плагинов не нужно.

Добавляешь блок Галерея, загружаешь картинки, в настройках блока справа выбираешь "Отображение: Карусель". Кнопки и точки появятся автоматически.

TS Lover · Answer 6 · 2026-04-04T12:31:56+03:00

Owl Carousel 2 - проверенная временем библиотека. Работает с jQuery (который уже есть в WP).

Подключение:

// В functions.php
wp_enqueue_style('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css');
wp_enqueue_script('owl-carousel', 'https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js', array('jquery'));

HTML:

<div class="owl-carousel">
  <div><img src="1.jpg"></div>
  <div><img src="2.jpg"></div>
  <div><img src="3.jpg"></div>
</div>

<script>
jQuery(document).ready(function($){
  $('.owl-carousel').owlCarousel({
    items: 1,
    loop: true,
    autoplay: true,
    nav: true,
    dots: true
  });
});
</script>

Кнопки навигации (стрелки) включаются параметром nav: true, точки - dots: true.

Илья · Answer 7 · 2026-04-06T10:08:02+03:00

8

Илья Участник • 3 ответа

8 дней назад

можно еще glide.js попробовать, он легче чем свайпер и проще настраивается

документация на glide.js норм написана, там примеры готовые есть

Помогли .ру

Решён
Как сделать карусель на сайте WordPress с кнопками навигации?

7 ответов

Написать ответ