Видеоурок №8: создание слайдера

Версия 2013 Версия 2017

 20991 |  64

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

Список всех серий Скачать видео с ЯДиска. Формат .mp4

Предыдущее видео Следующее видео

Уважаемый читатель! В связи с участившимся спамом в комментариях, возможность писать доступна только для зарегистрированных пользователей

Зарегистрироваться Войти

Напомнить пароль

Быстрая регистрация через соц.сеть:

Сергей 20.01.2014
Добрый день, Михаил! Прежде всего спасибо за Ваши уроки! Очень полезная вещь! Делаю сайт по Вашему уроку но многое не получается. Вот например http://www.familymania.ru/, слайдер сделать из картинок никак не выходит. Подскажите пожалуйста, как можно выводить картинки в слайдер не из раздела "Акции", а, например, из отдельной папки. Если же такой возможности нет, то как убрать слайдер (какие папки и файлы удалить из структуры сайта) и сделать простой статичный баннер на главной? Заранее 1000 благодарностей! Сергей

Михаил Базаров 20.01.2014

Цитата

Сергей пишет:
Добрый день, Михаил!
Прежде всего спасибо за Ваши уроки! Очень полезная вещь!
Делаю сайт по Вашему уроку но многое не получается. Вот например http://www.familymania.ru/ , слайдер сделать из картинок никак не выходит. Подскажите пожалуйста, как можно выводить картинки в слайдер не из раздела "Акции", а, например, из отдельной папки. Если же такой возможности нет, то как убрать слайдер (какие папки и файлы удалить из структуры сайта) и сделать простой статичный баннер на главной?

Заранее 1000 благодарностей!
Сергей

Просто в эту включаемую область, вместо компанента список новостей вставьте

Код
<img src="путь к картинке на сайте/картинка.jpg" />

Гость сайта 17.02.2014
Здравствуйте. Столкнулся со следующей проблемой: В слайдер выводятся картинки прямо из анонса(если мы выставили обрезать их ширину с обрезанной шириной они и выводятся) в следствие чего, картинка занимает очень мало места. На вашем сайте asistant.camouf.ru картинка явно выводится не из анонса и не из детального просмотра, так как если бы они были взять оттуда, то занимали бы слишком мало места. Как решить эту проблему? Не подключать же для каждого анонса дополнительную картинку правильного разрешения.

Михаил Базаров 17.02.2014

Цитата

Гость сайта пишет:
Здравствуйте.

Столкнулся со следующей проблемой: В слайдер выводятся картинки прямо из анонса(если мы выставили обрезать их ширину с обрезанной шириной они и выводятся) в следствие чего, картинка занимает очень мало места. На вашем сайте asistant.camouf.ru картинка явно выводится не из анонса и не из детального просмотра, так как если бы они были взять оттуда, то занимали бы слишком мало места. Как решить эту проблему? Не подключать же для каждого анонса дополнительную картинку правильного разрешения.

Нет, у меня там выводится картинка анонса. То есть я изначально загрузил нужного мне, для слайдера, размера. А в разделе акций "зажал" их HTML версткой, указав ширину width="100%". Допускаю, что это не очень оптимальный ход, с точки зрения веса страницы с анонсами, но конкретно у меня получилась разница в 35Кб.

Как вариант можете воспользоваться ResizeImageGet-ом

Код

<? 
      $renderImage = CFile::ResizeImageGet($arItem["PREVIEW_PICTURE"], Array("width" => НОВАЯ_ШИРИНА, "height" => НОВАЯ_ВЫСОТА), BX_RESIZE_IMAGE_EXACT, false); 
      echo '<img alt="'.$arItem["NAME"].'" src="'.$renderImage["src"].'" />'; 
?>

и уменьшить разиер картинки анонса до оптимального.

Александр 27.02.2014
Добрый день. делаю слайдер только на главной в материал добавляю код слайдера, картинки всегда будут одни и те же поэтому указал к ним путь, скопировал все стили в главный шаблон, все картинки сразу пропали, скачал все скрипты, подключил доступ к папке со скриптами 777, такое ощущение что не заводится jquery. сайт bretonbasset.ru могут ли быть какие нить конфликты?!

