You are here

Home » API reference » Slick Carousel 8

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

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

Detailed stylings are all yours, get yourself dirty.

File

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

  2.  * @file

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

  4.  */

  5. .slick--skin--split .slide__caption {

  6.   top: 0;

  7. }

  8. 

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

  10.   .slide--caption--split-left .slide__caption,

  11.   .slide--caption--split-right .slide__caption {

  12.     left: 0;

  13.     padding: 20px;

  14.     position: relative;

  15.     top: 10%;

  16.     width: 42%;

  17.   }

  18. 

  19.   .slick--skin--split .slide--caption--split-left .slide__media,

  20.   .slick--skin--split .slide--caption--split-zebra:nth-child(odd) .slide__media {

  21.     float: left;

  22.     width: 48%;

  23.   }

  24. 

  25.   .slick--skin--split .slide--caption--split-right .slide__media,

  26.   .slick--skin--split .slide--caption--split-zebra:nth-child(even) .slide__media {

  27.     float: right;

  28.     width: 48%;

  29.   }

  30. 

  31.   .slick--skin--split .slide--caption--split-left .slide__caption,

  32.   .slick--skin--split .slide--caption--split-zebra:nth-child(odd) .slide__caption {

  33.     margin-left: 52%;

  34.     text-align: right;

  35.     width: auto;

  36.   }

  37. 

  38.   .slick--skin--split .slide--caption--split-right .slide__caption,

  39.   .slick--skin--split .slide--caption--split-zebra:nth-child(even) .slide__caption {

  40.     margin-right: 52%;

  41.     text-align: left;

  42.     width: auto;

  43.   }

  44. 

  45.   .slick--skin--split .slide--caption--split-left .slide__media,

  46.   .slick--skin--split .slide--caption--split-zebra:nth-child(odd) .slide__media {

  47.     float: left;

  48.     width: 48%;

  49.   }

  50. 

  51.   .slick--skin--split .slide--caption--split-right .slide__media,

  52.   .slick--skin--split .slide--caption--split-zebra:nth-child(even) .slide__media {

  53.     float: right;

  54.     width: 48%;

  55.   }

  56. 

  57.   .slick--skin--split .slide--caption--split-left .slide__constrained > .slide__caption,

  58.   .slick--skin--split .slide--caption--split-zebra:nth-child(odd) .slide__constrained > .slide__caption,

  59.   .slick--skin--split .slide--caption--split-left .slide__caption,

  60.   .slick--skin--split .slide--caption--split-zebra:nth-child(odd) .slide__caption {

  61.     margin-left: 52%;

  62.     width: auto;

  63.   }

  64. 

  65.   .slick--skin--split .slide--caption--split-right .slide__constrained > .slide__caption,

  66.   .slick--skin--split .slide--caption--split-zebra:nth-child(even) .slide__constrained > .slide__caption,

  67.   .slick--skin--split .slide--caption--split-right .slide__caption,

  68.   .slick--skin--split .slide--caption--split-zebra:nth-child(even) .slide__caption {

  69.     margin-right: 52%;

  70.     width: auto;

  71.   }

  72. 

  73.   .slick--skin--split .slide__caption .clearfix::after {

  74.     clear: none;

  75.   }

  76. }