Главная » DARYA DLE » Готовые дизайны » Слайдер для новостей DLE + автопрокрутка
57 0  

Слайдер для новостей 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 20px 20px 20px;z-index:15;}
.horizontal-slidermix {height:420px; margin:10px; position:relative; display:flex; flex-flow: row wrap;justify-content: space-between;overflow: hidden;}
.horizontal-slidermix .slide-itemmix {flex-basis:30%;} 
.slide-itemmix > div {margin-bottom:90px;}
.slider-prevmix, .slider-nextmix {position: absolute; top: 50%; margin:-60px 0 0 0;width:29px; height:90px; background:rgba(0,0,0,.1) url(../images/sprit.png) no-repeat; border-radius:5px; cursor:pointer;z-index:19;}
.slider-prevmix {background-position: -1175px -155px; left:0;}
.slider-nextmix {background-position:-1171px -29px; right:0;}
div.sm-slider .slide-cont {display: block; margin: 0 15px; text-decoration: none;}
.img-over_x95 {display: block; margin: 0 auto 14px auto;  height: 95px;}
.link-namemix {display: block;font-weight: 700;  line-height: 24px;  font-size: 18px; color: #3399cc; text-decoration: none;}
.img-over_x95 img {max-height: 95px;}

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

<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>

Оставить свой комментарий:

Опыт в веб разработке:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
1979
2020