Я хочу использовать этот скрипт
Но с 4 изображениями:
Я не могу найти, как это сделать. Какие параметры я должен использовать с fredcarousel, можете ли вы порекомендовать мне?
Спасибо
Я хочу использовать этот скрипт
Но с 4 изображениями:
Я не могу найти, как это сделать. Какие параметры я должен использовать с fredcarousel, можете ли вы порекомендовать мне?
Спасибо
Вот разбивка того, что происходит в этом примере carouFredsel:
Автор указывает положение каждого элемента в слайд-шоу с помощью переменных:
var _center = {
width: 600,
height: 400,
marginLeft: 0,
marginTop: 0,
marginRight: 0
};
var _left = {
width: 300,
height: 200,
marginLeft: 0,
marginTop: 150,
marginRight: -150
};
var _right = {
width: 300,
height: 200,
marginLeft: -150,
marginTop: 150,
marginRight: 0
};
var _outLeft = {
width: 150,
height: 100,
marginLeft: 150,
marginTop: 200,
marginRight: -200
};
var _outRight = {
width: 150,
height: 100,
marginLeft: -200,
marginTop: 200,
marginRight: 50
};
А затем использует инициатор carouFredSel для настройки поведения прокрутки:
$('#carousel').carouFredSel({
width: 900,
height: 400,
align: false,
items: {
visible: 3,
width: 100
},
scroll: {
items: 1,
duration: 400,
onBefore: function( data ) {
data.items.old.eq( 0 ).animate(_outLeft);
data.items.visible.eq( 0 ).animate(_left);
data.items.visible.eq( 1 ).animate(_center);
data.items.visible.eq( 2 ).animate(_right).css({ zIndex: 1 });
data.items.visible.eq( 2 ).next().css(_outRight).css({ zIndex: 0 });
setTimeout(function() {
data.items.old.eq( 0 ).css({ zIndex: 1 });
data.items.visible.eq( 0 ).css({ zIndex: 2 });
data.items.visible.eq( 1 ).css({ zIndex: 3 });
data.items.visible.eq( 2 ).css({ zIndex: 2 });
}, 200);
}
}
});
Событие onBefore получает ряд различных параметров, содержащих текущую информацию о слайд-шоу. В этом случае первым параметром является oldItems
, а затем, используя ранее установленные «позиции» (var _center
, var _left
и т. д.), скрипт анимирует соответствующие элементы. Затем эти строки устанавливают css и z-индекс элементов в слайд-шоу после анимации. Это позволяет слайд-шоу более эффективно выбирать элементы на основе их свойств css.
$('#carousel').children().eq( 0 ).css(_left).css({ zIndex: 2 });
$('#carousel').children().eq( 1 ).css(_center).css({ zIndex: 3 });
$('#carousel').children().eq( 2 ).css(_right).css({ zIndex: 2 });
$('#carousel').children().eq( 3 ).css(_outRight).css({ zIndex: 1 });
Чтобы адаптировать это к 4 элементам, вам нужно добавить 5-ю переменную с позиционированием и именем, например _farRight
, и подключать ее к скрипту на каждом этапе.