[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. Написать комментарий:)

  [
    {
      "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;
}