Михаил Базаров 27.02.2014

Цитата

Александр пишет:
Добрый день.
делаю слайдер только на главной в материал добавляю код слайдера, картинки всегда будут одни и те же поэтому указал к ним путь, скопировал все стили в главный шаблон, все картинки сразу пропали, скачал все скрипты, подключил доступ к папке со скриптами 777, такое ощущение что не заводится jquery. сайт bretonbasset.ru могут ли быть какие нить конфликты?!

У вас jquery не подключен http://bretonbasset.ru/bitrix/templates/bassetjs/jquery-1.7.min.js - выдает ошибку. Попробуйте подключить его из ядра битрикс.

Код
<? CJSCore::Init(array("jquery")); ?>

Гость сайта 27.02.2014

Цитата

Михаил Базаров пишет:

Цитата

Код
<? CJSCore::Init(array("jquery")); ?>

попробывал не помогает, где еще можно поискать возможную проблему?

Михаил Базаров 28.02.2014

Цитата

Гость сайта пишет:

Цитата

Код
<? CJSCore::Init(array("jquery")); ?>

попробывал не помогает, где еще можно поискать возможную проблему?

По идее вам очевидно говорит на ошибку в первой строке файла /var/www/u7619407/data/www/bretonbasset.ru/index_inc.php так что ищите там

Константин 20.03.2014
Здравствуйте, по вашему уроку сделал слайдер на том шаблоне что был в битриксе, но все остальные уроки не смотрел некогда( суть вопроса в следующем: слайдер меняет картинку, после эффекта "движение картинки" останавливается как будто не зациклен, не подскажите в чем может быть проблема?

Михаил Базаров 20.03.2014

Цитата
Константин пишет: ...слайдер меняет картинку, после эффекта "движение картинки" останавливается как будто не зациклен, не подскажите в чем может быть проблема?

Наверное где-то в верстке ошиблись, менее вероятно какой-то из скриптов не подключили.

Константин 10.04.2014

Цитата

Михаил Базаров пишет:

Цитата
Константин пишет: ...слайдер меняет картинку, после эффекта "движение картинки" останавливается как будто не зациклен, не подскажите в чем может быть проблема?

Наверное где-то в верстке ошиблись, менее вероятно какой-то из скриптов не подключили.

Полностью сверстал заново дизайн, по вашим урокам, слайдер теперь работает, большое спасибо

Александр 15.04.2014

Михаил, может сталкивались - слайдер (скаченный у вас) нормально работает в хроме, криво в опере, в мозилле и IE вообще не работает, может в стили что то дописать надо?

Код

#slide { height:300px; width:610px; position:relative; overflow:hidden; margin-left:5px;}
.slider {
    width:610px;
}
.items { display:none;
}
.pagination, .prev, .next, .play, .paused, .progbar, .numStatus {display:none;}
.banner{width:260px;
            overflow:hidden;
            position:absolute;
           margin-top:25px;
           background: rgba(0, 0, 0, 0.8);
           border-radius:10px 0 0 10px;
           -moz-border-radius:10px 0 0 10px;
           -webkit-border-radius:10px 0 0 10px;
           padding:10px;
}
.banner span { display:block;
 }
slide a {color: #ffffff;
          text-decoration: underline;
          font-family: Arial, Helvetica, sans-serif;
          font-size: 0.8em;
}

slide a:hover {color: #ffffff;
                    text-decoration:none;
                    font-family: Arial, Helvetica, sans-serif;
                    font-size: 0.8em;
}

Заранее благодарен.

Михаил Базаров 15.04.2014

Цитата

Александр пишет:
Михаил, может сталкивались - слайдер (скаченный у вас) нормально работает в хроме, криво в опере, в мозилле и IE вообще не работает, может в стили что то дописать надо?

Код
#slide { height:300px; width:610px; position:relative; overflow:hidden; margin-left:5px;} .slider { width:610px; } .items { display:none; } .........

Заранее благодарен.

Лично у меня во всех все нормально. Допускаю что в старых IE- ниже девятого, может не работать плавное движение в слайдере. Тут можно, именно для них (старых Ишаков) написать отдельный файл стилей, или вообще слайдер не показыать, подменить на статичную картинку, например.

Андрей 08.05.2014
Здравствуйте. Подскажите пожалуйста в чем причина ,куда смотреть. Делаю слайдер с акциями. На странице, где должен быть слайдер при наведении мышки видно что есть включаемая область, есть bitrix:news.list , только место это пустое. Что делаю не так? Большое спасибо!

Андрей 09.05.2014
Здравствуйте. Пожалуйста еще один раз о маленьких изображениях в слайде. Вы писали: Нет, у меня там выводится картинка анонса. То есть я изначально загрузил нужного мне, для слайдера, размера. А в разделе акций "зажал" их HTML версткой, указав ширину width="100%". Допускаю, что это не очень оптимальный ход, с точки зрения веса страницы с анонсами, но конкретно у меня получилась разница в 35Кб. Куда вставляется width="100%", и / или код ResizeImageGet ? Спасибо!

Михаил Базаров 09.05.2014

Цитата

Андрей пишет:
Здравствуйте. Подскажите пожалуйста в чем причина ,куда смотреть. Делаю слайдер с акциями. На странице, где должен быть слайдер при наведении мышки видно что есть включаемая область, есть bitrix:news.list , только место это пустое. Что делаю не так? Большое спасибо!

Быть может не указали компаненту из какого инфоблока брать элементв? Гадать можно долго, лучше продемонстрируйте

Михаил Базаров 09.05.2014

Цитата
Андрей пишет: Здравствуйте. Пожалуйста еще один раз о маленьких изображениях в слайде. Куда вставляется width="100%", и / или код ResizeImageGet ? Спасибо!

Просто к параметру вывода изображения анонса

Код
<img src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>" width="100%" alt="<?=$arItem["NAME"]?>" />

Андрей 13.05.2014
Добрый вечер. На главной странице хочу поставить второй слайдер. Есть свой отдельный информационный блок, свой шаблон компонента. Но при редактировании одного слайдера в style.css это сказывается и на другом слайдере. В чем может быть проблема? Спасибо!

Михаил Базаров 14.05.2014

Цитата

Андрей пишет:
Добрый вечер. На главной странице хочу поставить второй слайдер. Есть свой отдельный информационный блок, свой шаблон компонента. Но при редактировании одного слайдера в style.css это сказывается и на другом слайдере. В чем может быть проблема? Спасибо!

Дело в style.css а точнее в селекторах, у каждого слайдер они должны быть уникальными- если слайдеры отличаются

Андрей 15.05.2014
Добрый день. После замены селекторов слайдеры управляются отдельно, только второй не выводится. Во втором слайдере заменил селекторы на: #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 . Если их требуется менять то где их найти? Большое спасибо.

Простой сайт на битрикс:

Здесь выложен видеоурок по созданию сайта на системе управления 1С-Битрикс. Поэтапно создан сайт для вымышленной фирмы "Компьютерная техподержка".

В процессе создания сайта используются только штатные возможности битрикс "из коробки".

Исключительно возможностями битрикс создается и наполняется сайт.

Образец: comp-assistant.ru Плейлист на Плейлист на youtube

Сейчас на сайте:

Станислав Мишин, и 5 гостей

Из стран: 3 чел. 1 чел. 1 чел. 1 чел.

Подписывайтесь на youtube канал, что-бы быть в курсе

Случайные заметки из блога

Отключить поиск по описаниям товаров в Битрикс
Иногда, нужно отключить поиск по описаниям анонсов и детальному...

Использование название раздела новостей в Title битрикс
Если нужно вывести название раздела инфоблока новостей в Title,...

Цвета торговых предложений из Highload инфоблоков в списке товаров
Подвернулся на доработку очень старый сайт, работал еще на 11-ой...

Вывести картинку связанного элемента в каталоге битрикс
Иногда, например в интернет-магазине созданном на битрикс, нужно...

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

Видеоурок | создание сайта на Битрикс
В данной записке выкладывается видеоурок по созданию сайта на...