[英]Slick Slider Put Text Above Each Slide
我有下面的代码,使用Slick Slider旋转div,效果很好,我想在随行旋转的行cale-rosters div上方添加文本,所有这三个都显示出来。
例如 每个div是一天,星期三,星期四,星期五。 “星期三,星期四,星期五”文本应始终显示在下面的“行日历-名单” div上方,在“日历日期” 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>
看这个解决方案,我已经在滑动上添加了一个事件,因此,如果用鼠标左右移动内容,则可以看到“日历日期”内容发生了变化。 也许这是在滑块更改时更改标头内容的一种方法。
$('.calendar').on('swipe', function(event, slick, direction){
console.log(direction);
$('.cale-date').html(direction);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.