Slick Slider Put Text Above Each Slide

Question

I have the below code using Slick Slider to rotate the divs which is working fine, I want to add text above the row cale-rosters div that rotates with the div and all three show up.

Ex. Each div is a day, wednesday, thursday, friday. "wednesday, thursday, friday" text should always be showing above the below 'row cale-rosters' div, below the "cale-date' div. But when you click on Wednesday, only the first div shows, when Thursday is clicked, only the second div shows, and when Friday is clicked only the third div shows.

<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

look this solution I've added an event on swipe, so if you move, with the mouse, the content on right or left you can see the 'cale-date' content change. maybe this can be a way to change the content of header when the slider change.

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