[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. Напишите первый комментарий
*Комментарий будет опубликован после проверки модератором

[MODx] Генератор настроек MIGX

[MODx, MIGx] Документация на русском по MIGX

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

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

[MODx] minishop2 tips

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

[MODx, miniShop2] Генерация YML для выгрузки в маркет

[MODx] Подсказки по API

[OpenCart] Вывести на главную все категории с картинками

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

[MODx, MIGX] Примеры использования

[PHP, JSON] Пример перевода с помощью Yandex Translate API

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

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

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

[Opencart] Вернуть английский язык, если вы его удалили

[OpenCart] Вывести модуль напрямую через контроллер

[MODX, MIGX] Вывести getImageList только если он не пустой

[MODx, Quip] Более рабочий вариант.

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

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

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

[MODX, MiniShop2] Примеры выборки where, optionFilters, innerJoin

[MODx] Вывод tv-параметров в формате [название TV] - [значение TV]

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

Все записи

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