Slick slider

Слайдер с большими возможностями. Практически все задачи у меня получалось решить с помощью слик-слайдера.

Быстрый старт — как начать использовать слик слайдер

Подключаем файлы из облака:

<!-- 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

 

Оставьте комментарий