Создание слайдера на 1с битрикс

Обновлено: 07.07.2024

Создаем слайдер на основе инфоблока и компонента "список новостей". Выодим слайдер на главную страницу сайта. Для работы понадобится заготовка слайдер с плавным движением. Интегрируем сторонний слайдер и скрипты в битрикс.

У меня не получается слайдере сделать картинки подходящего размера.
В настройках инфоблока "Поле" стоит уменьшать размер картинки до 500. Он ее уменьшает и в разделе акции отображается все нормально. Но как только картинка попадаете в слайдер она остается такой же маленькой и не соответствует размерам слайдера. Если увеличиваю картинку в акциях до размеров в слайдере, то в акциях она вылезает на левую правую колонку сайта.
Где и какой параметр я упускаю?

Цитата
Игорь пишет: У меня не получается слайдере сделать картинки подходящего размера. В настройках инфоблока "Поле" стоит уменьшать размер картинки до 500. Он ее уменьшает и в разделе акции отображается все нормально. Но как только картинка попадаете в слайдер она остается такой же маленькой и не соответствует размерам слайдера. Если увеличиваю картинку в акциях до размеров в слайдере, то в акциях она вылезает на левую правую колонку сайта. Где и какой параметр я упускаю?

Цитата

Игорь пишет:
У меня не получается слайдере сделать картинки подходящего размера.
В настройках инфоблока "Поле" стоит уменьшать размер картинки до 500. Он ее уменьшает и в разделе акции отображается все нормально. Но как только картинка попадаете в слайдер она остается такой же маленькой и не соответствует размерам слайдера. Если увеличиваю картинку в акциях до размеров в слайдере, то в акциях она вылезает на левую правую колонку сайта.
Где и какой параметр я упускаю?

В настройках инфоблока установите размер картинки под слайдер, а в акциях искусственно зажмите ее в 100% от ширины контента

Так как без нее после входа в какую-то акцию в ней картинка по прежнему будет растянута.

Но дело даже не в этом.
Попробовал отредактировать файл indеx.php в папку Акции - результата нет.

Попробовал отредактировать общий css, классами .preview_picture и .detail_picture. Результат появился, но зацепил соответственно все страницы.

template.php компанента новостей который выводит акции. Чтобы не цеплял другие разделы- создать под них свой отдельный шаблон.

Здравствуйте Михаил!
Делаю все по вашим урокам. Вставил в включаемую область компонент "Список новостей", настроил параметры компонента все точь в точь как в данном уроке. Сохраняю шаблон компонента, в результате он у меня выглядит совсем по другому.

Ну и соответственно дальше сложно ориентироваться по видеоуроку. Почему к меня получился такой код компонента, может я что не так сделал? Подскажите пожалуйста

Скачал готовый шаблон слайдера, заменил в папке со своим шаблонам. Видно что файл стилей применяется. Но слайды не выводятся, просто пустая область.

Думал дело в неправильно подключенных скиптах, подключил их по новой но не помогло.

Так же аналогичная проблема возникла и в следующем уроки, по созданию выделенной области для анонса новостей справа.

В манифесте блока подключите расширение landing_carousel.

В разметке блока пометьте классами ноды:

.js-carousel - корневой контейнер слайдера
.js-slide - каждый слайд в отдельности

По умолчанию показывается по 1 слайду за раз, каждый слайд занимает всю ширину контейнера. Кнопки переключения и индикаторы отсутствуют. Автоматическая прокрутка выключена. Всё это изменяется настройками, которые задаются data-атрибутами. Атрибуты нужно добавлять к элементу .js-carousel.

Вид слайдера

Важно! При совмещении галереи и карусели (слайдера) нужно инициализировать ассеты в определённом порядке: сначала карусель, затем - галерею! Другие ассеты, при их наличии, могут идти в любой последовательности. Смотри код ниже.

Атрибуты

Кнопки перелистывания.

Атрибут добавляет кнопки перелистывания. Стили задаются как общие для обеих кнопок, а так же отдельно для левой и правой.

