Как использовать Swiper.js в WordPress: Полное руководство

get('Version'); // Для корректного кеш-бастинга

    // Подключение локального JavaScript файла Swiper
    wp_enqueue_script(
        'swiper-js',
        get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.js',
        [],
        $theme_version, // Или версия Swiper
        true
    );

    // Подключение локального CSS файла Swiper
    wp_enqueue_style(
        'swiper-css',
        get_template_directory_uri() . '/assets/swiper/swiper-bundle.min.css',
        [],
        $theme_version // Или версия Swiper
    );
}
// add_action('wp_enqueue_scripts', 'theme_enqueue_swiper_local'); // Раскомментируйте, если используете этот метод
?>

    
    

        
        
Содержимое слайда 1
        
Содержимое слайда 2
        
Содержимое слайда 3
        
    

    
    


    
    

    


    
    

get('Version'),
        true
    );
}
add_action('wp_enqueue_scripts', 'theme_enqueue_custom_swiper_init');
?>

/**
 * Инициализирует простой Swiper слайдер.
 * @global Swiper
 */
document.addEventListener('DOMContentLoaded', function (): void {
    // Проверяем, существует ли класс Swiper (библиотека загружена)
    if (typeof Swiper === 'undefined') {
        console.error('Swiper library is not loaded.');
        return;
    }

    // Инициализация слайдера для элемента с классом .my-simple-swiper
    const simpleSwiperContainer: HTMLElement | null = document.querySelector('.my-simple-swiper');

    if (simpleSwiperContainer) {
        const mySwiper: Swiper = new Swiper(simpleSwiperContainer, {
            // Минимальные параметры (можно оставить пустым для настроек по умолчанию)
            loop: true, // Бесконечная прокрутка
            // Добавьте сюда другие параметры по мере необходимости
        });
    }
});

    
    
Заголовок слайда
    
Краткое описание или текст для слайда.
    Узнать больше

// ... (код из предыдущего примера)
// Предположим, у нас есть контейнер 
...
// с соответствующими HTML элементами для пагинации и навигации.

const advancedSwiperContainer: HTMLElement | null = document.querySelector('.my-advanced-swiper');

if (advancedSwiperContainer) {
    const advancedSwiper: Swiper = new Swiper(advancedSwiperContainer, {
        loop: true,
        autoplay: {
            delay: 5000, // Задержка в миллисекундах (5 секунд)
            disableOnInteraction: false, // Продолжать автопрокрутку после взаимодействия пользователя
        },
        pagination: {
            el: '.swiper-pagination', // Селектор элемента пагинации
            clickable: true, // Делает точки пагинации кликабельными
        },
        navigation: {
            nextEl: '.swiper-button-next', // Селектор кнопки "вперед"
            prevEl: '.swiper-button-prev', // Селектор кнопки "назад"
        },
        // Полезные параметры для маркетинговых слайдеров:
        effect: 'fade', // Эффект смены слайдов (например, 'slide', 'fade', 'cube', 'coverflow', 'flip')
        speed: 800, // Скорость анимации перехода (в мс)
    });
}

get('Version')
    );
}
add_action('wp_enqueue_scripts', 'theme_enqueue_custom_swiper_styles');
?>

/* Кастомизация кнопок навигации */
.my-advanced-swiper .swiper-button-next,
.my-advanced-swiper .swiper-button-prev {
    color: #FF6600; /* Ваш фирменный цвет */
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

.my-advanced-swiper .swiper-button-next::after,
.my-advanced-swiper .swiper-button-prev::after {
    font-size: 18px;
    font-weight: bold;
}

/* Кастомизация пагинации */
.my-advanced-swiper .swiper-pagination-bullet {
    background-color: #FF6600;
    opacity: 0.7;
    width: 10px;
    height: 10px;
}

.my-advanced-swiper .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.2);
}

const responsiveSwiperContainer: HTMLElement | null = document.querySelector('.my-responsive-swiper');

if (responsiveSwiperContainer) {
    const responsiveSwiper: Swiper = new Swiper(responsiveSwiperContainer, {
        slidesPerView: 1, // Количество видимых слайдов по умолчанию (мобильные)
        spaceBetween: 10, // Отступ между слайдами
        loop: true,
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        breakpoints: {
            // Когда ширина окна >= 640px
            640: {
                slidesPerView: 2,
                spaceBetween: 20,
            },
            // Когда ширина окна >= 768px
            768: {
                slidesPerView: 3,
                spaceBetween: 30,
            },
            // Когда ширина окна >= 1024px
            1024: {
                slidesPerView: 4,
                spaceBetween: 40,
            },
        }
    });
}

// Предположим, у нас есть экземпляр Swiper, сохраненный в переменной `mySwiperInstance`
// const mySwiperInstance: Swiper = new Swiper(...);

const nextButtonCustom: HTMLElement | null = document.getElementById('customNextButton');
const prevButtonCustom: HTMLElement | null = document.getElementById('customPrevButton');

if (mySwiperInstance && nextButtonCustom && prevButtonCustom) {
    nextButtonCustom.addEventListener('click', function (): void {
        mySwiperInstance.slideNext(); // Переключить на следующий слайд
    });

    prevButtonCustom.addEventListener('click', function (): void {
        mySwiperInstance.slidePrev(); // Переключить на предыдущий слайд
    });
}

if (mySwiperInstance) {
    mySwiperInstance.on('slideChange', function (): void {
        console.log('Активный слайд изменился. Новый индекс: ', mySwiperInstance.activeIndex);
        // Здесь можно выполнять действия, например, обновить аналитику или другой UI элемент
    });

    mySwiperInstance.on('reachEnd', function (): void {
        console.log('Достигнут конец слайдера');
        // Может быть полезно для загрузки дополнительного контента или изменения UI
    });
}

<?php
/**
 * Шорткод для вывода Swiper слайдера с постами.
 * Пример использования: [swiper_posts_slider post_type="project" count="6" slides_per_view="3" navigation="true" pagination="true"]
 *
 * @param array $atts Атрибуты шорткода.
 * @return string HTML-код слайдера.
 */
function custom_swiper_posts_slider_shortcode(array $atts): string {
    // Убедимся, что скрипты и стили Swiper подключены (функции theme_enqueue_swiper_cdn/local и theme_enqueue_custom_swiper_init должны быть вызваны ранее через хук wp_enqueue_scripts)

    // Атрибуты по умолчанию
    $attributes = shortcode_atts(
        [
            'id' => 'swiper-posts-' . bin2hex(random_bytes(4)), // Генерируем уникальный ID
            'post_type' => 'post',
            'count' => 6,
            'orderby' => 'date',
            'order' => 'DESC',
            'slides_per_view' => '3',
            'slides_per_view_tablet' => '2',
            'slides_per_view_mobile' => '1',
            'space_between' => '30',
            'loop' => 'true',
            'pagination' => 'false',
            'navigation' => 'false',
            'autoplay_delay' => '', // Например, '5000' для 5 секунд
        ],
        $atts,
        'swiper_posts_slider'
    );

    // Подготовка данных для WP_Query
    $query_args = [
        'post_type' => sanitize_text_field($attributes['post_type']),
        'posts_per_page' => intval($attributes['count']),
        'orderby' => sanitize_text_field($attributes['orderby']),
        'order' => sanitize_text_field($attributes['order']),
        'post_status' => 'publish',
    ];

    $slider_query = new WP_Query($query_args);

    if (!$slider_query->have_posts()) {
        return '';
    }

    // Формирование data-атрибутов для JS инициализации
    $data_attrs_string = sprintf(
        'data-slides-per-view="%s" data-slides-per-view-tablet="%s" data-slides-per-view-mobile="%s" data-space-between="%s" data-loop="%s" %s %s %s',
        esc_attr($attributes['slides_per_view']),
        esc_attr($attributes['slides_per_view_tablet']),
        esc_attr($attributes['slides_per_view_mobile']),
        esc_attr($attributes['space_between']),
        esc_attr(filter_var($attributes['loop'], FILTER_VALIDATE_BOOLEAN) ? 'true' : 'false'),
        filter_var($attributes['pagination'], FILTER_VALIDATE_BOOLEAN) ? 'data-pagination="true"' : '',
        filter_var($attributes['navigation'], FILTER_VALIDATE_BOOLEAN) ? 'data-navigation="true"' : '',
        !empty($attributes['autoplay_delay']) && intval($attributes['autoplay_delay']) > 0 ? 'data-autoplay-delay="' . intval($attributes['autoplay_delay']) . '"' : ''
    );

    ob_start();
    ?>
    <div id="" class="swiper-container my-content-swiper" >
        

            have_posts()) : $slider_query->the_post(); ?>
                

                    <article id="post-" >
                        
                            <a href="" aria-label="">
                                 'lazy']); // Размер изображения и ленивая загрузка ?>
                            
                        
                        
<a href="">