[MODX] Слайдер Slick slider в контенте ресурса - гибкий инструмент контент-менеджеру

Что вы получите в результате

В произвольном месте контента вставить слайдер через чанк [[$slider_incontent]], внутри которого будут транслироваться изображения, загруженные для текущего ресурса. Или, в зависимости от задачи, транслироваться изображения с кокого-то определенного ресурса. В моих небольших проектах этим ресурсом выступает главная страница. На ней слайдер не выводился, но мне удобно иметь настройки именно на главной - чтобы не ломать голову лишний раз с поиском. Удобно клиенту и разработчику.

Иметь весь JS код под рукой в админке и в футере на сайте через сниппет bottomAdd.

Не захламлять другие страницы кодом библиотеки слайдера. При этом если вдруг на странице уже подгружена библиотека, еще раз она уже подгружаться не будет. Благодаря конструкции if(typeof $.fn.Slick === 'undefined'){...

Нюанс с визуальныйм редактором

Готовый чанк слайдера подходит для размещения в произвольном месте контента. Нюансом для размещения в визуальныйм редакторе (tinyMCE, или любым другим) является то, что любую строку он оборачивает в тег <p>. Поэтому в чанке мы должны это предусмотреть. Например вот так — </p>[Код слайдера]<p>. Теги параграфи остаются закрытыми, хоти и пустыми. Если в них нет внутренних паддингов, то все будет выглядеть хорошо. Если планируется использовать слайдер вне визуального редактора, то этот нюанс не актуален.

Подразумевается, что блок с основным контентом обернут в неккий класс. У меня это real_content. В любом случае для вас не проблема адаптировать CSS.

Алгоритм реализации

  1. Создать ТВ-поле MIGX. Готовые настройки из генератора MIGX уже тут
  2. Создать сниппет bottomAdd, для перемещения JS-кода вниз
  3. Разместить в соответсвующий папках файлы слайдера.
  4. Установите пакет pthumb для оптимизации размера изображения. По-умолчанию не происходит изменения размера, просто файл сжимается. Кстати, вот Настройки pThumb
  5. Создать ТВ-поле migx_incontent_slider и чанк slider_incontent
  6. Скачать и подключить Slick Slider github.com/kenwheeler/slick/archive/v1.8.1.zip. Настроить его под ваши нужды. Документация на сайте плагина — kenwheeler.github.io/slick
  7. Написать комментарий:)

Tv поле migx_incontent_slider

Параметры дополнительного поля:

  • Имя: migx_incontent_slider
  • Тип ввода: MIGX

Вкладки формы

  [
    {
      "caption": "Заголовок",
      "fields": [
        {
          "field": "image",
          "caption": "Изображение",
          "inputTVtype": "image",
          "sourceFrom": "migx"
        },
        {
          "field": "link",
          "caption": "Ссылка",
          "inputTVtype": "text"
        }
      ]
    }
  ]
  

Разметка колонок

  [{
    "renderer": "this.renderImage",
    "sourceFrom": "migx",
    "header": "Изображение",
    "dataIndex": "image"
  },{
    "header": "Ссылка",
    "dataIndex": "link"
  }]
  

Чанк slider_incontent

[[!getImageList?
  &tvname=`migx_incontent_slider`
  &tpl=`migx_incontent_slider_tpl`
  &docid=`[[*id]]`
  &limit=`0`
  &wrapperTpl=`migx_incontent_slider_tpl_wr`
]]

Чанк migx_incontent_slider_tpl

[[+link:isnot=``:then=`
<div class="item"><a href="[[+link]]"><img src="[[+image:pthumb]]" alt=""></a></div>
`:else=`
<div class="item"><img src="[[+image:pthumb]]" alt=""></div>
`]]

Чанк migx_incontent_slider_tpl_wr

  
<div class="incontent_slider_wr">
  <div class="incontent_slider">
    [[+output]]
  </div>
[[!bottomAdd?&input=`
<script>
  if(typeof $.fn.Slick === 'undefined'){
    document.write('<script src="js/slick.min.js">\x3C/script>'); [[- http://kenwheeler.github.io/slick/ ]]
    document.write('<link href="css/slick.css" rel="stylesheet">');
    document.write('<link href="css/slick-theme.css" rel="stylesheet">');
  }
</script>

<script>
$(".incontent_slider").slick({
  slidesToShow: 1,
  rows:1,
  arrows: true,
  slidesToScroll: 1,
  mobileFirst: true,
  dots:true
});
</script>
`]]
</div>

Стили CSS

