Универсальный слайдер для DLE
Даный универсальный слайдер это лучше что я встречал в своей практике верстальщика. Его особеностью есть возможность маштабирования - на странице может быть два или много слайдеров и не нужно даже задавать уникальных индефикаторов.
1. Код самого слайдера:
<!-- slider -->
<div class="slider">
<div class="slide-list"><div class="slide-wrap">
<!-- * -->
<div class="slide-item">
Содержимое слайдера №1
</div>
<!-- * -->
<div class="slide-item">
Содержимое слайдера №2
</div>
<!-- * -->
<div class="slide-item">
Содержимое слайдера №3
</div>
</div></div>
<s class="prev-slide"><s></s></s><s class="next-slide"><s></s></s>
</div>
<!-- /slider -->
2. Стили слайдера:
/* SLIDER css */
.slider{display:block; width:100%; margin:35px auto; padding:0; position:relative; }
.slide-list{position:relative; margin:0 65px; padding:0; width:calc(100% - 130px );}
.slide-wrap{width:100%; position:relative; left:0px; top:0;display:flex; flex-flow: row nowrap; justify-content: space-between; }
.slide-item{ position: relative; transition: all .003s ease;}
.slider::-moz-selection, sliderafish::-moz-selection{ color:#fff; text-shadow:none; }
.slider::selection, sliderafish::selection{ color:#fff; text-shadow:none; }
.prev-slide, .next-slide {width:45px;height: 100%; display: flex;justify-content: center;align-items: center;position:absolute;top:0;left:0; z-index:33;}
.next-slide {left:auto; right:0;}
.prev-slide > s, .next-slide > s{width:45px; height:175px;display:inline-block; background:url(../images/sprit.png) no-repeat; cursor:pointer; position:absolute; z-index:19;}
.prev-slide > s{left:3px; background-position:-13px -8px;}
.next-slide > s{right:3px; background-position:-114px -8px;}
3. Для работы нужно подключить маленький скриптик, после джиквери, размером 1 кб.
(файлик вверху)
{jsfiles}
<script async type="text/jаvascript" src="js/slider.js"></script>