如何解决轻拂-同步两个轮播以及具有按钮的问题
我需要有两个同步轮播，一个在另一个之上，并且都由同一组自定义按钮控制。
我设法使它们同步，并实现了控制它们的自定义按钮，但这就是问题所在；尽管自定义按钮可以以同步方式控制它们，但是当我滑动或拖动一个或另一个时，它们似乎并没有同步。即，如果我滑动/拖动顶部轮播，则底部轮播不会受到影响。这样做时，自定义按钮的活动状态有效，但是如果我滑动/拖动底部轮播则无法。
此外，在仅实现自定义按钮javascript的过程中，我可以隐藏标准按钮控件（点和上一个/下一个箭头导航按钮），以便只显示自定义按钮。
但是，通过添加同步的javascript，似乎无法隐藏标准按钮，以及我最初提到的其他问题。
这是代码：
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<Meta charset="UTF-8">
<title>CodePen - Flickity - custom UI,jQuery</title>
<Meta name="viewport" content="width=device-width">
<link rel='stylesheet' href='https://npmcdn.com/flickity@2/dist/flickity.css'>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Flickity - sync</h1>
<!-- Flickity HTML init -->
<div class="gallery gallery-main" data-flickity='{ "sync": ".gallery-nav" }'>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
</div>
<div class="button-row">
<button class="button button--prevIoUs">←</button>
<div class="button-group button-group--cells">
<button class="button is-selected">1</button>
<button class="button">2</button>
<button class="button">3</button>
<button class="button">4</button>
</div>
<button class="button button--next">→</button>
</div>
<div class="gallery gallery-nav"
data-flickity='{ "contain": true }'>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
<div class="gallery-cell"></div>
</div>
<!-- partial -->
<script src='https://code.jquery.com/jquery-3.1.0.min.js'></script>
<script src='https://npmcdn.com/flickity@2/dist/flickity.pkgd.js'></script>
<script src="script.js"></script>
<script src="flickity-sync.js"></script>
<script>
$('.gallery-main').flickity({
sync: '.gallery-nav'
});
// only need to set sync on one of the Flickity galleries
$('.gallery-nav').flickity();
</script>
</body>
</html>
CSS
/* external css: flickity.css */
* { Box-sizing: border-Box; }
body { font-family: sans-serif; }
.gallery {
background: #FAFAFA;
margin-bottom: 40px;
}
.gallery-cell {
width: 66%;
height: 200px;
background: #8C8;
border-radius: 5px;
counter-increment: gallery-cell;
}
/* cell number */
.gallery-cell:before {
display: block;
text-align: center;
content: counter(gallery-cell);
line-height: 200px;
font-size: 80px;
color: white;
}
.gallery-nav .gallery-cell {
width: 66%;
height: 200px;
}
.gallery-nav .gallery-cell:before {
line-height: 200px;
font-size: 80px;
}
.gallery-cell.is-selected {
background: #ED2;
}
.button {
display: inline-block;
padding: 10px 22px;
font-size: 18px;
border: 1px solid #DDD;
border-radius: 6px;
background-color: #FAFAFA;
background-image: linear-gradient( hsla(0,0%,0),hsla(0,0.1) )
}
.button:hover {
background-color: white;
border-color: #BBB;
cursor: pointer;
}
.button:focus {
outline: thin dotted;
outline: 5px auto -webkit-focus-ring-color;
outline-offset: -2px;
background-color: white;
}
.button:active {
background-color: #EEE;
Box-shadow: inset 0 2px 10px hsla(0,0.3);
}
.button.is-selected {
background-color: #09F;
color: white;
}
/* ---- button-group ---- */
.button-group {
display: inline-block;
vertical-align: bottom;
}
.button-group:after {
content: '';
display: block;
clear: both;
}
.button-group .button {
float: left;
border-radius: 0;
border-right-width: 0;
}
.button-group .button:first-child {
border-radius: 6px 0 0 6px;
}
.button-group .button:last-child {
border-radius: 0 6px 6px 0;
border-right-width: 1px;
}
/* ---- button-row ---- */
.button-row {
text-align: center;
}
JavaScript
// external js: flickity.pkgd.js
var $carousel = $('.gallery').flickity({
prevNextButtons: false,pageDots: false
});
// Flickity instance
var flkty = $carousel.data('flickity');
// elements
var $cellButtonGroup = $('.button-group--cells');
var $cellButtons = $cellButtonGroup.find('.button');
// update selected cellButtons
$carousel.on( 'select.flickity',function() {
$cellButtons.filter('.is-selected')
.removeClass('is-selected');
$cellButtons.eq( flkty.selectedindex )
.addClass('is-selected');
});
// select cell on button click
$cellButtonGroup.on( 'click','.button',function() {
var index = $(this).index();
$carousel.flickity( 'select',index );
});
// prevIoUs
$('.button--prevIoUs').on( 'click',function() {
$carousel.flickity('prevIoUs');
});
// next
$('.button--next').on( 'click',function() {
$carousel.flickity('next');
});
/*!
* Flickity sync v2.0.0
* enable sync for Flickity
*/
/*jshint browser: true,undef: true,unused: true,strict: true*/
( function( window,factory ) {
// universal module deFinition
/*jshint strict: false */ /*globals define,module,require */
if ( typeof define == 'function' && define.amd ) {
// AMD
define( [
'flickity/js/index','fizzy-ui-utils/utils'
],factory );
} else if ( typeof module == 'object' && module.exports ) {
// Commonjs
module.exports = factory(
require('flickity'),require('fizzy-ui-utils')
);
} else {
// browser global
window.Flickity = factory(
window.Flickity,window.fizzyUIUtils
);
}
}( window,function factory( Flickity,utils ) {
'use strict';
// -------------------------- sync prototype -------------------------- //
// Flickity.defaults.sync = false;
Flickity.createMethods.push('_createSync');
Flickity.prototype._createSync = function() {
this.syncers = {};
var syncoption = this.options.sync;
this.on( 'destroy',this.unsyncAll );
if ( !syncoption ) {
return;
}
// HACK do async,give time for other flickity to be initalized
var _this = this;
setTimeout( function initSyncCompanion() {
_this.sync( syncoption );
});
};
/**
* sync
* @param {Element} or {String} elem
*/
Flickity.prototype.sync = function( elem ) {
elem = utils.getQueryElement( elem );
var companion = Flickity.data( elem );
if ( !companion ) {
return;
}
// two hearts,that beat as one
this._syncCompanion( companion );
companion._syncCompanion( this );
};
/**
* @param {Flickity} companion
*/
Flickity.prototype._syncCompanion = function( companion ) {
var _this = this;
function syncListener() {
var index = _this.selectedindex;
// do not select if already selected,prevent infinite loop
if ( companion.selectedindex != index ) {
companion.select( index );
}
}
this.on( 'select',syncListener );
// keep track of all synced flickities
// hold on to listener to unsync
this.syncers[ companion.guid ] = {
flickity: companion,listener: syncListener
};
};
/**
* unsync
* @param {Element} or {String} elem
*/
Flickity.prototype.unsync = function( elem ) {
elem = utils.getQueryElement( elem );
var companion = Flickity.data( elem );
this._unsync( companion );
};
/**
* @param {Flickity} companion
*/
Flickity.prototype._unsync = function( companion ) {
if ( !companion ) {
return;
}
// I love you but I've chosen darkness
this._unsyncCompanion( companion );
companion._unsyncCompanion( this );
};
/**
* @param {Flickity} companion
*/
Flickity.prototype._unsyncCompanion = function( companion ) {
var id = companion.guid;
var syncer = this.syncers[ id ];
this.off( 'select',syncer.listener );
delete this.syncers[ id ];
};
Flickity.prototype.unsyncAll = function() {
for ( var id in this.syncers ) {
var syncer = this.syncers[ id ];
this._unsync( syncer.flickity );
}
};
// ----- ----- //
return Flickity;
}));
这是笔：
[https://codepen.io/creativezest/pen/BazVMgZ] [1]
我真的很感谢任何人都能提供的帮助。
非常感谢。 马克
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
