Слайдер для новостей DLE + автопрокрутка

Слайдер для новостей ДЛЕ + с автопрокруткой кратких новостей, можно отключить, очень простой и занимает минимум кода. Можно настроить дизайн под себя.

Как работает слайдер?.

Контейнер для краткой новости должен быть со стилем - slide-itemmix - этот контейнер движется

Слайдер может работать автоматически или только при клике по стрелкам.
Чтобы отключить автопрокрутку последння строка 2000 - это времья слайда  нужно закомментирвать ее, я закоментировал по умолчанию.

Макет слайдера:

<!-- slider -->
<div class="basik-slider">
<div class="horizontal-slidermix">
	{custom category="3,19,20,23,25,28" template="9-short-slider"  limit="9" order="reads" cache="yes"}
</div>
<a href="#prevItem" class="slider-prevmix" onclick="changeSlideMix(this,'.horizontal-slidermix','.slide-itemmix'); return false;"></a>
<a href="#nextItem" class="slider-nextmix" onclick="changeSlideMix(this,'.horizontal-slidermix','.slide-itemmix'); return false;"></a>
</div>
<!--  /slider -->

Стили для каркаса:

/*-- Слайдер для прокрутки новостей --*/
.basik-slider {position:relative;padding:5px 0;z-index:15; background:#E7E8ED;}
.horizontal-slidermix, .horizontal-slidermix .slide-itemmix, .horizontal-slidermix .slide-itemmix img {height:200px;}
.horizontal-slidermix {height:200px; margin:5px 0; position:relative; display:flex; flex-flow: row wrap;justify-content: space-between;overflow: hidden;}
.horizontal-slidermix .slide-itemmix {flex-basis:14%;position:relative;} 
.horizontal-slidermix .slide-itemmix img { width:100%;}
.slide-itemmix > div {margin-bottom:20px;}
.slider-prevmix, .slider-nextmix {display:none; position: absolute; top:85px;width:40px; height:40px;  background:rgba(0,0,0,.1) url(../images/sprit.png) no-repeat; cursor:pointer;z-index:19;}
.slider-prevmix {background-position: -1175px -155px; left:0;}
.slider-nextmix {background-position:-1171px -29px; right:0;}
.basik-slider:hover .slider-prevmix, .basik-slider:hover .slider-nextmix {display:block;}
.text_filmsss {position: absolute; bottom: 0; left:0; padding: 10px 0; text-align: center; width:100%; background: #000; background-color: rgba(0, 0, 0, 0.4); background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0), #000); background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0, 0, 0, 0)), to(#000)); background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0), #000); background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0), #000); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), #192F42); background-repeat: repeat-x; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#ff000000', GradientType=0); background-color: rgba(0, 0, 0, 0); color: #FFF; display: block; word-wrap: break-word; text-shadow: 1px 1px #000; line-height: 1.3}
@media (max-width: 980px) {.horizontal-slidermix .slide-itemmix {flex-basis:19.6%}}
@media (max-width: 650px) {.horizontal-slidermix .slide-itemmix {flex-basis:24.6%}}
@media (max-width: 390px) {.horizontal-slidermix .slide-itemmix {flex-basis:49%}}

Кратка новость:

<div class="slide-itemmix">
Здесь код краткой новости
</div>

Скрипт вставляем после основных скриптов движка!

<script>
function changeSlideMix(obj,block,li){
$(obj).parent().find(block+' '+li).stop(true,true);
if($(obj).hasClass('slider-prevmix')){
liLast=$(obj).parent().find(block+' '+li+':last');
liLast.prependTo(liLast.parent()).css('margin-left','-'+liLast.width()+'px').animate({marginLeft:0});}
else {
liFirst=$(obj).parent().find(block+' '+li+':eq(0)');
liFirst.animate({marginLeft:0-liFirst.width()},function(){
liFirst.css('margin-left',0).appendTo(liFirst.parent());
}); } }
$(document).ready(function(){
// setInterval(function(){changeSlideMix('.slider-nextmix', '.horizontal-slidermix','.slide-itemmix')}, 2000);
});
</script>