Using slick

Besides listing things from top to bottom, we may sometimes put information into a left/right swipping carousel. Slick is a great one among thoes many carousel or slider library. The following is an example showing a trip planning with multiple days. Putting these day information into horizontal list makes the website more organized, and makes use of the common mobile swiping gesture.

See the Pen Example of using Slick by Thomas Seng Hin Mak (@makzan) on CodePen.

<div class="cards">
  <div class="card">
    <h2>Day 1</h2>
    <p>Blah Blah Blah...</p>
    <p>Blah Blah Blah...</p>
    <p>Blah Blah Blah...</p>
    <p>Blah Blah Blah...</p>
  </div>
  <div class="card">
    <h2>Day 2</h2>
    <p>Blah Blah Blah...</p>
    <p>Blah Blah Blah...</p>
    <p>Blah Blah Blah...</p>
    <p>Blah Blah Blah...</p>
  </div>
  <div class="card">
    <h2>Day 3</h2>
    <p>Blah Blah Blah...</p>
    <p>Blah Blah Blah...</p>
    <p>Blah Blah Blah...</p>
    <p>Blah Blah Blah...</p>
  </div>
</div>

.card {
  background: STEELBLUE;
  color: #fefefe;
  padding: 1rem;  
  margin: .8rem;
}

This JavaScript library requires jQuery. We initialize the slick on specific element after the jQuery ready event. Center mode is important because it shows part of the neighbour cards. This lets user knows there are something on the side, so that user will swipe.

$(function(){
  $('.cards').slick({
    centerMode: true,
  });
});