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

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

Оригинал фото:
624e9240ecb9.jpg

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


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

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


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

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

Удачи! ;)

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

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

Удачи! ;)

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

Назад
Сверху