[Ищу] Слайд шоу для DLE

Уважаемые форумчане. Срочно нужен слайд шоу для DLE. Желательно для 10.1
Желательно, чтобы еще из админки редактировался... желательно, но не обязательно.

 

Спасибо. Воистину неоценимая помощь
Подожду еще вариантов.

 

делаете шаблон slider.tpl с кодом

Код:

<div class="slides">
    <ul> <!-- Слайды -->
        <li><img src="{THEME}/images/slider/1.jpg" alt="image01" />
            <div>Описание #1</div>
        </li>
        <li><img src="{THEME}/images/slider/2.jpg" alt="image02" />
            <div>Описание #2</div>
        </li>
        <li><img src="{THEME}/images/slider/3.jpg" alt="image03" />
            <div>Описание #3</div>
        </li>
        <li><img src="{THEME}/images/slider/2.jpg" alt="image03" />
            <div>Описание #4</div>
        </li>
       
    </ul>
</div>

в стили шаблона добавляете

Код:

/* Slider */
.slides {
    height:300px;
    margin-bottom: 10px;
    overflow:hidden;
    position:relative;
    width: 1000px;
}
.slides ul {
    list-style:none;
    position:relative;
}

/* Кадры анимации #anim_slides */
@-webkit-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}
@-moz-keyframes anim_slides {
    0% {
        opacity:0;
    }
    6% {
        opacity:1;
    }
    24% {
        opacity:1;
    }
    30% {
        opacity:0;
    }
    100% {
        opacity:0;
    }
}

.slides ul li {
    opacity:0;
    position:absolute;
    top:0;

    /* анимация css3 */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* Задержки css3 */
.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
    -webkit-animation-delay: 6.0s;
    -moz-animation-delay: 6.0s;
}
.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
    -webkit-animation-delay: 12.0s;
    -moz-animation-delay: 12.0s;
}
.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
    -webkit-animation-delay: 18.0s;
    -moz-animation-delay: 18.0s;
}
.slides ul li img {
    display:block;
}

/* Кадры анимации #anim_titles */
@-webkit-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}
@-moz-keyframes anim_titles {
    0% {
        left:100%;
        opacity:0;
    }
    5% {
        left:10%;
        opacity:1;
    }
    20% {
        left:10%;
        opacity:1;
    }
    25% {
        left:100%;
        opacity:0;
    }
    100% {
        left:100%;
        opacity:0;
    }
}

.slides ul li div {
    background-color: rgba(252, 8, 8, 0.48);
    color:#FFFFFF;
    font-size:26px;
    margin:0 auto;
    padding:20px;
    position:absolute;
    top: 200px;
    width: 350px;

    /* Анимация css3 */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 24.0s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 24.0s;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

в шаблоне в нужном месте вставляете {include file="slider.tpl"}
всё, и никаких джава и прочей х***ни

 

Ну это выводит картинки из определенного каталога, а если нужно рандомно из категорий или только к примеру 10 последних добавленных новостей?

 

тогда так.. в файл main.tpl в нужное место добавить {custom category="1" template="slider" aviable="main" from="0" limit="10" cache="no"}
и создать шаблон slider.tpl с кодом

Код:

<div class="slider-item">
    <img src="{image-1}" alt="{title}" />
    <div class="slider-item-content">
        <h2>{title}</h2>
        <div class="slider-item-text">
            {short-story limit="250"}
        </div>
        <a href="{full-link}" class="slider-more">подробнее</a> <div class="slider-price">[xfvalue_sale]</div>
    </div>
</div>

(для примера показал, как вывести описание и дополнительное поле)

ну и собственно запилить стили под слайдер...
У себя в шаблоне слайдера сделал так <img src="{image-2}" alt="{title}" /> , что бы выводил вторую картинку, так как первая идет в короткую новость превьюшкой и сжимается, до определенных размеров, а вторую картинку запихиваю в самый конец краткой новости не сжатой, что бы потом на слайдере не растягивало....ну или делаю ей размер по ширине слайдера

 

тоже если я правильно понял, то это берется из 1 категории а если категорий 20 штук, то как тогда через , указывать?

Код:

{custom category="1,2,3" template="slider" aviable="main" from="0" limit="10" cache="no"}

 

да, через запятую.. или можно попробывать допустим 1-20.. хотя врядли

 

aleksin74, у меня аналогичная проблема с dle 10.1 сделал так как вы написали создал slider.tpl так же добавил стили, в нужном месте вставил
{custom category="1,2,3" template="slider" aviable="main" from="0" limit="10" cache="no"}
вот как отображается на моем учебном сайте , подскажите пожалуйста что не так сделал? Заранее спасибо!

 

попробуйте вывести так {include file="slider.tpl"} что покажет

 

aleksin74,

вывел

 

я понял вас... во первых у вас не подключен джава для самого слайдера, во вторых уберите из шаблона слайдера <div class="slider-price">[xfvalue_sale]</div>

 

а как его подключить ?
в main.tpl - есть такие строчки
<script type="text/javascript" src="{THEME}/js/shareTT.js"></script>
<script type="text/javascript" src="{THEME}/js/active.js"></script>
- это не то?

 

код 100% рабочий...

--- Добавлено, 4 фев 2015 ---

http://www.rudebox.org.ua/ почитайте

 

хмм.. нашел такой пост - http://www.rudebox.org.ua/adaptive-fullscreen-slider-to-site/
то ли это?

 

вот тут http://www.rudebox.org.ua/?s=слайдер много слайдеров

 

я извиняюсь за может и тупые вопросы)) но что то я не могу понять , к примеру я выбрал этот слайд , но как из него сделать что бы новость выбиралась методом - {custom category="1,2,3" template="slider" aviable="main" from="0" limit="10" cache="no"} совместно с заголовком-ссылкой на полную новость

 

код слайдера такой...
<div id="slideshow">

<ul class="slides">
<li><img src="img/photos/1.jpg" width="620" height="320" alt="Marsa Alam underawter close up" /></li>
<li><img src="img/photos/2.jpg" width="620" height="320" alt="Turrimetta Beach - Dawn" /></li>
<li><img src="img/photos/3.jpg" width="620" height="320" alt="Power Station" /></li>
<li><img src="img/photos/4.jpg" width="620" height="320" alt="Colors of Nature" /></li>
</ul>

<span class="arrow previous"></span>
<span class="arrow next"></span>
</div>

вместо него сделать что типа этого...
<div class="slider-item">
<img src="{image-1}" alt="{title}" />
<div class="slider-item-content">
<h2>{title}</h2>
<div class="slider-item-text">
{short-story limit="250"}
</div>
<a href="{full-link}" class="slider-more">подробнее</a>
</div>
</div>

могу реализовать... но сам понимаешь, не безвозмездно...

 

Добрый вечер

ДЕМО http://tympanus.net/Development/Slicebox/index4.html

Скачать http://tympanus.net/codrops/2012/10/22/slicebox-revised/