Индикаторы страницы (пагинация)

Атрибут добавляет элемент пагинации, задаёт его классы.

Количество слайдов на экране

Количество слайдов, меняющихся за одно перелистывание

Включение/выключение автопрокрутки

Скорость автопрокрутки в миллисекундах

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

Эффект "появления" слайдов

Атрибут позволяет не перелистывать слайды, а менять их местами с изменением прозрачности.

Внимание! Корректно работает только с data-slides-show="1"

Вертикальный слайдер

Будьте внимательны, кнопки и пагинация для вертикальных слайдеров должны отличаться от горизонтальных (располагаться по-другому). Примеры можно увидеть в штатных блоках. Рекомендуем выключать вертикальность на мобильных устройствах с помощью настройки Адаптивность. В противном случае, скролл пальцем по экрану будет не двигать страницу, а листать слайды.

Количество строк

В мультистроковом слайдере параметры data-slides-show и data-slides-scroll влияют не на количество слайдов, а на количество колонок.

Проигрывание по кругу

Если включено, то после последнего слайда снова будет показан первый. Если выключено, то проигрывание остановится. Для совместимости с редактором, эта настройка работает только в режиме Предпросмотра и Публикации. В редакторе зацикливание всегда выключено.

Адаптивность

Слайдеры могут гибко менять свои настройки в зависимости от размера экрана. Адаптивности могут быть подвержены любые вышеперечисленные настройки, но чаще всего меняется Количество слайдов на экране.

В атрибуте необходимо передать массив объектов, каждый из которых должен содержать:

breakpoint - размер экрана в пикселях. Правило применяется "вниз", то есть для экранов данного размера и меньше.

settings - массив настроек, применяемых для данного правила. Имена настроек отличаются от имён дата-атрибутов. Список имён для ранее приведённых атрибутов:

arrowsClasses
prevArrow
nextArrow
dotsClass
slidesToShow
slidesToScroll
autoplay
autoplaySpeed
pauseOnHover
fade
vertical

Пример

Примеры блоков данного типа вы можете посмотреть в нашем репозитории, воспользовавшись методами landing.block.getmanifestfile и landing.block.getrepository. Их коды:

01.big_with_text
01.big_with_text_blocks
28.5.team_4_cols_slider
39.1.five_blocks_carousel
45.2.gallery_app_with_slider - с галереей
и многие другие

Пользовательские комментарии

Мы будем рады, если разработчики добавят свои комментарии по практическому использованию методов системы.

Для этого нужно всего лишь авторизоваться на сайте

Но помните, что Пользовательские комментарии, несмотря на модерацию, не являются официальной документацией. Ответственность за их использование несет сам пользователь.

Также Пользовательские комментарии не являются местом для обсуждения функционала. По подобным вопросам обращайтесь на форумы.

Реализуем новую возможность для нашего сайта - а именно добавление картинок через административную панель в слайдер на сайте. Для этого нужно создать инфоблок, и настроить его согласно нашей задаче. В первую очередь создадим общий тип для будущих инфоблоков. Назовем его «Контент».

Откроем административный раздел сайта, «Контент» – «Инфоблоки» – «Типы инфоблоков». Нажимаем кнопку «Добавить новый тип». Откроется вкладка «Настройка типа». В поле «Идентификатор (ID)» укажем «content». В поле «Russian (Название)» укажем «Контент». В поле «English (Название)» укажем «Content».

Создадим новый инфоблок для слайдера.

На форме информационного блока, в поле «Символьный код» укажем «slider». Отметим чекбокс с сайтом по умолчанию. В поле «Название» укажем «Слайдер». Уберем галки из чекбоксов с индексированием разделов и элементов.

С вкладкой «Инфоблок» закончили.

Открываем вкладку «Поля». Находим строчку «Картинка для анонса». Выбираем первый чекбокс. Теперь при создании элемента инфоблока картинка для анонса будет обязательна. Затем выбираем чекбокс «Уменьшать если большая». Откроются поля ширины и высоты. Указываем 950 и 300.

