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

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

вопрос

Есть 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>

Юзер

Vistem - 2015-07-0318 июня 2015 22:50 - #45479

Спасибо попробую сейчас. Только с командировки вернулся

Похожие вопросы

DLE конфликт mootools с { headers }

12.02.2014 studmegarefkz Общие вопросы по вёрстке

Помогите исправить верстку слайдера

10.06.2014 logru Общие вопросы по вёрстке, Стили (CSS)

Нужна помощь с формой и добавления элементов

26.06.2014 aqps Общие вопросы по вёрстке

Logo Slider

24.08.2014 buxodw Общие вопросы по вёрстке

Как возобновить работу карусели на сайте?

12.03.2015 gulllak Общие вопросы по вёрстке, jQuery

Как в разных категориях сайта сделать разное оформление?

06.06.2015 Axel Общие вопросы по вёрстке, Шаблоны (TPL)

Почему при верстке шаблона не работает JS?

03.07.2015 Arsen Общие вопросы по вёрстке, Шаблоны (TPL), jQuery

Последние события

mondolfo | Как вывесит в comments.tpl картинку с но ... ⁷

mondolfo
Как вывесит в comments.tpl картинку с новости?
Вчера, 23:42

кто-нибудь решил эту?
Darkzone | Выбор категории для доп. поля? ⁴

Darkzone
Выбор категории для доп. поля?
22-11-2024, 17:08

Разъясните как вытащить id?
lutskboy | Вытащить все данные из определенного доп ... ¹

lutskboy
Вытащить все данные из определенного доп поля?
22-11-2024, 16:17

в adminer можно.

lutskboy | Выбор категории для доп. поля? ⁴

lutskboy
Выбор категории для доп. поля?
22-11-2024, 16:14

выбрать все кроме такого нет. можно с бд достать все ид через запятую и вставить в xfields.txt
js скрипт можно написать


<script>
    window.addEventListener('load', ()=> {
        $('#category').on('change', function() {
            var value = $(this).val();
            if ($.isArray(value)) {
            	ShowOrHideEx("xfield_holder_year", jQuery.inArray('1', value) != -1 || jQuery.inArray('2', value) != -1 );
            } else {
            	ShowOrHideEx("xfield_holder_year", value == 1 || value==2);
            }
        })
    });
</script>
year доп поле . 1 и 2 катег

Darkzone | Выбор категории для доп. поля? ⁴

Darkzone
Выбор категории для доп. поля?
22-11-2024, 14:39

Смотрите, Нужно чтоб обязательное к заполнению доп. поле при добавлении новости, выводилось во всех категориях, кроме двух. Так как количество категорий довольно большое, есть ли способ, не тыкать каждую категорию в которой будет отображаться доп.поле. Надеюсь я смог разъяснить.
lutskboy | Выбор категории для доп. поля? ⁴

lutskboy
Выбор категории для доп. поля?
22-11-2024, 13:52

где выводить? админка или сайт
TeraMoune | Как отключить миниатюры стандартной гале ...
TeraMoune
Как отключить миниатюры стандартной галереи Fancybox?
21-11-2024, 06:00
В файле engine/classes/fancybox/fancybox.js искать нужную инициализацию и добавлять соответствующие параметры, весь список параметров и их описание можно найти на этой странице https://fancyapps.com/fancybox/api/options/

Например: параметр Thumbs: false отключает миниатюры.
```
Fancybox.bind("[data-highslide]", {
	groupAttr: 'data-highslide',
	idle:2000,
	Thumbs: false,
	caption: (fancybox, slide) => {
		if(  slide.thumbEl && slide.thumbEl.alt ) {
			return slide.thumbEl.alt
		}
	}
});
```
derebas | Как реализовать шифрование трафика? ³

derebas
Как реализовать шифрование трафика?
18-11-2024, 16:52

Ну в теории, можно использовать src на site.com разместить прокси на site2.com а выдавать видео с site3.com, при этом прямой доступ на site3.com закрыть, отдача будет только если запрос с site2.com, таким образом палится только site2.com, НО источник потокового видео, все равно можно увидеть если захотеть, а ссылки, ну купить домен dsac-43efew-csdds.uz как пример
Gordi | Перенёс сайт - не работают кнопки, не от ... ⁸

Gordi
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:46

я уже делал. Пользователь 1000 (это я так понимаю root) и chmod 777
Так и было...
lutskboy | Перенёс сайт - не работают кнопки, не от ... ⁸

lutskboy
Перенёс сайт - не работают кнопки, не отображаются новости. Как вылечить?
18-11-2024, 14:39

чтоб не удалять выстави права и пользователя какие там идут на файлы. .

наверх