仅用一个导航器控制两个光滑的滑块
Control two slick sliders with only one navigator
我正在使用来自 Slick.js
的 Slider Syncing,并且只需要用一个导航器控制另外两个。
<div class="main">
<div>content</div>
<div>content</div>
</div>
<div class="navigator">
<div>nav1</div>
<div>nav2</div>
</div>
<div class="secondary">
<div>content related with main1</div>
<div>content related with main2</div>
</div>
这是我的 js 代码
var slickMainFrame = {
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.navigator',
};
var slickNav = {
dots: false,
slidesToShow: 2,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.main',
speed: 500,
};
$('.main').slick(slickMainFrame);
$('.secondary').slick(slickMainFrame);
$('.navigator').slick(slickNav);
这根本不起作用。我试过使用 slickNav 的 asNavFor 属性作为数组或冒号分隔,但它都不起作用。
asNavFor: '.main, .secondary'
试试这个:
HTML
<div class="main asnavForClass">
<div>content</div>
<div>content</div>
</div>
<div class="navigator">
<div>nav1</div>
<div>nav2</div>
</div>
<div class="secondary asnavForClass">
<div>content related with main1</div>
<div>content related with main2</div>
</div>
Javascript
var slickMainFrame = {
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
};
var slickNav = {
dots: false,
slidesToShow: 2,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.asnavForClass',
speed: 500,
};
$('.main').slick(slickMainFrame);
$('.secondary').slick(slickMainFrame);
$('.navigator').slick(slickNav);
我正在使用来自 Slick.js
的 Slider Syncing,并且只需要用一个导航器控制另外两个。
<div class="main">
<div>content</div>
<div>content</div>
</div>
<div class="navigator">
<div>nav1</div>
<div>nav2</div>
</div>
<div class="secondary">
<div>content related with main1</div>
<div>content related with main2</div>
</div>
这是我的 js 代码
var slickMainFrame = {
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.navigator',
};
var slickNav = {
dots: false,
slidesToShow: 2,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.main',
speed: 500,
};
$('.main').slick(slickMainFrame);
$('.secondary').slick(slickMainFrame);
$('.navigator').slick(slickNav);
这根本不起作用。我试过使用 slickNav 的 asNavFor 属性作为数组或冒号分隔,但它都不起作用。 asNavFor: '.main, .secondary'
试试这个:
HTML
<div class="main asnavForClass">
<div>content</div>
<div>content</div>
</div>
<div class="navigator">
<div>nav1</div>
<div>nav2</div>
</div>
<div class="secondary asnavForClass">
<div>content related with main1</div>
<div>content related with main2</div>
</div>
Javascript
var slickMainFrame = {
slidesToShow: 1,
slidesToScroll: 1,
arrows: true,
fade: true,
};
var slickNav = {
dots: false,
slidesToShow: 2,
slidesToScroll: 1,
arrows: true,
fade: true,
asNavFor: '.asnavForClass',
speed: 500,
};
$('.main').slick(slickMainFrame);
$('.secondary').slick(slickMainFrame);
$('.navigator').slick(slickNav);