Помогите пожалуста. Как адаптировать slider под custom?

Vistem 14.06.2015 Все вопросы » Общие вопросы по вёрстке 2389

вопрос

Есть hrml код slidera. Нужна помощь с адаптацией под ДЛЕ

Планируется следующая конструкция:
1. Создана категория чисто под слайдер
2. В нее будут иногда добавлятся новости
3. Slider берет от туда последние 5 новостей и прокручивает их

Вот сам код:

Показать / Скрыть текст


<section id="slider"><!--slider-->
<div class="container">
<div class="row">
<div class="col-sm-12">
<div id="slider-carousel" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#slider-carousel" data-slide-to="0" class="active"></li>
        <li data-target="#slider-carousel" data-slide-to="1"></li>
        <li data-target="#slider-carousel" data-slide-to="2"></li>
    </ol>

<div class="carousel-inner">

<div class="item active">
<div class="col-sm-6">
    <h1>Заголовок 1</h1>
    <h2>Заголовок 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    <button type="button" class="btn btn-default get">Get it now</button>
</div>
<div class="col-sm-6">
    <img src="{THEME}/images/home/girl1.jpg" class="girl img-responsive" alt="" />
    <img src="{THEME}/images/home/pricing.png"  class="pricing" alt="" />
</div>
</div>

<div class="item">
<div class="col-sm-6">
    <h1>Заголовок 1</h1>
    <h2>Заголовок 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    <button type="button" class="btn btn-default get">Get it now</button>
</div>
<div class="col-sm-6">
    <img src="{THEME}/images/home/girl2.jpg" class="girl img-responsive" alt="" />
    <img src="{THEME}/images/home/pricing.png"  class="pricing" alt="" />
</div>
</div>
                            
<div class="item">
<div class="col-sm-6">
    <h1>Заголовок 1</h1>
    <h2>Заголовок 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
    <button type="button" class="btn btn-default get">Get it now</button>
</div>
<div class="col-sm-6">
    <img src="{THEME}/images/home/girl3.jpg" class="girl img-responsive" alt="" />
    <img src="{THEME}/images/home/pricing.png" class="pricing" alt="" />
</div>
</div>
</div>
                        
<a href="#slider-carousel" class="left control-carousel hidden-xs" data-slide="prev">
<i class="fa fa-angle-left"></i>
</a>

<a href="#slider-carousel" class="right control-carousel hidden-xs" data-slide="next">
<i class="fa fa-angle-right"></i>
</a>
</div>
                    
</div>
</div>
</div>
</section><!--/slider-->

Ответа пока нет

4 комментария

Гости

385

vadims - 2015-07-0314 июня 2015 00:29 - #45341

Советую проще конструкцию -

1. Ставите модуль BlockPro
2. Создаете доп. поле "Описание для слайдера"
3. Делаете вывод с модулем BlockPro из любой категории, только те новости у которых заполнено доп. поле.

В добавок можно поставить модуль добавление картинок и файлов в новость v4.0.3
И сделать в настройках выставить нужный размер, например 600x250, тогда вообще просто загрузили картинку и она уменьшилась под размер слайдера.

Юзер

Johny - 2015-07-0315 июня 2015 11:13 - #45354

Можно попробовать {custom category="id категории" day="2" limit="5" order="date"} Прям такого нет чтобы именно последние пять выводить стандартно. Но зная как часто заполняется категория, можно в кастоме выставить условия за сколько дней, если там всего 5 новостей в два дня бывает. В dle 10.5 еще добавили возможность использовать значения других полей как параметры тега custom. Ну а дальше привязать слайдер по инструкции от самого слайдера.

Юзер

1599

FastFud - 2015-07-0315 июня 2015 12:02 - #45356

Попробуйте так:

<section id="slider"><!--slider-->
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div id="slider-carousel" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <li data-target="#slider-carousel" data-slide-to="0" class="active"></li>
                        <li data-target="#slider-carousel" data-slide-to="1"></li>
                        <li data-target="#slider-carousel" data-slide-to="2"></li>
                    </ol>
                    <div class="carousel-inner">
                        {custom category="1-10" template="custom" aviable="global" navigation="no" from="0" limit="5" cache="yes"}
                    <a href="#slider-carousel" class="left control-carousel hidden-xs" data-slide="prev"><i class="fa fa-angle-left"></i></a>
                    <a href="#slider-carousel" class="right control-carousel hidden-xs" data-slide="next"><i class="fa fa-angle-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</section><!--/slider-->

В шаблоне который вы укажите в строке {custom ... вставьте это

<div class="item">
    <div class="col-sm-6">
        <h1>Заголовок 1</h1>
        <h2>Заголовок 2</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
        <button type="button" class="btn btn-default get">Get it now</button>
    </div>
    <div class="col-sm-6">
        <img src="{THEME}/images/home/girl1.jpg" class="girl img-responsive" alt="" />
        <img src="{THEME}/images/home/pricing.png"  class="pricing" alt="" />
    </div>
</div>