光滑的滑塊在每張幻燈片上方放置文本

Question

我有下面的代碼，使用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>

Answer 1

看這個解決方案，我已經在滑動上添加了一個事件，因此，如果用鼠標左右移動內容，則可以看到“日歷日期”內容發生了變化。 也許這是在滑塊更改時更改標頭內容的一種方法。

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