Создаем слайдер на основе инфоблока и компонента "список новостей". Выодим слайдер на главную страницу сайта. Для работы понадобится заготовка слайдер с плавным движением. Интегрируем сторонний слайдер и скрипты в битрикс.
Видеоурок №8: создание слайдера
Михаил Базаров: 20.01.2014 13:46:19
Видеоурок №8: создание слайдера
Создаем слайдер на основе инфоблока и компонента "список новостей". Выодим слайдер на главную страницу сайта. Для работы понадобится заготовка слайдер с плавным движением. Интегрируем сторонний слайдер и скрипты в битрикс. |
Сергей: 20.01.2014 13:46:19
Добрый день, Михаил!
Прежде всего спасибо за Ваши уроки! Очень полезная вещь! Делаю сайт по Вашему уроку но многое не получается. Вот например http://www.familymania.ru/, слайдер сделать из картинок никак не выходит. Подскажите пожалуйста, как можно выводить картинки в слайдер не из раздела "Акции", а, например, из отдельной папки. Если же такой возможности нет, то как убрать слайдер (какие папки и файлы удалить из структуры сайта) и сделать простой статичный баннер на главной? Заранее 1000 благодарностей! Сергей |
Михаил Базаров: 20.01.2014 16:14:23
|
Гость сайта: 17.02.2014 02:57:33
Здравствуйте.
Столкнулся со следующей проблемой: В слайдер выводятся картинки прямо из анонса(если мы выставили обрезать их ширину с обрезанной шириной они и выводятся) в следствие чего, картинка занимает очень мало места. На вашем сайте asistant.camouf.ru картинка явно выводится не из анонса и не из детального просмотра, так как если бы они были взять оттуда, то занимали бы слишком мало места. Как решить эту проблему? Не подключать же для каждого анонса дополнительную картинку правильного разрешения. |
Михаил Базаров: 17.02.2014 16:48:59
Как вариант можете воспользоваться ResizeImageGet-ом
|
Александр: 27.02.2014 09:23:11
Добрый день.
делаю слайдер только на главной в материал добавляю код слайдера, картинки всегда будут одни и те же поэтому указал к ним путь, скопировал все стили в главный шаблон, все картинки сразу пропали, скачал все скрипты, подключил доступ к папке со скриптами 777, такое ощущение что не заводится jquery. сайт bretonbasset.ru могут ли быть какие нить конфликты?! |
Михаил Базаров: 27.02.2014 09:35:24
|
Гость сайта: 27.02.2014 12:43:45
|
Михаил Базаров: 28.02.2014 12:24:37
|
Константин: 20.03.2014 04:02:12
Здравствуйте, по вашему уроку сделал слайдер на том шаблоне что был в битриксе, но все остальные уроки не смотрел некогда( суть вопроса в следующем: слайдер меняет картинку, после эффекта "движение картинки" останавливается как будто не зациклен, не подскажите в чем может быть проблема?
|
Михаил Базаров: 20.03.2014 04:24:46
|
Константин: 10.04.2014 05:12:33
|
Александр: 15.04.2014 09:44:18
Михаил, может сталкивались - слайдер (скаченный у вас) нормально работает в хроме, криво в опере, в мозилле и IE вообще не работает, может в стили что то дописать надо?
|
Михаил Базаров: 15.04.2014 14:07:55
|
Андрей: 08.05.2014 19:27:59
Здравствуйте. Подскажите пожалуйста в чем причина ,куда смотреть. Делаю слайдер с акциями. На странице, где должен быть слайдер при наведении мышки видно что есть включаемая область, есть bitrix:news.list , только место это пустое. Что делаю не так? Большое спасибо!
|
Андрей: 09.05.2014 00:50:40
Здравствуйте. Пожалуйста еще один раз о маленьких изображениях в слайде.
Вы писали: Нет, у меня там выводится картинка анонса. То есть я изначально загрузил нужного мне, для слайдера, размера. А в разделе акций "зажал" их HTML версткой, указав ширину width="100%". Допускаю, что это не очень оптимальный ход, с точки зрения веса страницы с анонсами, но конкретно у меня получилась разница в 35Кб. Куда вставляется width="100%", и / или код ResizeImageGet ? Спасибо! |
Михаил Базаров: 09.05.2014 02:10:02
|
Михаил Базаров: 09.05.2014 02:12:36
|
Андрей: 13.05.2014 20:37:43
Добрый вечер. На главной странице хочу поставить второй слайдер. Есть свой отдельный информационный блок, свой шаблон компонента. Но при редактировании одного слайдера в style.css это сказывается и на другом слайдере. В чем может быть проблема? Спасибо!
|
Михаил Базаров: 14.05.2014 03:57:15
|
Андрей: 15.05.2014 09:48:27
Добрый день. После замены селекторов слайдеры управляются отдельно, только второй не выводится.
Во втором слайдере заменил селекторы на: #slide_1 .slider_1 .items_1 .baner_1 .baner_1 span и в template.php , и в style.css. А вот селекторы : .pagination, .prev, .next, .play, .paused, .progbar, .numStatus есть только в style.css ; class="preview_picture" - только в template.php . Если их требуется менять то где их найти? Большое спасибо. |
Михаил Базаров: 24.05.2014 06:40:26
Это все должно быть в js скриптах от слайдера
|
Игорь: 04.07.2014 03:08:01
У меня не получается слайдере сделать картинки подходящего размера.
В настройках инфоблока "Поле" стоит уменьшать размер картинки до 500. Он ее уменьшает и в разделе акции отображается все нормально. Но как только картинка попадаете в слайдер она остается такой же маленькой и не соответствует размерам слайдера. Если увеличиваю картинку в акциях до размеров в слайдере, то в акциях она вылезает на левую правую колонку сайта. Где и какой параметр я упускаю? |
Михаил Базаров: 04.07.2014 04:14:53
|
Игорь: 04.07.2014 06:01:17
Но дело даже не в этом. Попробовал отредактировать файл indеx.php в папку Акции - результата нет. Попробовал отредактировать общий css, классами .preview_picture и .detail_picture. Результат появился, но зацепил соответственно все страницы. Какой конкретно файл нужно править чтоб именно к акциям относился? |
Михаил Базаров: 04.07.2014 06:41:57
|
Слава: 14.07.2014 20:02:54
Михаил, доброе утро!
Никак не могу сладить со слайдером!))) на nhao.ru. Все делал по твоим урокам. Chrome говорит что никак не может найти файлы со скриптами . Из вышесказанных комментариев, так и не понял, что и где надо посмотреть. js знаю слабо. Зато, благодаря твоим видеоурокам, быстро освоил bitrix! |
Алексей: 04.08.2014 02:09:25
Здравствуйте Михаил!
Делаю все по вашим урокам. Вставил в включаемую область компонент "Список новостей", настроил параметры компонента все точь в точь как в данном уроке. Сохраняю шаблон компонента, в результате он у меня выглядит совсем по другому.
Ну и соответственно дальше сложно ориентироваться по видеоуроку. Почему к меня получился такой код компонента, может я что не так сделал? Подскажите пожалуйста |
Михаил Базаров: 04.08.2014 02:50:29
Скачать |
Алексей: 04.08.2014 07:14:19
Спасибо Михаил!
Скачал готовый шаблон слайдера, заменил в папке со своим шаблонам. Видно что файл стилей применяется. Но слайды не выводятся, просто пустая область. Думал дело в неправильно подключенных скиптах, подключил их по новой но не помогло. Так же аналогичная проблема возникла и в следующем уроки, по созданию выделенной области для анонса новостей справа. Стили применяются .news-right_all { background:#ddd; padding: 15px; border:1px solid #ccc; font-size:12px; } .news-right {margin:0px 0px 10px 0px; } .news-right a {font-style:italic; color:#555;} a.aal_news {float: right; color: blue; } А анонсы не выводятся. Только серая область и ссылка на "Все новости" внизу. Хотя использовал ваш готовый шаблон. |
Гость сайта: 01.09.2014 06:00:31
Подскажите, если js отключен (а NoScript, я думаю, используют многие), то выводиться просто пустая белая область. Можно как-то отловить этот момент? Т.е. нужно такое поведение: если js включена, то выводиться штатный слайдер. Если отключена - то выводиться какая-то статичная картинка (а в идеале, конечно, желательно выводить в этом случае одну, самую свежую акцию).
|
Михаил Базаров: 02.09.2014 15:31:06
Например http://ruseller.com/lessons/les1475/demo/index.html Само собой для браузров без поддержки CSS3 (IE в основном) использовать условные комментарии. |
Наталья: 06.09.2014 14:39:49
Здравствуйте! Не получается в слайдере отобразить картинки нужного размера. Вы по этому поводу уже писали. Я так и сделала: загрузила картинки нужного размера, в настройках инфоблока их не уменьшала, а в коде поставила width="100%". Результата не было пока я не загрузила картинки заново. После этого слайдер получился как нужно, а в акциях картинки не сжались до ширины контента (т.е. width="100%" не сработал). А если потом вернуть все настройки назад, т.е. в настройках инфоблока уменьшать картинки и убрать в коде width="100%", то опять ничего не произойдет пока не перезагрузить картинки заново.
Подскажите как все таки сделать слайдер Спасибо |
Михаил Базаров: 06.09.2014 17:16:06
Картинки после изменения в настройках инфоблока, надо перезагружать. Иначе Битриксу не из чего их создать. |
Славик: 10.09.2014 04:18:41
Михаил здравствуйте, подскажите можно ли загружать изображения из конкретной папки, а не из раздела сайта? в случайном порядке например. Не связывая изображение и анонс? С версткой не в ладах, сам пробую, не получается....
Спасибо. |
Михаил Базаров: 10.09.2014 13:34:50
|
Славик: 11.09.2014 00:36:44
Я имею в виду в слайдер, я не делал в акциях большие картинки (а в некоторых вообще нет), соответственно и в слайдере они либо маленькие либо нету....
|
Алексей: 18.09.2014 04:59:09
Добрый день. Решил сделать слайдер, но не брать информацию из акций как у Вас. Вставил его, все работает. Только одна проблема- при замене текста на русский отображаются коказябры, проблемы с кодировкой. Менял кодировку для всего сайта, и для CSS. Не помогло. Жду совета, заранее благодарен.
|
Михаил Базаров: 18.09.2014 10:13:09
|
Гость сайта: 19.09.2014 08:58:42
|
Дмитрий: 22.09.2014 03:28:36
Здравствуйте! Подскажите, а можно как то проверку на наличие картинки сделать? и если её нет не выводить новость, а то получается пустота... или это очень проблематично?
|
Дмитрий: 19.10.2014 10:21:15
Здравствуйте, Михаил
Делаю сайт по вашим урокам вроде все получается. Но застрял на одной ерунде, может вопрос не в тему нор все же прошу Вашей подсказки. На сайте создал веб форму через сервис веб-форм в битрикс, выбрал использовать свой шаблон и т.п. Так вот проблема возникла в следующем не могу найти куда добавить свой стиль в выпадающий список. Подскажите пожалуйста? |
Леонид: 26.10.2014 02:32:06
То ли я такой тупой, то ли опыта и знаний не хватает... Создал слайдер по уроку.Начал он у меня ездить, но только одну картинку, и 1н эффект. Эффект заканчивает действие - и останавливается.В чем дело может быть?
|
Гость сайта: 04.11.2014 14:05:24
Здравствуйте! Я застрял на 6:25 минуте "Список новостей, копировать шаблон компонента". У меня нету кнопки "Копировать шаблон компонента". Что делать?
|
Анжелика: 28.01.2015 23:36:57
Добрый день Михаил!
Слайд у меня работает, но картинки не активны как ссылки. Подскажите пожалуйста в чем может быть причина? |
Сергей: 18.02.2015 00:35:46
Михаил доброго времени суток,
Спасибо за урок, так понятно не многие умеют объяснять… помогло… Не могли бы дать ссылку на изначальный дистрибутив слайдера, который взяли за основу. Хочу кнопки-стрелочки налево направо (вперед, назад) (prev, next) сделать. Заранее спасибо. |
Михаил Базаров: 19.02.2015 13:42:47
|
Ольга: 27.03.2015 12:01:50
Спасибо большое за уроки, все очень просто и понятно!
Вопрос. Если мне нужно вывести слайдер не на главной странице, а на внутренних, ссылки на скрипты все равно писать в шаблоне сайта? Или для этих страниц делать отдельный шаблон? |
Михаил Базаров: 27.03.2015 14:07:54
|
Николай: 01.05.2015 16:53:00
Михаил, здравствуйте!
Огромное спасибо за уроки! Есть проблема по уроку: создал на главной включаемую область, далее все по уроку, в ней появились поля под акции, но ни текст, ни картинки не отображаются, при этом активны кнопки добавить акцию, изменить акцию, изменения вносятся и сохраняются. Что я делаю не так? Помогите пожалуйста! Заранее спасибо! |
Михаил Базаров: 01.05.2015 19:57:52
|
Иван: 31.05.2015 20:03:34
Добрый день.
У меня катастрофа)) Говорили же резервную копию делать почаще. Нахимичил я что то...сайт не открывается. ВОССТАНОВИЛ ИЗ РЕЗЕРВНОЙ КОПИИ. Копия после 3 урока сделана. Скажите у вас нет копии актуальной? |
Олег: 01.07.2015 10:01:34
Михаил, добрый день!
сайт http://uventann.ru/ Внизу для тренировки продублировал верхние новости, но... 1. При подключении скриптов через header.php слайдер не работает, при подключении в новом созданном компоненте - работает, но тормозит, из-за подзагрузки в самом компоненте, а не вверху страницы. Как проверить, выяснить что мешает работе слайдера при подключении скриптов в header.php? 2. Не работает ссылка на детальную страницу новости. При подведении мыши к картинке - внизу браузера не появляется ссылка, я так понимаю из-за того что ul.items со ссылками - display:none и сейчас работает сам скрипт который подставляет картинки. Проверил на сайте http://comp-assistant.ru/, там ссылки тоже не активны и нет возможности переключится на подробную страницу материала. Так в слайдере вообще можно сделать активными ссылки на подробное описание материала? И как это сделать? Спасибо. |
Михаил Базаров: 01.07.2015 11:07:23
2) Попробуйте ссылку поднять z-index-ом на самый верх по слайдеру |
Guest: 01.07.2015 23:41:46
Я так понимаю что слайдер вообще не заточен для нормальной работы
В таком виде в каком есть Слайды нужны прежде всего для перехода по ним на нужные материалы А здесь это вообще не предусмотрено Просто картинки с надписями зачем они не понятно "2) Попробуйте ссылку поднять z-index-ом на самый верх по слайдеру" Какую ссылку и в какой момент? Скрипт связан с инфоблоком, только картинками и текстовым описанием, но зачем это, повторюсь непонятно, какая то ущербность заложена в саму основу Спасибо за урок, но это не то |
Михаил Базаров: 02.07.2015 09:25:13
|
Игорь: 06.08.2015 09:46:06
Здравствуйте! Дошел до этого урока и сложилось очень позитивное мнение о вашем курсе/уроках. И как всегда есть одно НО( Возможно это субъективно, но мне очень сильно не хватает никак отдельных разъяснений по поводу дерева создаваемых каталогов, файлов. Как и почему они создаются именно там, а не здесь... Все по каплям есть в уроках, но в основном вы просто рассказываете куда надо пойти, чтобы выцепить нужный файл, а почему именно там он создается совсем не ясно. Без вашего "путеводителя" будет достаточно сложно без знаний про дерево. Может вы сможете найти время и отдельно сдеелать урок объясняющий как создается дерево сайта в битрикс? В любом случае спасибо за ваши уроки!
|
Александр: 17.08.2015 07:50:44
У меня после добавления компонента там, где должны выводиться новости слайдером белый экран просто. Что я сделал неправильно - не могу понять. Подскажите.
|
Александр: 17.08.2015 08:13:10
Решил проблему. Заключается она именно в размещении исходников скриптов, размещение которых в header ничего не дает
![]() |
Александр: 17.08.2015 09:21:32
Есть еще вопрос. Как создать ссылки в слайдере?
|
Tima: 08.10.2015 07:00:04
Создал слайдер. Но, почему-то, он работает только под админом. Скрипты не подключаются если пользователь не авторизован.
topi-topi.ru/about/12.php |
Михаил Базаров: 08.10.2015 10:59:44
|
Илья: 22.11.2015 22:29:04
Михаил здравствуйте. Есть слайдер, в Dreamweaver прекрасно работает, а в битриксе отказывается напрочь. Слайдер вставляется в абсолютно новый раздел для фотогалереи. Скрипты подключены, изображения тоже. Почему не работает ума не приложу...
|
гость: 22.04.2016 11:06:17
Здравствуйте, Михаил!
У меня возникла проблема со скриптом jquery-1.7.min.js. когда я его подключаю, то слайдер начинает работать, но тогда не работают вкладки (Табы) он начинает конфликтовать с другими скриптами, которые отвечают за отображение вкладок (табы). подскажите как можно исправить данную ошибку чтобы работал и слайдер и отображались вкладки (табы)? |
A A: 13.07.2016 14:26:25
Пожалуйста, расскажите, как сделать картинки слайдера ссылками на детальное описание новости!
|
Михаил Базаров: 13.07.2016 16:38:42
|
abask: 30.11.2017 17:58:26
Приветствую, добавил слайдер из новостей на главной странице, при нажатии на картинку слайдера не переходит по ссылке на новость. Как будто там нет <a>, хотя теги все есть.
Может в скриптах что-то подменяется? |
Владимир Норов: 04.04.2018 16:19:29
Здравствуйте! Сделал слайдер по вашему уроку, все хорошо, все показывается, но не могу вывести кнопки для перелистывания слайдов. В css строке .pagination, .prev, .next, .play, .paused, .progbar, .numStatus {display:none;} поменял none на block, вывелось количество слайдов, но кнопки так и не появились, подскажите пожалуйста как их вывести?
|
Antik: 18.04.2018 17:42:56
|
Виталик Лысый: 20.05.2018 00:49:57
Чот нифинты не кажет. Как только кладу стили в папку компонета - сразу же всё проподает, становиться пустая область .Стили убираю - появляются картинки в области. Чот хрень какая то помноженная на мистику. Итог : Спасибо конечно, но не чо не получается.
Чот у меня есть такие подозрения, что это связано чото со включаемой областью, список новостей там находиться. |
Виталик Лысый: 20.05.2018 01:32:06
|
Валерий Джгереная: 18.02.2019 10:16:40
Добрый день. Застрял на этом уроке, на части подключения инфоблока Акции в слайдер.
Выбираю все как Вы описали. Единственное на данный момент версия битрикса уже более новая. Проблема в том, что в таблице ничего не отображается, ни одна акция. У Вас на ровно на 6:00 времени видео в разделе слайдера уже появляется информация из Акции, а у меня там пусть. Смотрел через разработчика, там тоже пустота. |
Михаил Базаров: 18.02.2019 10:25:59
Где-то, какую-то мелочь пропустили. Попробуйте переключить шаблон на штатный, выведет ли хотя бы что-то? |
Валерий Джгереная: 18.02.2019 11:24:29
|
Валерий Джгереная: 18.02.2019 11:42:25
|
1С-Битрикс на моем Boosty канале
Блог-note: заметки разработчика
Получение доступа к железу устройства из Битрикс мобильное приложение
Документация к мобильному приложению 1С-Битрикс очень куцая. В основном описывает функционал добавляемый BXMobileApp. ...
Перенос Битрикс сайта с хостинга на хостинг, инструкция
Достаточно часто спрашивают как перенести сайт работающий на 1С Битрикс с одного хостинга на другой, как раз подвернулас...
Настройка push уведомлений через Firebase в приложении Apache Cordova
Задача: Apache Cordova предоставляет удобный способ разработки кроссплатформенных мобильных приложений. В данной статье ...
Ссылка и название раздела в списке новостей Битрикс
Если нужно вывести название раздела инфоблока в котором находится конкретный элемент/новость в компоненте "списк новосте...
Заполнить инфоблок брендов из свойства инфоблока с товарами
Задача: в интернет-магазине есть инфоблок с товарами, загружаемый из 1С, у которого заполнено свойство "Производите...
Привязка к разделам в компоненте "Добавления элементов пользователем"
В системе управления 1С Битрикс есть компонент "Форма добавления / редактирования" - который позволяет пользователям доб...
Удалить всех пользователей которые не делали заказов в магазине 1С-Битрикс
Задача: сайт проработал 7 лет и все время на нем была открытая регистрация, создано много мертвых учетных записей (б...
Time Capsule на Windows 10. Хранение бекапов Time Machine на компьютере с Windows 10
Заметку написал скорее для себя, что бы собрать все в одну кучу. Написана на базе нескольких разрозненных, по интернету,...
Добавление в избранное или отложенные, на AJAX из карточки товара
В этой заметке рассакажу как добавлять товары в "Отложенные", для иммитации функционала "Избранное". Для этого будем исп...