.real_content .incontent_slider_wr{
  padding: 9px 9px 6px;
  border:1px solid #eaeaea;
  border-radius: 10px;
  margin: 25px 0;
}
.real_content .incontent_slider_wr .item + .item{
  display: none;
}
.real_content .incontent_slider_wr .slick-slide{
  border-radius:4px;
}
.real_content .incontent_slider.slick-dotted.slick-slider{
  margin-bottom: 0;
}
.real_content ul.slick-dots li{
  margin:initial;
  padding: initial;
}
.real_content ul.slick-dots li:before{
  content: none;
}
.real_content .incontent_slider .slick-dots{
  bottom: 0;
}
.real_content .incontent_slider ul.slick-dots li button:before{
  content: '';
  width: 16px;
  opacity: 1;
  height: 16px;
  border-radius:100%;
  border:2px solid #fff;
}
.real_content .incontent_slider ul.slick-dots li.slick-active button:before{
  background-color: #fff;
}

.real_content .incontent_slider .slick-prev,
.real_content .incontent_slider .slick-next{
  background-color: #4c92bf;
  z-index: 10;
  height: 40px;
  width: 54px;
}
.real_content .incontent_slider .slick-prev:before,
.real_content .incontent_slider .slick-next:before{
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAVCAYAAABR915hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoV2luZG93cykiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6M0FDM0QyODFDOEE2MTFFODk4NDY5NjUxNTBBNUVFMDMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6M0FDM0QyODJDOEE2MTFFODk4NDY5NjUxNTBBNUVFMDMiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDozQUMzRDI3RkM4QTYxMUU4OTg0Njk2NTE1MEE1RUUwMyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDozQUMzRDI4MEM4QTYxMUU4OTg0Njk2NTE1MEE1RUUwMyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PlCFa0UAAADSSURBVHjazJbRDYMwDETTiglYio2QO0EjL8MvK7AMK6RGKmqEjHNxqVJL/rv4Kfiwc0spBSBIspccCzqWXCVjseIGLiSlT7Ch40xHpbo1UAvOio68YA2qwdnQUS3YguZwBnQqvDsx0hMw3Bqw2GtFy1zITY+38JwJ30LdZ6+AumpcBa2Gb+IFEM4AdM8ZqLfcxV8T4Mzh7XZktA6Abmra46aubvofewq5v5I2MuNh1J1FD47Mh7qf/207Nd3HP32BdECPYtZT6801Zuuy+OZ6CTAAiCCq+xmhkvYAAAAASUVORK5CYII=');
  background-repeat: no-repeat;
  content: '';
  width: 15px;
  height: 21px;
  display: block;
  position: absolute;
  top:50%;
  left: 50%;
  margin-left: -7.5px;
  margin-top: -10.5px;
  opacity: 1;
}
.real_content .incontent_slider .slick-next:before{
  background-position: 100% 0;
}
.real_content .incontent_slider .slick-prev{
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  left: 0;
  padding-left: 20px;
}
.real_content .incontent_slider .slick-next{
  border-top-left-radius: 50px;
  border-bottom-left-radius: 50px;
  right: 0;
  padding-right: 20px;
}

Комментарии (0)

  1. Напишите первый комментарий
*Комментарий будет опубликован после проверки модератором

Похожие статьи

Генератор настроек MIGX

jQuery.Maskedinput js - документация на русском с примерами

Документация на русском по MODX MIGX

Маска для ввода телефона +7(___)___-__-__

Подсказки по работе и заготовки для MiniShop2

Импорт и экспорт в MiniShop2. Реализация 1

pdoPage и getImageList - Постраничная навигация MIGX

Как включить HTTPS (SSL) в MODX - Подробная инструкция

Генерация YML для выгрузки в маркет

Примеры работы с API MODX

Расширение свойств товаров minishop2

Примеры выборки where, optionFilters, innerJoin

Отключить автозаполнение input

pThumb - ресайз изображений. Примеры использования.

Настройка Webpack - несколько точек входа и разделение на чанки

Примеры использования

Сайт на обслуживании (выключить сайт)

Вывести getImageList только если он не пустой

Тип поля "Список ресурсов" (resourcelist) с ограничением по родителю (parents)

Оформление и настройка easyComm. Комментарии и отзывы на сайте.

Добавить в письмо контактную информацию

Поиск на сайте с пакетом SimpleSearch

Простая и симпатичная галерея fancybox

Вывод tv-параметров в формате -

Галерея. Вывести обложки альбомов и фотографии

Подсчет и вывод количества потомков ресурса в MODX

Универсальная форма обратной связи — feedBackForm

Отредактировать письмо о заказе - добавить ТВ поле, или что-то еще

Quip для MODX. Более рабочий вариант

pdoResources Заготовки для работы

Сниппет для вывода размера и расширения файла

Простой аудио-плеер HTML5

Вывести список всех опций MiniShop2

Как контролировать кэш CSS и скриптов

Изменить цену на товар в зависимости от количества при добавлении в корзину minishop2

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

Подключить MODX в стороннем PHP файле

Простейшая авторизация

Красивое адаптивное меню под pdoMenu

Массово обновить ТВ, или другое поле через базу

Как создать ресурс процессором $modx->runProcessor('resource/create', $props)

Изменить формат номера заказа

Создать свою страницу в админке

Сообщение о том, что сайт использует Cookie

Получить grandparent. Вывести родитель родителя

Симпатичный список файлов, загружаемых к ресурсу через MIGX

Создать источник файлов

Установить шаблон по-умолчанию для новых, создаваемых ресурсов

Вывести все доступные плейсхолдеры

Отредактировать шаблон письма

Добавить скрипт перед тегом body

Общая сумма по каждому товару в корзине Minishop2

Создать раздел с паролем на сайте MODX

Что делать если ее приходит почта администратору

Фильтрация по TV параметрам в msProducts

Дата на русском

FontAwesome - часто используемые иконки для шаблонов MODX

Создать пакет с пользовательской таблицей

Курсы валют с cbr.ru на PHP

Заготовки для работы

Как сделать переменную не реактивной в Vue

Bxslider отображение картинок после полной загрузки слайдера

Обязательный чекбокс при оформлении заказа

getResources заготовки

Загрузка сниппета после загрузки страницы через AjaxSnippet

Соответствие названия классов с названиями таблиц в MySQL

Баннеры с использованием BannerY

Разбить вывод pdoResources на несколько колонок (блоков)

Обработка остатков заказа в miniShop2

CSS для постраничной навигации pdoPage

Вывести время загрузки (формирования) страницы

Расширить таблицу site_content (объект modResource) за 5 минут

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

Вырезать кавычки — фильтр-сниппет MODX

Обновить alias (псевдоним) у всех ресурсов

Динамическое поле emailSubject в FormIt

Бесплатная доставка от 5000 рублей в MiniShop2

Скрыть информацию о том, что сайт работает на MODX

Отсортировать ресурсы по количеству комментариев Quip MODx

Как обработать POST данные в PHP

Изменить цену на товар, если в корзине лежит товар из особой категории minishop2

Примеры использования Vuex

Создать редирект через autoRedirector API

Вывести 404 ошибку по настройке TV MODX

Ответ для сервиса moneta.ru

Выполнить код после асинхронного запроса axios во Vue

Email сделать не обязательным полем

Как разместить исходный код сниппета на сайте, в документации

Как вызвать метод из другого компонента Vue

Ускорить установку MODX revo до пары кликов

Заготовки JavaScript

Постраничная навигация — набор параметров и CSS PdoPage

Сделать поле размер обязательным

Не работает подгрузка товаров ajax mfilter2 на мобильном

Сделать все элементы статичными для Git и IDE

Cортировать по списку id в pdoResources и pdoTools

Кастомный чанк для AdminPanel

Настройка стилей для комментариев Tickets

Подключить текстовой редактор к доп. полям ресурса

Разместить корзину внутри блока с оформлением заказа

Динамическая замена шаблона ресурса - плагин

Вывести список всех родителей в ТВ поле ресурса

Вложенные условия в xPDO MODX

Плагин для формирования замороженных URL с редиректом

Приветственный экран / заглушка на сайт

Вывести список всех емэйлов miniShop2

Если getParentIds не работает в плагине

Как получить данные пользователя сразу после авторизации через API

Связать значения инпутов через jQuery (биндинг)

Рекурсивно вложенный компонент Vue

xPDO Выборка из одной таблицы с зацепкой значения из другой

Контролировать кэширование файлов CSS и JS MiniShop2

Не приходят / не отправляются письма - в чем причина?

Настроить Axios чтобы принимал только JSON

Использование async/await в JavaScript с Vue.js

Кэширование в MODX: использование $modx->cacheManager

Js-beautify - библиотека для форматирования HTML, CSS, JS

Использование Promise.all с примерами на VueJs

Создание цикла асинхронных вызовов во Vue.js

Манипуляция с HTML во Vue.js и cash-dom

Наш сайт использует куки, нажмите «ОК» если вы не против
OK