javascript - Slick.js 同步多个滑块导航
问题描述
我有一个活动网站,我想用滑块显示 12 个活动。我希望两个部分(演讲者和日程安排)充当显示单个事件内容的滑块,并使用滑块导航(带有箭头和数字)来控制它们。使用 Slick.js,我可以通过单个滑块导航来实现这一点,但是当我复制滑块导航时 - 一个滑块导航无法正常工作(箭头有效,但数字无效)。有没有办法在 Slick.js 中将其设置为工作,或者如果没有人可以帮助我使用 JavaScript/jQuery 解决问题?
Demo可以在这里测试: demo
这是我的代码:
$('.slickSliderWrap').slick({
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
adaptiveHeight: true,
asNavFor: '.day-wrap'
});
$('.day-wrap').slick({
slidesToShow: 3,
slidesToScroll: 1,
asNavFor: '.slickSliderWrap',
centerMode: true,
centerPadding: '10px',
prevArrow: '.dayArrow--left',
nextArrow: '.dayArrow--right',
focusOnSelect: false
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="speakers">
<div class="agenda-wrap">
<div class="nav-wrap">
<button class="dayArrow dayArrow--left">
</button>
<div class="day-nav">
<div class="day-wrap slider-nav">
<button class="btn-day active">E01</button>
<button class="btn-day">E02</button>
<button class="btn-day">E03</button>
<button class="btn-day">E04</button>
<button class="btn-day">E05</button>
<button class="btn-day">E06</button>
<button class="btn-day">E07</button>
<button class="btn-day">E08</button>
<button class="btn-day">E09</button>
<button class="btn-day">E10</button>
<button class="btn-day">E11</button>
<button class="btn-day">E12</button>
</div>
</div>
<button class="dayArrow dayArrow--right">
</button>
</div>
</div>
<div class="speaker-list-wrap slickSliderWrap">
<!-- event 01 list -->
<div class="speaker-list">
<!-- speaker item -->
<!-- speaker item -->
...
<!-- speaker item -->
</div>
<!-- event 02 list -->
<div class="speaker-list">
<!-- speaker item -->
<!-- speaker item -->
...
<!-- speaker item -->
</div>
...
<!-- event 12 list -->
<div class="speaker-list">
<!-- speaker item -->
<!-- speaker item -->
...
<!-- speaker item -->
</div>
</div>
</div><!-- /speakers -->
<div id="schedule">
<div class="agenda-wrap">
<div class="nav-wrap">
<button class="dayArrow dayArrow--left">
</button>
<div class="day-nav">
<div class="day-wrap slider-nav">
<button class="btn-day active">E01</button>
<button class="btn-day">E02</button>
<button class="btn-day">E03</button>
<button class="btn-day">E04</button>
<button class="btn-day">E05</button>
<button class="btn-day">E06</button>
<button class="btn-day">E07</button>
<button class="btn-day">E08</button>
<button class="btn-day">E09</button>
<button class="btn-day">E10</button>
<button class="btn-day">E11</button>
<button class="btn-day">E12</button>
</div>
</div>
<button class="dayArrow dayArrow--right">
</button>
</div>
</div>
<div class="agenda-content-window">
<div class="agenda-content-wrap slickSliderWrap">
<!-- event 01 list -->
<div class="agenda">
<!-- agenda item -->
<!-- agenda item -->
...
<!-- agenda item -->
</div>
<!-- event 02 list -->
<div class="agenda">
<!-- agenda item -->
<!-- agenda item -->
...
<!-- agenda item -->
</div>
...
<!-- event 12 list -->
<div class="agenda">
<!-- agenda item -->
<!-- agenda item -->
...
<!-- agenda item -->
</div>
</div>
</div><!-- /schedule -->
解决方案
我玩了一下,想出了一个工作版本。我想把它剪下来做一个更简单的例子,所以它只包括一组导航和扬声器。
$(function() {
$('.day-wrap').slick({
slidesToShow: 3,
slidesToScroll: 1,
centerPadding: '10px',
centerMode: true,
prevArrow: '.dayArrow--left',
nextArrow: '.dayArrow--right',
asNavFor: '.speaker-list-wrap'
});
$('.speaker-list-wrap').slick({
slidesToShow: 1,
arrows: false
});
// asNavFor works when scrolling
// Add onclick to buttons to navigate speakers
$('.btn-day').on('click', function() {
$('.speaker-list-wrap').slick('slickGoTo', $(this).attr('data-slick-index'));
});
});
#speakers,
.speaker-list,
.nav-wrap {
width: 300px;
}
.day-wrap {
width: 300px;
overflow: hidden;
}
.speaker-list,
.speaker-list-wrap,
.speaker-list-item {
width: 300px;
}
.speaker-list {
margin-top: 30px;
height: 40px;
border: 1px solid gray;
}
.speaker-list-wrap {
overflow: hidden;
}
.speaker-list-item {
float: left;
}
.btn-day {
width: 50px;
height: 20px;
float: left;
border: 1px solid blue;
margin: 0 5px;
text-align: center;
}
.btn-day.slick-current {
color: white;
background-color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.0/slick.min.js"></script>
<html>
<head></head>
<body>
<div id="speakers">
<div class="agenda-wrap">
<div class="nav-wrap">
<button class="dayArrow dayArrow--left"><</button>
<div class="day-nav">
<div class="day-wrap slider-nav">
<div class="btn-day active">E01</div>
<div class="btn-day">E02</div>
<div class="btn-day">E03</div>
<div class="btn-day">E04</div>
<div class="btn-day">E12</div>
</div>
</div>
<button class="dayArrow dayArrow--right">></button>
</div>
</div>
<div class="speaker-list">
<div class="speaker-list-wrap">
<div class="speaker-list-item">Speaker 1</div>
<div class="speaker-list-item">Speaker 2</div>
<div class="speaker-list-item">Speaker 3</div>
<div class="speaker-list-item">Speaker 4</div>
<div class="speaker-list-item">Speaker 12</div>
</div>
</div>
</div>
<!-- /speakers -->
</body>
</html>
推荐阅读
- java - 如何在 XML 的特定位置插入新节点?
- azure-ad-b2c - Localised message for RestAPI error response in B2C custom policy
- vue.js - Vue - 有条件地传递道具
- python - 通过 str.contains() 进行索引,然后将值插入另一列
- python - 将金额除以行
- laravel - Laravel 更新关系
- wordpress - 去除滚动效果
- python - 复合小部件包含按钮、标签等。如何构建以及如何使用它
- c++ - 你/可以/你从一个函数返回什么......并期望它在到达时还活着?
- javascript - 为什么 obj 变量分配了两次?(对象数组,javascript)