Форум о социальных сетях Поиск по форуму Инвестиции SMM обучение SMM курсы
Форум о социальных сетях Поиск по форуму Инвестиции SMM обучение SMM курсы
  • Страница 1 из 1
  • 1
Новый новостной слайдер
#1
Пятница, 30.12.2011, 01:41
Dimma
Проверенный
Сообщения: 212
Репутация: 221
[spoiler="Скрин"]

После установки скрипта... нажатием на клавиши (дальше - назад) плавно меняется размещение альбомов...
[/spoiler]

[spoiler="css"]
Code

/*--SLIDER--*/
.sliderkit{display:nonee;position:relative;overflow:hidden;text-align:left;}
.sliderkit a,
.sliderkit a:hover{text-decoration:none;}
.sliderkit img{border:0;}

/*---------------------------------
     * Navigation
     *---------------------------------*/
.sliderkit .sliderkit-nav{z-index:10;position:absolute;}

/* Nav > Clip */
.sliderkit .sliderkit-nav-clip{position:relative;overflow:hidden;margin:0 auto;}
.sliderkit .sliderkit-nav-clip ul{position:relative;left:0;top:0;list-style:none;margin:0;padding:0;}
.sliderkit .sliderkit-nav-clip ul li{
     float:left;
     margin-right:6px;
}
.sliderkit .sliderkit-nav-clip ul li a{
     display:block;
     overflow:hidden;
     width:133px;
     height:132px;
     background:url(/images/slide_bg.png) no-repeat;
     padding:1px 0 0 1px;
}
.sliderkit .sliderkit-nav-clip ul li a img {
     width:130px;
     height:130px;
}

/*---------------------------------
     * Buttons
     *---------------------------------*/
.sliderkit .sliderkit-btn{z-index:10;}

/*---------------------------------
     * Panels
     *---------------------------------*/
.sliderkit .sliderkit-panel{z-index:1;position:absolute;overflow:hidden;}
.sliderkit .sliderkit-panel-active{z-index:5;}
.sliderkit .sliderkit-panel-old{z-index:4;}

/* Panels > Overlay */
.sliderkit .sliderkit-panel .sliderkit-panel-textbox{position:absolute;z-index:1;}
.sliderkit .sliderkit-panel .sliderkit-panel-text{position:absolute;z-index:3;top:0;left:0;}
.sliderkit .sliderkit-panel .sliderkit-panel-overlay{position:absolute;z-index:2;top:0;left:0;}

.carousel-demo2{width:750px;height:133px;position:relative;padding-top:35px;left:-20px;}

/* Navbar */
.carousel-demo2 .sliderkit-nav{left:0;bottom:0;width:750px;height:133px;}
.carousel-demo2 .sliderkit-nav-clip ul li{float:left;}
.carousel-demo2 .sliderkit-nav-clip ul li a{display:block;margin:0;opacity:0.8;}
.carousel-demo2 .sliderkit-nav-clip ul li a:hover{opacity:1;}

/* Navbar buttons */
.knopki {position:absolute;top:40px;right:0;}
.sliderkit-nav-btn span {display:none;}
.sliderkit-nav-prev a, .sliderkit-nav-next a {display:block;width:25px;}
.sliderkit-nav-prev a {
     height:25px;
     background:url("/images/slide_arrow.png") no-repeat 0 0;
}
.sliderkit-nav-next a {
     height:32px;
     background:url("/images/slide_arrow.png") no-repeat 0 -25px;
}
.sliderkit-nav-prev a:hover {background-position:-26px 0;}
.sliderkit-nav-next a:hover {background-position:-26px -25px;}

/* Buttons > Disable */
.carousel-demo2 .sliderkit-nav .sliderkit-btn-disable{opacity:0.3/*can be set to any value until 1*/;cursor:default;}
[/spoiler]

[spoiler="HTML"]<div style="display: block;" class="sliderkit carousel-demo2">
<div class="sliderkit-nav">
<div style="width: 694px; height: 133px;" class="sliderkit-nav-clip">
<ul style="width: 1400px;">

<li style="width: 130px; height: 130px;">
<a href="ссылка на новость" title="название новости">
<img ilo-full-src="ссылка на изображение" alt="" src="ссылка на изображение">[/c]
</a></li>

<li style="width: 130px; height: 130px;">
<a href="ссылка на новость" title="название новости">
<img ilo-full-src="ссылка на изображение" alt="" src="ссылка на изображение">[/c]
</a></li>

<li style="width: 130px; height: 130px;">
<a href="ссылка на новость" title="название новости">
<img ilo-full-src="ссылка на изображение" alt="" src="ссылка на изображение">[/c]
</a></li>

</ul>
</div>
<div class="knopki">
    <div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-prev"><a href="#" title="Назад"><span>Назад</span></a></div>
    <div class="sliderkit-btn sliderkit-nav-btn sliderkit-nav-next"><a href="#" title="Дальше"><span>Дальше</span></a>[/spoiler]

[spoiler="Скрипт"]<script type="text/javascript" src="...../js/jquery.sliderkit.1.5.1.js"></script>
<script type="text/javascript">
jQuery(window).load(function() {
jQuery(".carousel-demo2").sliderkit({
shownavitems: 5, <--------------- количество отображаемых материалов
scroll: 1,
mousewheel: true,
circular: true,
start: 2
});
});
</script>[/spoiler]

Содержание архива, залить в корень файлового менеджера
Скачать архив:
http://www.unibytes.com/rVNgu_C8Up0B
http://www.gigabase.com/getfile....ar.html
Пост отредактировал Dimma - Пятница, 30.12.2011, 01:44
www.RAPPRO.ru - Скачивай русский rap, hip-ho и rnb бесплатно и без регистрации!
#2
Пятница, 30.12.2011, 03:47
procsy
Пользователь
Сообщения: 101
Репутация: 15
Красиво! Забрал себе. :)
  • Страница 1 из 1
  • 1
Поиск:
Форум
Социальные сети
Хостинг от uCoz