Переходим к вкладке «Доступ». В разделе «Доступ по умолчанию». Для всех пользователей выберем уровень доступа «Чтение» (чтобы все посетители сайта могли просматривать изображения слайдера).

На этом все, сохраняем инфоблок.

Переходим в инфоблок «Слайдер». Жмем «Добавить элемент». Справа есть «шестеренка» для открытия окна «Настройка формы редактирования». Нажимаем. Удаляем все вкладки кроме вкладки «Элемент». В выбранных полях оставляем: «Активность», «Название», «Картинка для анонса».

На форме осталась только одна вкладка «Элемент».

В поле «Название» указываем, например, 1. Переносим картинку с размерами 950x300 px в область для перетаскивания. Жмем «Сохранить».

Так повторяем еще один-два раза (можно больше). С созданием инфоблока закончили.

Копируем шаблон компонента. Назовем новый шаблон «slider». Скопируем в основной шаблон сайта. Шаблон будем редактировать через FTP.

Через FTP открываем папку шаблона компонента слайдера (папка_сайта/bitrix/templates/main/components/bitrix/news.list/slider). На редактирование открываем файл «template.php». Удаляем все его содержимое. И всавляем следующий код:

Затем в публичной части сайта открываем тестовую страницу на редактрование и копируем вызов компонента. Через FTP открываем файл «header.php» в папке основного шаблона сайта. Находим «div» с классом «gallery» (<div >

Вставляем вызов компонента вместо этого «div'a». Сбрасываем кэш в публичной части сайта. Смотрим что получилось.

Когда я создавал свою первую компоненту на битриксе для меня это показалось довольно сложным процессом. Вроде бы написано полно статей, русскоязычная документация, форум. Что ещё надо?! А то, что нет простой для понимания информации для новичка, который только начинает практиковаться в разработке для битрикса.

Спустя некоторое время, когда я разобрался, всё оказалось довольно таки просто и создавать компоненты прям с нуля тоже не обязательно. Сегодня я расскажу, как просто научиться создавать компоненты для CMS 1С-Битрикс на примере слайдера изображений.

Создание инфоблока

Далее во вновь созданном типе создаем сам инфоблок. Назову его так же слайдер. Ставим галочку с сайтом по умолчанию.

Так же для удобства во вкладке Поля устанавливаем начало активности в текущие дату и время. Это необходимо, чтобы у вновь созданных элементов дата активности заполнялась автоматически и они сразу же становились доступны.

На вкладке Доступ разрешаем чтение для всех пользователей, иначе инфоблок будет недоступен к просмотру.

Теперь можно сразу его наполнить. Для этого идем в Рабочий стол → Контент → Слайдер → Слайдер и добавляем новый элемент.

Название обязательно. И картинку будем загружать в картинку для анонса во вкладке Анонс.

Создание компонента битрикс

Компоненты не обязательно создавать с нуля. В большинстве случаев подходит кастомизация компонентов news.list или news. В нашем случае подойдет компонент news.list.

Идем в /bitrix/components/bitrix/news.list/templates/ и копируем папку .default в /bitrix/templates/ваш_шаблон/components/bitrix/news.list/ Если папки components и news.list в вашем шаблоне отсутствуют, то создаём их. И переименовываем папку из .default например в slider. Так мы создали новый кастомный шаблон slider.

Итак разберем все по порядку.

В самом начале оставляем строчку. Она необходима для защиты от прямого доступа к файлу.

Все наши элементы будут находиться в массиве $arResult["ITEMS"] Затем он перебирается с помощью foreach и выводится по элементно в массиве $arItem . Оставляем цикл foreach .

Давайте сейчас посмотрим что у нас находится в массиве. Для этого в цикл добавляем var_dump($arItem)

Чтобы увидеть данные необходимо вывести компонент на странице сайта. Создайте новую пустую страницу и добавьте туда компонент news.list. Выбираем шаблон slider и указываем тип инфоблока и инфоблок со слайдами.

Видим, что в массиве содержатся наши элементы слайдера. При создании компонент вам часто придется пользоваться функциями var_dump() или print_r() чтобы узнать как называются элементы содержащиеся в массиве и вывести их.

Здесь нам понадобятся только картинки анонсов. Ссылка на картинку будет находится в элементе $arItem["PREVIEW_PICTURE"]["SRC"]

Добавление слайдера в компонент

Сохраняем стили и скрипты в папках css и js текущего шаблона: owl.carousel.css, owl.theme.default.min.css, owl.carousel.min.js. Так же нам понадобится jQuery.

Добавляем скрипты между тегами <head></head> . Это можно сделать в шаблоне в файле header.php. Получить ссылку на текущий шаблон можно с помощью функции <?php echo SITE_TEMPLATE_PATH;?> Получаем примерно следующий код:

Возвращаемся в template.php и оборачиваем цикл с картинками в следующий код:

Ниже добавляем код для запуска слайдера с единственной опцией вывода по одной картинке.

Так же можно добавит код из стандартного шаблона, который позволяет редактировать элементы из фронтальной части сайта.

И указываем для блоков с элементами id="GetEditAreaId($arItem['ID']);?>" . Полный код файла template.php:

Если вам понравилась статья, вы можете отблагодарить автора любой суммой, какую сочтете для себя приемлемой:

CMS "1С-Битрикс" предоставляет широкие возможности для начала работы с сайтом. Вы можете установить систему управления и пользоваться ей совершенно бесплатно в течение 30 дней. Как правило этого хватает, чтобы не только разобраться, но и разработать и наполнить свой сайт перед Читать далее

В компонентах Битрикс есть встроенный функционал для AJAX подгрузки. Его так же можно использовать, например для бесконечного скролла новостей. Но есть и более простой способ, с помощью которого можно загружать ответ любого компонента без перезагрузки страницы. Его мы и рассмотрим Читать далее

Использовать капчу в формах довольно просто, достаточно отметить галочкой нужный пункт. А что если нужна защита кодом для какого-то нестандартного функционала?! В этом случае можно так же воспользоваться встроенными методами Битрикс. Включение капчи в модуле Веб-формы. Шаг 1 Подключаем библиотеку Читать далее

Работа с базой данных в CMS 1C-Битрикс осуществляется с помощью глобального объекта $DB. Класс позволяет осуществлять различные операции с базой данных, такие как например добавление, удаление, обновление и вывод данных. Аналог в CMS WrodPress - класс wpdb. Обращаться к базе данных Читать далее

Наткнулся в сообществе разработчиков 1С-Битрикс на очень интересную разработку - модуль, который отслеживает изменения файлов/страниц на сайте и сохраняет их резервные копии, а так же ведет логи действий и формирует отчеты с фильтрами. Странно, что этот модуль так и не Читать далее

В данном уроке мы рассмотрим реализацию слайдера в шапке сайта с помощью компонента 1С-Битрикс.

Для начала мы пометим весь слайдер во включаемую область для страницы. Этим мы решим проблему отображения слайдера на главной странице и не отображения на внутренних - при необходимости вывода включаемой области на других страницах мы создадим отдельные файлы включаемых областей.

<div
<div
<div data-src="<?=SITE_TEMPLATE_PATH?>/img/slide1.jpg"></div>
<div data-src="<?=SITE_TEMPLATE_PATH?>/img/slide2.jpg"></div>
<div data-src="<?=SITE_TEMPLATE_PATH?>/img/slide3.jpg"></div>
</div>
</div>

Код включаемой области:

<?$APPLICATION->IncludeComponent(
"bitrix:main.include",
"",
Array(
"AREA_FILE_SHOW" => "page",
"AREA_FILE_SUFFIX" => "slider",
"EDIT_TEMPLATE" => ""
)
);?>

Код слайдера в шаблоне заменяем кодом включаемой области и переносим в файл index_slider.php в корне сайта (мы будем показывать слайдер только на главной странице).

Создание компонента слайдера

Мы создадим очень простой компонент слайдера. Для начала создадим пустую страницу, например, 1.php где разместим компонент bitrix:news.list.

Подготовка данные (создание и заполнение инфоблока)

Поскольку у нас до сих пор не было ни одного инфоблока, создадим тип инфоблока Template:

Создадим инфоблок в новом типе:

Основные настройки для данного инфоблока будут:

Инфоблок будет активен
Символьный код - MAIN_SLIDER
Выберем один из сайтов системы в качестве сайта по умолчанию (тот, где будет использоваться слайдер)
Уберём галочки индексации разделов и элементов для поиска (нет смысла искать слайдер)
Поставим совместных режим просмотра элементов и разделов (это сугубо личное предпочтение автора урока)
Дадим доступ на чтение тем группам пользователей, которым он необходим. Если вы работаете над уже запущенным проектом в скрытом разделе, то возможно доступ для всех и не нужен. Однако мы сразу установим чтение для всех, в том числе неавторизованных юзеров, чтобы не возвращаться потом к этому вопросу.

Теперь в новом инфоблоке необходимо создать активные элементы, соответствующие слайдам.

Можно создать руками все элементы:

Важно при этом не забыть:

поставить галочку активности элементов
заполнить название (это обязательный пункт), например порядковым номером слайдера
в поле "картинка для анонса" приложить изображение

Для этого урока нами был создан вручную только 1 элемент. Далее мы экспортировали его в XML и добавили информацию о ещё 2 слайдах. Вы можете найти файлы для импорт (XML и картинки) в нашем репозитории на GitHub.

Интеграция дизайна слайдера в шаблон компонента bitrix:news.list

Разместим на странице 1.php, которую мы создали выше для этих целей компонент:

<?$APPLICATION->IncludeComponent(
"bitrix:news.list",
"",
Array(
"IBLOCK_ID" => "MAIN_SLIDER"
),
false
);?>

Обращаем внимание на выделенную красным строку - мы сразу задаём в параметрах компонента КОД информационного блока!

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

Копируем шаблон компонента дефолтный шаблон компонента списка новостей в шаблон сайта:

Теперь модифицируем шаблон компонента списка новостей /bitrix/templates/stylish/components/bitrix/news.list/main_slider/template.php:

Как видите, мы удалили всё лишнее и оставили только самое необходимое:

подключение пролога
разметку вокруг баннерного блока
цикл для непосредственного вывода баннеров
вывод картинки анонса

Поскольку слайдер выводится только на одной из страниц HTML вёрстки, то мы поместим вызов компонента слайдера во включаемую область, применяемую для файла.

Теперь осталось поместить код вызова компонента слайдера в файл включаемой области index_slider.php (собственно имя файла включаемой области состоит из имени файла для которого включаемая область отображается и идентификатора, который используется в вызове компонента включаемой области):

<?$APPLICATION->IncludeComponent("bitrix:news.list", "main_slider", Array(
"IBLOCK_ID" => "MAIN_SLIDER", // Код информационного блока
),
false
);?>

ВАЖНО! Не забудьте удалить файл (1.php в нашем случае) в котором велась разработка, когда он перестанет быть нужен!

В шаблоне же необходимо вызвать компонент:

<?$APPLICATION->IncludeComponent(
"bitrix:main.include",
"",
Array(
"AREA_FILE_SHOW" => "page",
"AREA_FILE_SUFFIX" => "slider",
"EDIT_TEMPLATE" => ""
)
);?>

Не забудьте удалить из папки /img/ в шаблоне сайта картики баннеров для слайда (slide1.jpg, slide2.jpg, slide3.jpg) - теперь слайды берутся компонентом из инфоблока!

Результаты работы данного урока, как всегда, можно скачать на GitHub .

Интеграция адаптивного Bootstrap шаблона сайта в 1С-Битрикс по шагам - УРОК 3

Читайте также: