Форум программистов, компьютерный форум, киберфорум
Наши страницы
1С Битрикс
Войти
Регистрация
Восстановить пароль
 
yura0103
6 / 6 / 4
Регистрация: 20.10.2014
Сообщений: 323
1

Интеграция слайдера в Битрикс

10.01.2019, 18:29. Просмотров 304. Ответов 1
Метки нет (Все метки)

Здравствуйте, пытаюсь интегрировать слайдер в Битрикс. Почти получилось, но к сожалению результат не совсем тот как хотелось. Почему-то зараз выводиться по две картинки во вложении скриншот. В чем проблема не могу понять . помогите разобраться.
PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<?if(!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();
/** @var array $arParams */
/** @var array $arResult */
/** @global CMain $APPLICATION */
/** @global CUser $USER */
/** @global CDatabase $DB */
/** @var CBitrixComponentTemplate $this */
/** @var string $templateName */
/** @var string $templateFile */
/** @var string $templateFolder */
/** @var string $componentPath */
/** @var CBitrixComponent $component */
$this->setFrameMode(true);
?>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div id="captioned-gallery">
    <figure class="slider">
<?if($arParams["DISPLAY_TOP_PAGER"]):?>
    <?=$arResult["NAV_STRING"]?><br />
<?endif;?>
<?foreach($arResult["ITEMS"] as $arItem):?>
    <?
    $this->AddEditAction($arItem['ID'], $arItem['EDIT_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_EDIT"));
    $this->AddDeleteAction($arItem['ID'], $arItem['DELETE_LINK'], CIBlock::GetArrayByID($arItem["IBLOCK_ID"], "ELEMENT_DELETE"), array("CONFIRM" => GetMessage('CT_BNL_ELEMENT_DELETE_CONFIRM')));
    ?>
    <li id="<?=$this->GetEditAreaId($arItem['ID']);?>">
        <?if($arParams["DISPLAY_PICTURE"]!="N" && is_array($arItem["PREVIEW_PICTURE"])):?>
            <?if(!$arParams["HIDE_LINK_WHEN_NO_DETAIL"] || ($arItem["DETAIL_TEXT"] && $arResult["USER_HAVE_ACCESS"])):?>
                <a href="<?=$arItem["DETAIL_PAGE_URL"]?>"><img
                        class="preview_picture"
                        border="0"
                        src="<?=$arItem["PREVIEW_PICTURE"]["SRC"]?>"
                        width="<?=$arItem["PREVIEW_PICTURE"]["WIDTH"]?>"
                        height="<?=$arItem["PREVIEW_PICTURE"]["HEIGHT"]?>"
                        alt="<?=$arItem["PREVIEW_PICTURE"]["ALT"]?>"
                        title="<?=$arItem["PREVIEW_PICTURE"]["TITLE"]?>"
                        style="float:left"
                        /></a>
            
            <?endif;?>
        <?endif?>
    <figcaption><b><?echo $arItem["NAME"]?></b><br /></figcaption>
        
        
 
 
    </li>
<?endforeach;?>
</figure>
 
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
@import url(https://fonts.googleapis.com/css?family=Istok+Web);
@keyframes slidy {
0% { left: 0%; }
20% { left: 0%; }
25% { left: -100%; }
45% { left: -100%; }
50% { left: -200%; }
70% { left: -200%; }
75% { left: -300%; }
95% { left: -300%; }
100% { left: -400%; }
}
* {
  box-sizing: border-box;
}
body, figure { 
  margin: 0; 
  background: none;
  font-family: Istok Web, sans-serif;
  font-weight: 100;
 
}
div#captioned-gallery { 
  width: 100%; 
  overflow: hidden; 
    
}
figure.slider { 
  position: relative; 
  width: 500%;
  font-size: 0;
  animation: 30s slidy infinite; 
}
figure.slider li { 
  width: 20%; 
  height: auto;
  display: inline-block;  
  position: inherit; 
}
figure.slider img { 
    width: 100%; 
    height: auto;
}
figure.slider li figcaption { 
  position: absolute; 
  bottom: 0;
  background: rgba(0,0,0,0.4);
  color: #fff; 
  width: 100%;
  font-size: 2rem; 
  padding: .6rem; 
}
0
Миниатюры
Интеграция слайдера в Битрикс  
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.01.2019, 18:29
Ответы с готовыми решениями:

Интеграция слайдера в Битрикс
Не получается прикрутить слайдер к Битрикс. В интернете нашел ресурс, который может сгенерировать ...

Интеграция 1с: Битрикс и нетиповой конфигурации
Добрый день. Как связать 1с: Битрикс с чистой нетиповой конфигурацией 1с собственной разработки?...

Интеграция готового меню в шаблон Битрикс
Доброго времени суток! Я очень посредственно знакома с PHP и Битрикс, поэтому общаться со мной...

Интеграция собственного приложения на сайте Битрикс
Имеется WEB-приложение, полностью работающее по технологии AJAX. Серверная часть написана на...

Интеграция примера социальной сети из книги в Битрикс
В книге Робина Никсона, Создаем динамические веб-сайты с помощью PHP, MySQL и javascript, в 20...

1
voral
925 / 621 / 136
Регистрация: 16.03.2008
Сообщений: 2,946
11.01.2019, 00:18 2
Может мешают другие стили. либо у вас браузер не поддерживает.
Приведенный кусок, в отрыве от прочей верскти, работает.

PS только figure вы не правильно используете. По сути figure - это одна картинка в вашем случае, и к каждой подпись. т.е. вместо li. тыц

Добавлено через 2 минуты
Про figure точнее даже, пожалуй, по логике нужен один общий figure и вложенные, вместо li
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
11.01.2019, 00:18

Интеграция сайта 1С Битрикс + MS SQL 2008 с прочим ПО + MSSQL
Добрый день. Возникла необходимость опубликовать на сайте данные из ПО документооборота. ...

Битрикс. Интеграция 1С
http://********/V2VaXbgcxLkYmv в 1С установлен модуль обмена с корпоративным порталом. при попытке...

Интеграция 1С и Битрикс
Здравствуйте. Есть: 1с: Предприятие с конфигурацией, написанной нашими программистами. Сайт...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru