Перейти к публикации

Bootstrap слайдер в дефолтном шаблоне и тег {custom}


Рекомендованные сообщения

Всем привет, пытають разобратся с дефолтным шаблоном Green, а точнее с его bootstrap каруселью, не могу понять как выводить новости с определенных категорий,

имеем код в файле carousel.tpl, который отвечает за вывод 3х слайдов:

 

<div class="carousel-inner" role="listbox">
        <div class="item active">
            <div class="carousel-caption">
                <div class="carousel-caption_in">
                    <div class="title">DataLife Engine</div>
                    <div class="text">Собственный сайт без компромиссов!</div>
                </div>
            </div>
            <div class="cover" style="background-image: url({THEME}/images/tmp/slide_1.jpg);"></div>
        </div>
        <div class="item">
            <div class="carousel-caption">
                <div class="carousel-caption_in">
                    <div class="title">DataLife Engine</div>
                    <div class="text">Собственный сайт без компромиссов!</div>
                </div>
            </div>
            <div class="cover" style="background-image: url({THEME}/images/tmp/slide_2.jpg);"></div>
        </div>
        <div class="item">
            <div class="carousel-caption">
                <div class="carousel-caption_in">
                    <div class="title">DataLife Engine</div>
                    <div class="text">Собственный сайт без компромиссов!</div>
                </div>
            </div>
            <div class="cover" style="background-image: url({THEME}/images/tmp/slide_3.jpg);"></div>
        </div>
    </div>

 

в файле main.tpl этот слайдер подключается {include file="modules/carousel.tpl"} 

Не могу сообразить, как вывести в слайдер  новости с определенной категории через тег {custom}, буду признателен за любую помощь

Изменено пользователем Mohmal
Ссылка на сообщение
Поделиться на других сайтах
7 часов назад, Mohmal сказал:

признателен за любую помощь

не вопрос, НО

Цитата

Правила форума

Внимание !!!

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

 

1. Если ваша тема начинается с вопроса и вам нужна какая либо помощь, то в самой теме в обязательном порядке вы должны указывать ссылку на ваш сайт. Если ваш сайт находится в локальной сети и вы не можете предоставить ссылку, или вы не хотите публиковать открытой ссылки на ваш сайт, то отправляйте персональное сообщение с вопросом в службу поддержки непосредственно с сайта http://dle-news.ru/, вам ответят на ваш вопрос в персональном порядке, в случае если пользуетесь платной версией скрипта и обладаете лицензией на скрипт. Если вы пользуетесь демоверсией, то вам необходимо разместить сайт в сети интернет, и только потом обращаться за помощью. По находящимся на локальных компьютерах демоверсиям никакой помощи и поддержки на форуме не оказывается. Если вы не указали сайт, то ваша тема будет закрыта, а аккаунт на форуме заблокирован.

 

Ссылка на сообщение
Поделиться на других сайтах
7 hours ago, odys said:

не вопрос, НО

 

Не вопрос, но я уже разобрался с вопросом, напишу, может кому пригодится:

Создаем в папке /modules файл slider.tpl , в него выносим часть из carousel.tpl 

Файл slider.tpl

<div class="item">
            <div class="carousel-caption">
                <div class="carousel-caption_in">
                    <div class="title">[full-link]{title}[/full-link]</div>
                                        <b class="date"><time datetime="{date=Y-m-d}">{date=d/m}</time></b>
                    <div class="text">{short-story limit="40"}</div>
                </div>
            </div>
            <div class="cover" style="background-image: url('[xfvalue_image_url_image]');"></div>
        </div>

В файле carousel.tpl удаляем два оставшихся блока item и вставляем скрипт,

который добавляет active к класу item в slider.tpl, там же прописываем тег {custom} 

Файл carousel.tpl

[available=main]
<!-- Карусель (http://getbootstrap.com/javascript/#carousel) -->
<div id="carousel-main" class="carousel slide" data-ride="carousel">
    <a class="slide_prev" href="#carousel-main" role="button" data-slide="prev" title="Назад">
        <span>
            <svg class="icon n_ico icon-left"><use xlink:href="#icon-left"></use></svg>
            <svg class="icon m_ico icon-arrow_left"><use xlink:href="#icon-arrow_left"></use></svg>
        </span>
    </a>
    <a class="slide_next" href="#carousel-main" role="button" data-slide="next" title="Вперед">
        <span>
            <svg class="icon n_ico icon-right"><use xlink:href="#icon-right"></use></svg>
            <svg class="icon m_ico icon-arrow_right"><use xlink:href="#icon-arrow_right"></use></svg>
        </span>
    </a>
    <div class="carousel-inner" role="listbox">
        
        {custom template="modules/slider" category="1-5" limit="3"}
    </div>
</div>
<script>
$("div.carousel-inner").find("div.item").first().addClass("active")
</script>
<!-- / Карусель -->
[/available]

 

Ссылка на сообщение
Поделиться на других сайтах
  • 1 месяц спустя...

Да, прикольная задумка.

 

Попробовал всё сделать как указано выше, заголовок, дата и описание выводится, но фоновой картинки нет.

Что то пока не соображу почему она не выводится.

Может кто подскажет?

 

И ещё вопрос: как можно увеличить интервал между показами слайдеров (новостей)?

Ссылка на сообщение
Поделиться на других сайтах

Присоединяйтесь к обсуждению

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

Гость
Ответить в тему...

×   Вставлено в виде отформатированного текста.   Вставить в виде обычного текста

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Отобразить как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Вы не можете вставить изображения напрямую. Загрузите или вставьте изображения по ссылке.

×
×
  • Создать...