You are here

Home » API reference » Slick Carousel 7.2

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

Same filename and directory in other branches
  1. 8.2 css/theme/slick.theme--classic.css
  2. 8 css/theme/slick.theme--classic.css
  3. 7.3 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.  * Transform is more performed than positions.

  5.  */

  6. 

  7. .slick--skin--classic .slick__slide {

  8.   overflow: hidden;

  9. }

  10. 

  11. .slick--skin--classic .slide__caption {

  12.   background-color: #000;

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

  14.   color: #fff;

  15.   left: auto;

  16.   margin: 0;

  17.   min-height: 80px;

  18.   padding: 15px;

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

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

  21.   width: 100%;

  22. }

  23. 

  24. .slick--skin--classic .slide__description {

  25.   margin: 0;

  26. }

  27. 

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

  29.   background: none;

  30.   color: #38465c;

  31. }

  32. 

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

  34.   color: #fff;

  35.   opacity: 0;

  36.   visibility: hidden;

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

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

  39.   -webkit-backface-visibility: hidden;

  40. }

  41. 

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

  43.   opacity: 1;

  44.   visibility: visible;

  45. }

  46. 

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

  48.   .slick--skin--classic .slide__caption {

  49.     height: 100%;

  50.     min-height: 100%;

  51.     padding: 60px 30px;

  52.     top: 0;

  53.     width: 22%;

  54.   }

  55. 

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

  57.     margin: 0 !important;

  58.     padding: 15px;

  59.     width: 100%;

  60.   }

  61. 

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

  63.     height: 120px;

  64.     left: 50%;

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

  66.     min-height: 120px;

  67.     top: 50%;

  68.     width: 80%;

  69.   }

  70. 

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

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

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

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

  75.     height: auto;

  76.     min-height: 80px;

  77.     padding: 30px;

  78.     width: 100%;

  79.   }

  80. 

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

  82.     bottom: 0;

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

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

  85.     transform: translateY(210px);

  86.     min-height: 120px;

  87.     top: auto;

  88.   }

  89. 

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

  91.     margin-bottom: 30px;

  92.   }

  93. 

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

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

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

  97.     left: 0;

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

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

  100.     transform: translateX(-320px);

  101.   }

  102. 

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

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

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

  106.     left: auto;

  107.     right: 0;

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

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

  110.     transform: translateX(320px);

  111.   }

  112. 

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

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

  115.     top: 0;

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

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

  118.     transform: translateY(-210px);

  119.   }

  120. 

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

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

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

  124.     transform: translateY(0);

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

  126.     transition-delay: 0s;

  127.   }

  128. }