所以,我正在使用这个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
}
});
我想要的是,当我点击prevNextButtons
的{{1}}时,会自动从.characters-nav
中选择元素。
这就是现在的工作方式:
答案 0 :(得分:3)
我已经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();
});
答案 1 :(得分:1)
请尝试使用以下代码。我使用了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 );
}
});