JSFiddle - React, Tailwind, and code Playground

by giuseppe straziota

HTML

<script src="https://rawgit.com/kenwheeler/slick/master/slick/slick.js"></script>
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick-theme.css">
<link rel="stylesheet" href="https://rawgit.com/kenwheeler/slick/master/slick/slick.css">
<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>
<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>

JavaScript

$(document).ready(function(){
  $(".calendar").slick({

    autoplay: true,
    dots: true,
     
    responsive: [{ 
        breakpoint: 500,
        settings: {
            dots: false,
            arrows: false,
            infinite: false,
            slidesToShow: 2,
            slidesToScroll: 2
        } 
    }]
});

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

});