Информация Слайдер в DataLife Engine без модов

[Горбушка]

Многие из Вас знаю о существовании в DLE тега {custom}, но почти никто его не использует, а зря. Сегодня я расскажу как с помощью этого тега и правки лишь шаблона сделать полноценный слайдер.

И так, первым делом определимся с тем, что нам понадобится. Нам нужен JS-код слайдера, шаблон 1 слайда, шаблон main.tpl и настройки для тега {custom}. Начнём по порядку.

Выбираем слайдер. Особых требований к нему нет, мне понравился smSlider. Сам JS-код слайдера и CSS к нему можно скачать с GitHub (Для просмотра ссылки Войди или Зарегистрируйся). Вставляется на сайт он очень просто, приступаем.

Для начала берём jquery.smslider.min.js из архива и загружаем в папку /templates/ШАБЛОН/js/, файл smslider.css в папку /templates/ШАБЛОН/style/. Картинку sm_arr.png заливаем в /templates/ШАБЛОН/images/. В шаблон main.tpl перед </head> добавляем:

<link type="text/css" rel="stylesheet" href="{THEME}/style/smslider.css" />
<script type="text/javascript" src="{THEME}/js/jquery.smslider.min.js"></script>

В нужное место вставляем код:

<div id="sm_slider">
    <ul>
        {custom template="slide"}
    </ul>
</div>

В конце шаблона main.tpl добавляем код, запускающий слайдер:

<script type="text/javascript">
    $(document).ready(function(){
        $('#sm_slider').smSlider()
    })
</script>

Теперь в smslider.css правим путь до картинки на ../images/ (Да, 2 точки, это не опечатка).

Отлично, слайдер установлен, но он не работает – у него нет ни единого слайда. Этим мы сейчас и займёмся. Создадим шаблон slide.tpl и запишем туда код:

[image-1]<li><a href="{full-link}"><img src="{image-1}" alt="{title}" /></li>[/image-1]

Теперь поговорим о том, что мы сделали. В теге {custom} мы указали, что необходимо работать с шаблоном slide.tpl. Сам slide.tpl выводит 1 картинку из новости, если она существует, делая её ссылкой на новость.

Вот и всё. Никакие сложные изменения в движке не требуются. Вы так же можете добавить кэширование, вывод только из 1 категории и т.д. Можно поменять размер картинки (сейчас он явно слишком большой для сайта). Так же можно выводить краткий текст из статьи. Ничего сложного в этом нет.

Спасибо за внимание. Что у нас получилось можно посмотреть тут: Для просмотра ссылки Войди или Зарегистрируйся

Источник: Для просмотра ссылки Войди или Зарегистрируйся
Автор: Я, Горбушка
Версия ДЛЕ: 9.8
Демо: Для просмотра ссылки Войди или Зарегистрируйся
Цена: Бесплатно

 

[funnywheel]

Натолкните на здравую мысль пожалуйста. Делаю шаблон на bootstrap'e, хочу вывести через {custom} записи из определенной категории, соль ситуации - class="active", который назначается отображаемому слайду, выглядит у меня все вот так:

...
<div id="blogCarousel" class="carousel slide">
    <div class="carousel-inner">
        {custom category="3" limit="5" template="custom_news"}
    </div>
</div>
...

custom_news.tpl:

<div class="item">
  <a href="{full-link}">
  <img src=
     [xfgiven_customnews_poster]"[xfvalue_customnews_poster]"[/xfgiven_customnews_poster]
     [xfnotgiven_customnews_poster]"{THEME}/img/customnews.png"[/xfnotgiven_customnews_poster]
  alt="" class="align-left blog-thumb-preview" />
  </a>
   <div class="post-info clearfix">
  <h4><a href="{full-link}">{title}</a></h4>
     <ul class="blog-details-preview">
       <li><i class="icon-calendar"></i><strong>Дата:</strong> {date}<li>
      <li><i class="icon-user"></i><strong>Добавил:</strong> {author}<li>
      <li><i class="icon-comment"></i><strong>Комментариев:</strong> {comments-num}<li>
     </ul>
   </div>
  <p class="blog-summary">{short-story} <a href="{full-link}">Подробнее</a><p>
</div>

задача - в custom_news.tpl для <div class="item"> первому элементу поставить <div class="item active">, ибо при загрузке страницы слайд не отображается, пока вручную не кликнешь по кнопочке "следующий"

В правилах хорошего тона: DLE 10.0, Bootstrap 2.1.1

 

[Горбушка]

Плохой вариант:

<div id="blogCarousel" class="carousel slide">
    <div class="carousel-inner">
        {custom category="3" limit="1" template="custom_news_activ"}
        {custom category="3" limit="4" from="2" template="custom_news"}
    </div>
</div>

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

 

[funnywheel]

Плохой вариант отрабатывает, спасибо.
Пока оставлю его, т.к. в JS я весьма слаб, но попытаюсь реализовать по человечески.

 

[dalurist]

"Теперь в smslider.css правим путь до картинки на ../images/ (Да, 2 точки, это не опечатка)."
В файле нет пути до картинки.
Тема закрыта, пишу здесь...

 

[killoff]

В файле нет пути до картинки.

Обрати внимание, что тема была создана в 2013 году! Исходники слайдера на гитхабе, и вероятнее всего слайдер просто обновлен был уже несколько раз.


Следуй остальной инструкции и всё будет работать если сделать правильно.

 

[killoff]

Тему открыл только для обсуждения и помощи в настройке слайдеров через custom! Поиск слайдеров и другие вопросы, не касающиеся помощи в настройке слайдера - ищите и пишите/задавайте в соответствующих разделах.

 

[dalurist]

Предложенный механизм замечательно работает, однако в стилях слайдера положение контрола навигации и контролов переходов на следующий слайд (точки внизу и стрелки перехода) прописаны для полностраничного слайдера и располагаются по краям экрана браузера:
.

sm_prev,
.sm_next {
  width: 25px;
  height: 25px;
  margin: -20px 0 0 0;
  cursor: pointer;
  display: block;
  font-style: normal;
  opacity: .3;
  position: absolute;
  top: 50%;
  z-index: 999;
  border-style: solid;
  border-color: #4e4e4e;
  border-width: 0px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);

Как сделать так, чтобы контролы располагались в блоке куда помещен слайдер?

 

[killoff]

Как сделать так, чтобы контролы располагались в блоке куда помещен слайдер?

1. Добавь код выше упомянутый в CODE.
2. Нужно видеть сайт чтоб подсказать какие стили подправить. То что тут выложено абсолютно ни о чем не говорит.

 

[dalurist]

Нужно видеть сайт чтоб подсказать какие стили подправить

Да в любом шаблоне контролы по бокам окна браузера