You are here

Home » API reference » Slick Carousel 8

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

Same filename and directory in other branches
  1. 8.2 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.   background-color: #000;

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

  15.   color: #fff;

  16.   left: auto;

  17.   margin: 0;

  18.   min-height: 80px;

  19.   padding: 15px;

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

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

  22.   width: 100%;

  23. }

  24. 

  25. .slick--skin--classic .slide__description {

  26.   margin: 0;

  27. }

  28. 

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

  30.   background: none;

  31.   color: #38465c;

  32. }

  33. 

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

  35.   color: #fff;

  36.   opacity: 0;

  37.   visibility: hidden;

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

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

  40.   -webkit-backface-visibility: hidden;

  41. }

  42. 

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

  44.   opacity: 1;

  45.   visibility: visible;

  46. }

  47. 

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

  49.   .slick--skin--classic .slide__caption {

  50.     height: 100%;

  51.     min-height: 100%;

  52.     padding: 60px 30px;

  53.     top: 0;

  54.     width: 22%;

  55.   }

  56. 

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

  58.     margin: 0 !important;

  59.     padding: 15px;

  60.     width: 100%;

  61.   }

  62. 

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

  64.     height: 120px;

  65.     left: 50%;

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

  67.     min-height: 120px;

  68.     top: 50%;

  69.     width: 80%;

  70.   }

  71. 

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

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

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

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

  76.     height: auto;

  77.     min-height: 80px;

  78.     padding: 30px;

  79.     width: 100%;

  80.   }

  81. 

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

  83.     bottom: 0;

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

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

  86.     transform: translateY(210px);

  87.     min-height: 120px;

  88.     top: auto;

  89.   }

  90. 

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

  92.     margin-bottom: 30px;

  93.   }

  94. 

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

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

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

  98.     left: 0;

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

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

  101.     transform: translateX(-320px);

  102.   }

  103. 

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

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

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

  107.     left: auto;

  108.     right: 0;

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

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

  111.     transform: translateX(320px);

  112.   }

  113. 

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

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

  116.     top: 0;

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

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

  119.     transform: translateY(-210px);

  120.   }

  121. 

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

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

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

  125.     transform: translateY(0);

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

  127.     transition-delay: 0s;

  128.   }

  129. }