Flickity 轮播作为另一个导航
Flickity carousel as navigation for another
所以,我正在使用这个 https://codepen.io/desandro/pen/wByaqj
然后我像这样激活了 prevNextButtons: true,
:
$('.characters-main').flickity({
prevNextButtons: false,
wrapAround: false,
pageDots: false,
autoPlay: 10000
});
$('.characters-nav').flickity({
asNavFor: '.characters-main',
cellAlign: 'right',
prevNextButtons: true,
contain: true,
pageDots: false,
arrowShape: {
x0: 10,
x1: 70, y1: 50,
x2: 70, y2: 50,
x3: 35
}
});
我想要这样,当我单击 .characters-nav
的 prevNextButtons
时自动 select 来自 .characters-main
的元素。
现在是这样的:
请尝试使用以下代码。我使用了 flickity 事件 'select'。你也可以尝试解决。
var $carousel2 = $('.characters-main').flickity({
prevNextButtons: false,
wrapAround: false,
pageDots: false,
autoPlay: 10000
});
var $carousel = $('.characters-nav').flickity({
asNavFor: '.characters-main',
cellAlign: 'right',
prevNextButtons: true,
contain: true,
pageDots: false,
arrowShape: {
x0: 10,
x1: 70, y1: 50,
x2: 70, y2: 50,
x3: 35
}
});
$carousel.on( 'select.flickity', function(event, pointer, cellElement, cellIndex) {
if ( typeof cellIndex == 'number' ) {
$carousel2.flickity( 'select', cellIndex );
}
});
我已采取 Your Example over here 并添加了以下代码:
// Main div
var flkty = new Flickity('.carousel-main');
// Next and previous events of the navigation div
$(".carousel-nav .next").on("click", function() {
// Changing items of the main div
flkty.next();
});
$(".carousel-nav .previous").on("click", function() {
// Changing items of the main div
flkty.previous();
});
在你的案例中应该是这样的:
// Your main div is characters-main
var flkty = new Flickity('.characters-main');
// Next and previous events of the characters-nav
$(".characters-nav .next").on("click", function() {
// Changing items of the main div
flkty.next();
});
$(".characters-nav .previous").on("click", function() {
// Changing items of the main div
flkty.previous();
});
所以,我正在使用这个 https://codepen.io/desandro/pen/wByaqj
然后我像这样激活了 prevNextButtons: true,
:
$('.characters-main').flickity({
prevNextButtons: false,
wrapAround: false,
pageDots: false,
autoPlay: 10000
});
$('.characters-nav').flickity({
asNavFor: '.characters-main',
cellAlign: 'right',
prevNextButtons: true,
contain: true,
pageDots: false,
arrowShape: {
x0: 10,
x1: 70, y1: 50,
x2: 70, y2: 50,
x3: 35
}
});
我想要这样,当我单击 .characters-nav
的 prevNextButtons
时自动 select 来自 .characters-main
的元素。
现在是这样的:
请尝试使用以下代码。我使用了 flickity 事件 'select'。你也可以尝试解决。
var $carousel2 = $('.characters-main').flickity({
prevNextButtons: false,
wrapAround: false,
pageDots: false,
autoPlay: 10000
});
var $carousel = $('.characters-nav').flickity({
asNavFor: '.characters-main',
cellAlign: 'right',
prevNextButtons: true,
contain: true,
pageDots: false,
arrowShape: {
x0: 10,
x1: 70, y1: 50,
x2: 70, y2: 50,
x3: 35
}
});
$carousel.on( 'select.flickity', function(event, pointer, cellElement, cellIndex) {
if ( typeof cellIndex == 'number' ) {
$carousel2.flickity( 'select', cellIndex );
}
});
我已采取 Your Example over here 并添加了以下代码:
// Main div
var flkty = new Flickity('.carousel-main');
// Next and previous events of the navigation div
$(".carousel-nav .next").on("click", function() {
// Changing items of the main div
flkty.next();
});
$(".carousel-nav .previous").on("click", function() {
// Changing items of the main div
flkty.previous();
});
在你的案例中应该是这样的:
// Your main div is characters-main
var flkty = new Flickity('.characters-main');
// Next and previous events of the characters-nav
$(".characters-nav .next").on("click", function() {
// Changing items of the main div
flkty.next();
});
$(".characters-nav .previous").on("click", function() {
// Changing items of the main div
flkty.previous();
});