光滑的滑块将文本放在每个幻灯片上方答案

【问题标题】：Slick Slider Put Text Above Each Slide光滑的滑块将文本放在每个幻灯片上方
【发布时间】：2016-06-11 00:53:57
【问题描述】：

我有下面的代码使用 Slick Slider 来旋转 div，它工作正常，我想在与 div 一起旋转的行 cal-rosters div 上方添加文本，并且所有三个都显示出来。

例如。每个 div 是一天，星期三，星期四，星期五。 “星期三、星期四、星期五”文本应始终显示在下方“行cale-rosters” div 上方，“cale-date” div 下方。但是当您单击星期三时，只有第一个 div 显示，当单击星期四时，仅显示第二个 div，单击 Friday 时仅显示第三个 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>

【问题讨论】：

你能在JSfiddle上添加一个例子吗，它可能对你有用，tnx
我无法在 jsfiddle 中发布 javascript。如果您熟悉我使用的滑块kenwheeler.github.io/slick，那么那里有示例。
这里有一个我写的example，帮助我理解你想要什么。为什么不将当天的名称插入随 span 旋转的 div 中？
我更新了代码，我的滑块使用了“日历”div，我需要一个上面的 div 与它同步，它具有不同的 css 属性等。我可以只使用相同的 div 类并单独分配 css 属性吗？

标签： javascript html css

【解决方案1】：

看这个solution我已经添加了一个滑动事件，所以如果你用鼠标移动，右边或左边的内容你可以看到'cale-date'内容的变化。也许这可以成为当滑块改变时改变标题内容的一种方式。

$('.calendar').on('swipe', function(event, slick, direction){
  console.log(direction);
  $('.cale-date').html(direction);
});

【讨论】：