Make Slick.js sliders load gracefully

graceful.css

/*
 * Make Slick.js sliders load gracefully
 */
.graceful {
  visibility: hidden;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  opacity: 0;
}

.graceful.slick-initialized {
  visibility: visible;
  opacity: 1;
}

.graceful .slick-slide {
  display: none;
}

.graceful .slick-slide:first-child {
  display: block;
  visibility: hidden;
}

.graceful.slick-initialized .slick-slide {
  display: block !important;
  visibility: visible !important;
}