вопрос
Уважаемые вебмастеры, нужна помощь.
Имеется слайдер на сайте. Он имеет такой вид:
Нужно что бы он приобрел такой вид:
Движок сайта DLE 9.6
Имеется слайдер на сайте. Он имеет такой вид:
Нужно что бы он приобрел такой вид:
Движок сайта DLE 9.6
Вот код main.tpl:
Шаблон slider.tpl:
Стиль элемента slider:
<div class="slider">
{custom category="1,2,3,4,5" template="slider" aviable="main" from="0" limit="12" cache="no"}
<div style="clear: both;"></div>
</div>
Шаблон slider.tpl:
<div class="slider-item">
<div class="slider-item-small">
<img src="{image-1}" alt="{title}" />
<div class="slider-item-small-dark"></div>
</div>
<div class="slider-item-big">
<a href="{full-link}"><img src="{image-1}" alt="scrin" /></a>
<h2>{title}</h2>
</div>
</div>
Стиль элемента slider:
.slider {
position: relative;
height: 355px;
margin: 0 0 10px 0;
padding: 0 0 0 502px;
overflow: hidden;
}
.slider-item {
float: left;
width: 111px;
height: 111px;
margin: 0 0 10px 13px;
}
.slider-item-small {
overflow: hidden;
width: 111px;
height: 111px;
position: relative;
border: 1px #353535 solid;
cursor: pointer;
}
.slider-item-small img {
min-width: 111px;
height: 111px;
border: 0;
}
.slider-item-small-dark {
width: 100%;
height: 100%;
background: url(../images/slider-item.png);
position: absolute;
left: 0;
top: 0;
cursor: pointer;
}
.slider-item-big {
position: absolute;
left: 0;
top: 0;
width: 502px;
height: 355px;
overflow: hidden;
display: none;
}
.active-slider .slider-item-big {
}
.active-slider .slider-item-small {
border: 1px #fff solid;
}
.slider-item-hover .slider-item-small {
border: 1px #fff solid !important;
}
.active-slider .slider-item-small-dark, .slider-item-hover .slider-item-small-dark {
display: none;
}
.slider-item-big img {
position: absolute;
left: 0;
top: -50px;
width: 502px;
min-height: 355px;
border: 0;
}
.slider-item-big h2 {
position: absolute;
font-size: 18px;
text-transform: uppercase;
left: 10px;
bottom: 5px;
font-weight: normal;
background: url(../images/slider-item.png);
padding: 10px;
color: #fff;
}