Question

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

实施例。每个div是星期三，星期三，星期四，星期五。 “星期三，星期四，星期五”文字应该始终显示在下面的“行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>

Answer 1

看这个solution我在滑动时添加了一个事件，因此如果您使用鼠标移动右侧或左侧的内容，您可以看到“cale-date”内容更改。也许这可以是一种在滑块改变时改变标题内容的方法。

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

光滑的滑块在每张幻灯片上方放置文字

1 个答案: