
6941
- 6
Слайдер контента SlideJS на jQuery
Установка SlideJS
Скачать исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
,распаковать и залить в папку с шаблоном,там три варианта,заливаем понравившийся,ну а я опишу стандартный вариант
1. опишем html - структуру на примере плагина lastnews и xfields :
2.В плагине xfields создаем поле poster
3.В плагине lastnews
В файле lastnews.tpl оставляем только этот код
Код:
{entries}
Код:
[TWIG]<img src="{{ p.xfields.poster.entries[0].purl }} " alt="{title}" />[/TWIG]
Код:
<link rel="stylesheet" href="{tpl_url}/css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>/*повторно подключать не надо если уже подключен jquery*/
<script src="{tpl_url}/js/slides.js"></script>
Код:
<script>
/*
Get the curent slide
*/
function currentSlide( current ) {
$(".current_slide").text(current + " of " + $("#slides").slides("status","total") );
}
$(function(){
/*
Initialize SlidesJS
*/
$("#slides").slides({
navigateEnd: function( current ) {
currentSlide( current );
},
loaded: function(){
currentSlide( 1 );
}
});
/*
Play/stop button
*/
$(".controls").click(function(e) {
e.preventDefault();
// Example status method usage
var slidesStatus = $("#slides").slides("status","state");
if (!slidesStatus || slidesStatus === "stopped") {
// Example play method usage
$("#slides").slides("play");
// Change text
$(this).text("Stop");
} else {
// Example stop method usage
$("#slides").slides("stop");
// Change text
$(this).text("Play");
}
});
});
</script>
Код:
<div id="container">
<div id="slides">
{plugin_lastnews}
</div>
</div>
Слайдер несколько громоздкий, но это следствие, того, что у него в арсенале очень много занятных настроек.
Раскрыть
Прелоадер — показ изображения во время загрузки контента слайдера.
По умолчанию отключено, то есть содержит значение: false.
Изображние прелоадера — можно указывать название и расположения.По умолчанию используется путь:
Имя класса в CSS для контейнеров слайдовПо умолчанию используется имя класса:
Вставка контролеров скролла, то есть стрелок вперед/назадПо умолчанию отключено:
Класс для контролера следующего слайдаПо умолчанию имя класса:
Класс для контролера предыдушего слайдаПо умолчанию имя класса:
Вывод нумерации слайдовПо умолчанию отключено: Спрятать
Автоматическое создание нумерации слайдовА это как раз по умолчанию включено:
Имя класса для блока с нумерами слайдовПо умолчанию используется имя класса:
Установка скорости затухания анимации при смене слайдов в милисекундахПо умолчанию поставлено 350 милисекундю
Установка скорости анимации смены слайдов в милисекундахПо умолчанию поставлено 350 милисекундю
Установка позиции стартового слайдаПо умолчанию, естевственно первый слайд, является стартовым.
Установка эффекта смены слайда — затухание или просто привычный сдвиг справа на лево.Здесь интересно, что можно разделить эффекты смены слайдов для кликов по обычным контролерам и кликам по номерам слайдов. Так вот, если поставить один эффект смены, вот так:
То один и тот же эффект будет использован в двух описанных выше случаях.
А если написать вот так:
То в зависимости от того каким образом была вызвана смена слайда будет использоваться соотвествующий эффект. В общем можно поиграться.
По умолчанию испольуется эффект:
Накладывание изображений слайдовПо умолчанию, отключено:
Случайная смена слайдовПо умолчанию, отключено:
Добавление интервала проигрывания слайдовПо умолчанию равно 0, что эквивалентно
Добавление паузы проигрывания слайдовПо умолчанию равно 0, что эквивалентно
Добавление паузы при наведении курсора на слайдПо умолчанию отключено:
Установка регулировка высоты под содержимое слайдаПо умолчанию отключено:
Анимация изменения высотыПо умолчанию, поставилено: 350 милисекунд
Привязка ссылкойПо умолчанию отключено:
Анимируем что-то ещё кроме слайда
Комбинирование настроек, например, вот так:
Код:
Preload:true/false
Код:
$(function(){
$("#slides").slides({
preload: true
});
});
Изображние прелоадера — можно указывать название и расположения.
Код:
preloadImage (string)
Код:
$(function(){
$("#slides").slides({
preload: true,
preloadImage: '{tpl_url}/images/loading.gif'
});
});
Код:
'{tpl_url}/images/loading.gif'.
Имя класса в CSS для контейнеров слайдов
Код:
container (string)
Код:
$(function(){
$("#slides").slides({
container: 'slides_container'
});
});
Код:
"slides_container".
Вставка контролеров скролла, то есть стрелок вперед/назад
Код:
generateNextPrev (boolean)
Раскрыть
Код:
$(function(){
$("#slides").slides({
generateNextPrev: true
});
});
Код:
false.
Класс для контролера следующего слайда
Код:
next (string)
Раскрыть
Код:
$(function(){
$("#slides").slides({
next: 'next'
});
});
Код:
.next.
Класс для контролера предыдушего слайда
Код:
prev (string)
Раскрыть
Код:
$(function(){
$("#slides").slides({
next: 'next'
});
});
Код:
.prev.
Вывод нумерации слайдов
Код:
pagination (boolean)
Раскрыть
Код:
$(function(){
$("#slides").slides({
pagination: true
});
});
Код:
false.
Автоматическое создание нумерации слайдов
Код:
generatePagination (boolean)
Раскрыть
Код:
$(function(){
$("#slides").slides({
generatePagination: true
});
});
Код:
true.
Имя класса для блока с нумерами слайдов
Код:
paginationClass (string)
Раскрыть
Код:
$(function(){
$("#slides").slides({
paginationClass: 'pagination'
});
});
Код:
.pagination.
Установка скорости затухания анимации при смене слайдов в милисекундах
Код:
fadeSpeed (number)
Раскрыть
Код:
$(function(){
$("#slides").slides({
fadeSpeed: 350
});
});
Установка скорости анимации смены слайдов в милисекундах
Код:
slideSpeed (number)
Раскрыть
Код:
$(function(){
$("#slides").slides({
slideSpeed: 350
});
});
Установка позиции стартового слайда
Код:
start (number)
Раскрыть
Код:
$(function(){
$("#slides").slides({
start: 1
});
});
Установка эффекта смены слайда — затухание или просто привычный сдвиг справа на лево.
Код:
effect (string)
Раскрыть
Код:
$(function(){
$("#slides").slides({
effect: 'slide'
});
});
А если написать вот так:
Раскрыть
Код:
$(function(){
$("#slides").slides({
effect: 'slide, fade'
});
});
По умолчанию испольуется эффект:
Код:
slide.
Накладывание изображений слайдов
Код:
crossfade (boolean)
Раскрыть
Код:
$(function(){
$("#slides").slides({
crossfade: true
});
});
Код:
false
Случайная смена слайдов
Код:
randomize (boolean)
Раскрыть
Код:
$(function(){
$("#slides").slides({
randomize: true
});
});
Код:
false
Добавление интервала проигрывания слайдов
Код:
play (number)
Раскрыть
Код:
$(function(){
$("#slides").slides({
play: 5000
});
});
Код:
false
Добавление паузы проигрывания слайдов
Код:
pause (number)
Раскрыть
Код:
$(function(){
$("#slides").slides({
pause: 2500
});
});
Код:
false
Добавление паузы при наведении курсора на слайд
Код:
hoverPause (boolean)
Раскрыть
Код:
$(function(){
$("#slides").slides({
hoverPause: true
});
});
Код:
false
Установка регулировка высоты под содержимое слайда
Код:
autoHeight (boolean)
Раскрыть
Код:
$(function(){
$("#slides").slides({
autoHeight: true
});
});
Анимация изменения высоты
Код:
autoHeightSpeed (number)
Раскрыть
Код:
$(function(){
$("#slides").slides({
autoHeightSpeed: 350
});
});
Привязка ссылкой
Код:
bigTarget (boolean)
Раскрыть
Код:
$(function(){
$("#slides").slides({
bigTarget: true
});
});
Код:
false
Анимируем что-то ещё кроме слайда
Код:
animationStart() (callback)
Раскрыть
Код:
$(function(){
$("#slides").slides({
animationStart: function() {
// Делаем что-то крутое
}
});
});
Комбинирование настроек, например, вот так:
Раскрыть
Код:
$(function(){
$("#slides").slides({
preload: true,
preloadImage: '/img/loading.gif',
play: 5000,
pause: 2500,
hoverPause: true
});
});

Можешь почитать и вот эту статейку "Голосовой поиск на JS"
Это тоже интересно
- 09.06.13Вкладки-Табы на jQuery и CSS
- 28.04.14Интересный адаптивный слайдер
читать полностью
[/comment_full] [answer]--------------------
Ответ от{name}
{answer}[/answer] [quote]
irbees2008');" style="cursor: pointer;">ответить[/quote]
читать полностью
[/comment_full] [answer]--------------------
Ответ от{name}
{answer}[/answer] [quote]
irbees2008');" style="cursor: pointer;">ответить[/quote]
читать полностью
[/comment_full] [answer]--------------------
Ответ от{name}
{answer}[/answer] [quote]
irbees2008');" style="cursor: pointer;">ответить[/quote]
читать полностью
[/comment_full] [answer]--------------------
Ответ от{name}
{answer}[/answer] [quote]
irbees2008');" style="cursor: pointer;">ответить[/quote]
читать полностью
[/comment_full] [answer]--------------------
Ответ от{name}
{answer}[/answer] [quote]
irbees2008');" style="cursor: pointer;">ответить[/quote]
читать полностью
[/comment_full] [answer]--------------------
Ответ от{name}
{answer}[/answer] [quote]
irbees2008');" style="cursor: pointer;">ответить[/quote]