Как вывести список новостей, используя Slick-карусель.
В первую очередь необходимо скачать slick: http://kenwheeler.github.io/slick/
Далее подключить файлы и скрипты в header.php шаблона сайта:
- Библиотека jquery, если она не подключена:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";></script>
- А также стили и скрипты slick:
$APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH . "/js/slick/slick.css"); $APPLICATION->SetAdditionalCSS(SITE_TEMPLATE_PATH . "/js/slick/slick-theme.css"); $APPLICATION->AddHeadScript(SITE_TEMPLATE_PATH . "/js/slick/slick.js");
Затем в файле шаблона компонента списка новостей добавить скрипт:
$(".news-slider").slick({
dots: true,
arrows: false,
infinite: true,
slidesToShow: 4,
slidesToScroll: 1,
adaptiveHeight: true,
responsive: [
{
breakpoint: 1024,
settings: {
slidesToShow: 3,
slidesToScroll: 3
}
},
{
breakpoint: 600,
settings: {
slidesToShow: 2,
slidesToScroll: 2
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
slidesToScroll: 1
}
}
]
});
И для тега-обертки (у меня это ul) установить класс news-slider.
Немного подробнее в формате видео: