Слайдер с большими возможностями. Практически все задачи у меня получалось решить с помощью слик-слайдера.
Быстрый старт — как начать использовать слик слайдер
Подключаем файлы из облака:
<!-- Add the slick-theme.css if you want default styling --> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/> <!-- Add the slick-theme.css if you want default styling --> <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/> <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
Код правильного подключения в functions.php в wordpress (так же из облака)
add_action(
'wp_enqueue_scripts',
function () {
wp_enqueue_script( 'my-slick', '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js', array('jquery'), null, true );
wp_enqueue_style( 'style-slick', '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css', null, null, 'all' ); }
);
Подключаем локальные файлы slick-slider из папки с шаблоном
add_action(
'wp_enqueue_scripts',
function () {
$theme_patch=get_stylesheet_directory_uri();
wp_enqueue_script( 'my-slick', $theme_patch . '/slick-slider/slick.min.js', array('jquery'), null, true );
wp_enqueue_style( 'style-slick', $theme_patch . '/slick-slider/slick.css', null, null, 'all' );
}
);
Скачиваем файлы и подключаем. slick-slider-181