Оффтоп Модуль слайд-шоу dle 10.1

[nadoname]

Ищу модуль слайд-шоу для dle 10.1.Конкретно для dle 10.1 нашел только один модуль(код) которые не требует подключения к js.Но при добавлении картинки большого разрешения он ее попросту увеличивает,а не сжимает.Если вставить картинку меньшего размера тогда выводится пол картинки,а остальное поле белое.Возможно я что то упустил,либо попросту не могу понять какой размер изображения нужен этому "Слайд шоу".Может кто в курсе,что тут можно придумать или заменить модуль на другой?
Пример как выглядит на сайте:

Оригинал фото:

На сайте фото меньшего размера:

Создаем файл 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"} где нужно осуществить вывод слайд шоу.

 

[alex_a]

Возможно я что то упустил,либо попросту не могу понять какой размер изображения нужен этому "Слайд шоу".

Так размеры прописаны в классе slides ширина 1000 и высота 300, а Ваше изображение (оригинал) с размерами 2048 на 1536 оно и будет резаться так как не используется маштабирование. Как вариант...
- Делать картинки нужного размера. (подкорректировать параметры класса под имеющийся набор картинок и самого диза сайта)
- Использовать маштабирование в стилях используя ширину в процентах выставив высоту в auto.
Это если я правильно понял что именно нужно.

 

[alex_a]

Есть слайдер довольно неплохой на jQuery, посмотрите, может понравится и прикрутите себе его на дату.

 

[nadoname]

Есть слайдер довольно неплохой на jQuery, посмотрите, может понравится и прикрутите себе его на дату.

Понравился.Пробовал сам устанавливать?Трудностей не возникло?

 

[alex_a]

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

 

[alex_a]

Попробовал, встало всё без проблем, весь функционал работает без багов --- пример работы ---
Всё делается элементарно по справке на сайте данного слайдера, единственно на что потратится время потом, это настройка под диз сайта, положение, размеры, цвета и изображения, но это уже нельзя назвать сложностями при установке.
Так что если понравился данный слайдер, то поставить его не возникнет проблем.

Удачи!

P.S. Когда ставил дату для теста, то, там изначально две темы по умолчанию со слайдерами, они совсем не устраивают?

 

[nadoname]

Попробовал, встало всё без проблем, весь функционал работает без багов --- пример работы ---
Всё делается элементарно по справке на сайте данного слайдера, единственно на что потратится время потом, это настройка под диз сайта, положение, размеры, цвета и изображения, но это уже нельзя назвать сложностями при установке.
Так что если понравился данный слайдер, то поставить его не возникнет проблем.

Удачи!

P.S. Когда ставил дату для теста, то, там изначально две темы по умолчанию со слайдерами, они совсем не устраивают?

Спасибо огромное очень помог в решении данного вопроса)