Перейти к основному содержанию

Drupal 8. Как сделать бегущую строку.

Для одного из проектов на Drupal 8, связанного с новостями, нужно было сделать заголовок главной новости в виде слайдера. Drupal 8 имеет множество модулей Slider и можно использовать любой из них. Но ниже приведен очень быстрый и простой вариант показать текст заголовка в виде слайдера.

Нам нужно сделать это загрузить и включить Views Slideshow  и библиотеку jQuery cycle library

Шаг 1. Настройка Slideshow Views

Загрузите и включите модуль « Слайд-шоу ».
Загрузите библиотеку jQuery cycle library
Загрузите файлы в папку / library / в корень вашего сайта. Переименуйте загруженную папку в /jquery.cycle/ 


Шаг 2. Если тип содержимого не существует, обязательно создайте новый тип содержимого или используйте существующий.

Шаг 3: Создайте новое представление для отображения слайдера

    Перейдите в Структура> Представления> Добавить новый.
    Введите «View name».
    Нажмите «Создать блок».
    Для «Формат отображения» выберите «Слайд-шоу».
    Нажмите «Сохранить и редактировать».
    Выберите настройки слайд-шоу в разделе формата.
    В параметрах цикла измените Эффект с затухания на «scrollLeft» или любой другой по нашему желанию.
    Проверьте «View Transition Advanced Options» в настройках просмотра, там мы получим следующие параметры
    Обновите «Таймер задержки» и «Скорость», чтобы соответствовать вашим потребностям.
    Нажмите Применить.
    Теперь выберите количество элементов на дисплее пейджера и установите для него 0 элементов.
    Сохранить представление.


Шаг 4: Поместите блок слайд-шоу в область, где вам нужно отобразить блок.

    Перейдите в Структура> Схема блоков (администратор / структура / блок)
    Нажмите «Поместить блок» рядом с регионом, где нам нужно разместить блок и выберите созданный вами блок "бегущей строки".

Теги

Добавить комментарий

Restricted HTML

  • Допустимые HTML-теги: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Строки и абзацы переносятся автоматически.
  • Адреса веб-страниц и email-адреса преобразовываются в ссылки автоматически.
Нажимая кнопку "Отправить комментарий", Вы автоматически соглашаетесь с политикой конфиденциальности и даете свое согласие на обработку персональных данных. Ваши данные не будут переданы третьим лицам.
Top