我有以下代码使用 Slick Slider 旋转 div,它工作正常,我想在行 cale-rosters div 上方添加文本,该 div 随 div 旋转,所有三个显示。
例。每个 div 是一天,星期三,星期四,星期五。 “wednesday, thursday, friday” 文本应该始终显示在下面的 'row cale-rosters' div 上方,在 "cale-date' div 下方。但是当你点击星期三时,只有第一个 div 显示,当点击星期四时,仅显示第二个 div,当单击星期五时仅显示第三个 div。
<div class="row cale-mid">
<div class="col-sm-12 cale-cont text-center">
<h2>CALENDAR OF EVENTS</h2>
<p class="cale-location">Golf Course</p>
<br/>
<p class="cale-date">4 AUG, 2016</p>
</div>
<div class="weekday">
Wednesday
</div>
<div class="weekday">
Thursday
</div>
<div class="weekday">
Friday
</div>
</div>
<div class="row cale-rosters">
<div class="col-sm-12 cale-rosters-cont">
<div class="calendar-cont text-left">
<div class="calendar">
<div>
<span class="time-one">7:30 - 8:30 AM</span> <span class="event">BREAKFAST</span><br/>
<span class="location">LODGE</span><br/><br/>
</div>
<div>
<span class="time-one">7:30 - 8:30 AM</span> <span class="event">BREAKFAST</span><br/>
<span class="location">LODGE</span><br/><br/>
</div>
<div>
<span class="time-one">7:30 - 8:30 AM</span> <span class="event">BREAKFAST</span><br/>
<span class="location">LODGE</span><br/><br/>
</div>
</div>
</div>
</div>
</div>
最佳答案
看这个solution我在滑动时添加了一个事件,因此如果您使用鼠标移动右侧或左侧的内容,您可以看到“cale-date”内容发生变化。也许这可能是一种在 slider 更改时更改 header 内容的方法。
$('.calendar').on('swipe', function(event, slick, direction){
console.log(direction);
$('.cale-date').html(direction);
});
关于javascript - 光滑的 slider 将文本放在每张幻灯片上方,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37750164/