О Битрикс

Список новостей в виде карусели Slick

Как вывести список новостей, используя 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.

Немного подробнее в формате видео:


Возврат к списку

Территориально я нахожусь в Санкт-Петербурге, но могу и готова работать со всеми, вне зависимости от вашего местоположения. Вы можете написать мне через форму обратной связи, либо связаться через социальные сети. Ознакомиться с портфолио можно здесь и здесь.