На демо-сайте, который вы предоставили, используется слайдер, построенный с использованием библиотеки Slick Carousel (Slick Slider). Это популярная библиотека для создания красивых и адаптивных слайдеров на веб-сайтах. Вы можете легко добавить подобный слайдер на свой сайт WordPress.
Чтобы взять код для создания подобного слайдера, вам потребуется следующее:
1. Установите и активируйте плагин Slick Carousel для WordPress. Вы можете найти его в официальном репозитории WordPress или установить его через административный интерфейс вашего сайта.
2. Создайте или отредактируйте страницу, на которой вы хотите разместить слайдер.
3. Вставьте следующий код в текстовый редактор страницы, чтобы создать базовую структуру слайдера:
<div class="slider">
<div><img src="ссылка-на-изображение-1.jpg" alt="Изображение 1"></div>
<div><img src="ссылка-на-изображение-2.jpg" alt="Изображение 2"></div>
<!-- Добавьте больше изображений по аналогии -->
</div>
4. Включите и настройте плагин Slick Carousel, добавив следующий JavaScript-код в файле functions.php вашей темы WordPress:
function custom_slick_slider() {
wp_enqueue_style('slick-css', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css');
wp_enqueue_script('slick-js', 'https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array('jquery'), null, true);
wp_enqueue_script('custom-slick-slider', get_template_directory_uri() . '/js/custom-slick-slider.js', array('jquery', 'slick-js'), null, true);
}
add_action('wp_enqueue_scripts', 'custom_slick_slider');
5. Создайте файл `custom-slick-slider.js` в папке вашей темы WordPress и добавьте следующий код для настройки слайдера:
jQuery(document).ready(function($) {
$('.slider').slick({
// Настройки слайдера
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
autoplay: true,
autoplaySpeed: 3000,
responsive: [
{
breakpoint: 768,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
// Добавьте другие настройки для разных экранов
]
});
});
6. Сохраните файлы и обновите страницу, на которой вы разместили слайдер. Вам потребуется настроить стили и другие параметры слайдера в соответствии с вашим дизайном и требованиями.
Это базовый пример создания слайдера с использованием Slick Carousel в WordPress. Вы можете настроить его дополнительно, чтобы добавить эффект, подобный тому, который вы видели на демо-сайте.