You are here

Home » API reference » Slick Carousel 8.2

slick.theme--classic.css in Slick Carousel 8.2

Same filename and directory in other branches
  1. 8 css/theme/slick.theme--classic.css
  2. 7.3 css/theme/slick.theme--classic.css
  3. 7.2 css/theme/slick.theme--classic.css

Detailed stylings are all yours, get yourself dirty.

Transform is more performed than positions.

File

css/theme/slick.theme--classic.css
View source 
  1. /**

  2.  * @file

  3.  * Detailed stylings are all yours, get yourself dirty.

  4.  *

  5.  * Transform is more performed than positions.

  6.  */

  7. 

  8. .slick--skin--classic .slick__slide {

  9.   overflow: hidden;

  10. }

  11. 

  12. .slick--skin--classic .slide__caption {

  13.   box-sizing: border-box; /* dups due to csslint ignoring inheritance */

  14.   background-color: #000;

  15.   background-color: rgba(0, 0, 0, 0.8);

  16.   color: #fff;

  17.   left: auto;

  18.   margin: 0;

  19.   min-height: 80px;

  20.   padding: 15px;

  21.   -webkit-transition: -webkit-transform 1s ease-in-out 0.2s;

  22.   transition: transform 1s ease-in-out 0.2s;

  23.   width: 100%;

  24. }

  25. 

  26. .slick--skin--classic .slide__description {

  27.   margin: 0;

  28. }

  29. 

  30. .slick--skin--classic .slide--caption--below .slide__caption {

  31.   background: none;

  32.   color: #38465c;

  33. }

  34. 

  35. .slick--skin--classic .slide--caption--center .slide__caption {

  36.   color: #fff;

  37.   opacity: 0;

  38.   visibility: hidden;

  39.   -webkit-transition: all 0.4s ease-in-out 0s;

  40.   transition: all 0.4s ease-in-out 0s;

  41.   -webkit-backface-visibility: hidden;

  42. }

  43. 

  44. .slick--skin--classic .slide--caption--center:hover .slide__caption {

  45.   opacity: 1;

  46.   visibility: visible;

  47. }

  48. 

  49. @media (min-width: 64em) {

  50.   .slick--skin--classic .slide__caption {

  51.     box-sizing: border-box; /* dups due to csslint ignoring inheritance */

  52.     height: 100%;

  53.     min-height: 100%;

  54.     padding: 60px 30px;

  55.     top: 0;

  56.     width: 22%;

  57.   }

  58. 

  59.   .slick--skin--classic .slide__caption .slide__data {

  60.     box-sizing: border-box; /* dups due to csslint ignoring inheritance */

  61.     margin: 0 !important; /* csslint allow: known-properties, important */

  62.     padding: 15px;

  63.     width: 100%;

  64.   }

  65. 

  66.   .slick--skin--classic .slide--caption--center .slide__caption {

  67.     height: 120px;

  68.     left: 50%;

  69.     margin: -60px 0 0 -40%;

  70.     min-height: 120px;

  71.     top: 50%;

  72.     width: 80%;

  73.   }

  74. 

  75.   .slick--skin--classic .slide--caption--top .slide__caption,

  76.   .slick--skin--classic .slide--caption--center-top .slide__caption,

  77.   .slick--skin--classic .slide--caption--bottom .slide__caption,

  78.   .slick--skin--classic .slide--caption--below .slide__caption {

  79.     box-sizing: border-box; /* dups due to csslint ignoring inheritance */

  80.     height: auto;

  81.     min-height: 80px;

  82.     padding: 30px;

  83.     width: 100%;

  84.   }

  85. 

  86.   .slick--skin--classic .slide--caption--bottom .slide__caption {

  87.     bottom: 0;

  88.     -ms-transform: translateY(210px);

  89.     -webkit-transform: translateY(210px);

  90.     transform: translateY(210px);

  91.     min-height: 120px;

  92.     top: auto;

  93.   }

  94. 

  95.   .slick--skin--classic .slide--caption--stage-zebra .slide__title {

  96.     margin-bottom: 30px;

  97.   }

  98. 

  99.   .slick--skin--classic .slide--caption--stage-zebra:nth-child(odd) .slide__caption,

  100.   .slick--skin--classic .slide--caption--stage-left .slide__caption,

  101.   .slick--skin--classic .slide--caption--left .slide__caption {

  102.     left: 0;

  103.     -ms-transform: translateX(-320px);

  104.     -webkit-transform: translateX(-320px);

  105.     transform: translateX(-320px);

  106.   }

  107. 

  108.   .slick--skin--classic .slide--caption--stage-zebra:nth-child(even) .slide__caption,

  109.   .slick--skin--classic .slide--caption--stage-right .slide__caption,

  110.   .slick--skin--classic .slide--caption--right .slide__caption {

  111.     left: auto;

  112.     right: 0;

  113.     -ms-transform: translateX(320px);

  114.     -webkit-transform: translateX(320px);

  115.     transform: translateX(320px);

  116.   }

  117. 

  118.   .slick--skin--classic .slide--caption--top .slide__caption,

  119.   .slick--skin--classic .slide--caption--center-top .slide__caption {

  120.     top: 0;

  121.     -ms-transform: translateY(-210px);

  122.     -webkit-transform: translateY(-210px);

  123.     transform: translateY(-210px);

  124.   }

  125. 

  126.   .slick--skin--classic .slick__slide.slick-active .slide__caption {

  127.     -ms-transform: translateY(0);

  128.     -webkit-transform: translateY(0);

  129.     transform: translateY(0);

  130.     -webkit-transition-delay: 0s;

  131.     transition-delay: 0s;

  132.   }

  133. }