You are here

Home » API reference » Slick Carousel 7.2

slick.theme--3d-back.css in Slick Carousel 7.2

. Adds 3d view with focal point at back, best with centerMode + 3 slidesToShow. Detailed stylings are all yours, get yourself dirty.

File

css/theme/slick.theme--3d-back.css
View source 
  1. /**

  2.  * @file.

  3.  * Adds 3d view with focal point at back, best with centerMode + 3 slidesToShow.

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

  5.  */

  6. 

  7. .slick--skin--3d-back .slick-initialized {

  8.   overflow: hidden;

  9.   padding-bottom: 30px;

  10.   padding-top: 30px;

  11. }

  12. 

  13. .slick--skin--3d-back .slick-initialized .slick-list {

  14.   margin: 0 -120px;

  15. }

  16. 

  17. @media (min-width: 65em) {

  18.   .slick--skin--3d-back .slick-initialized .slick-list {

  19.     margin: 0 -210px;

  20.   }

  21. }

  22. 

  23. .slick--skin--3d-back .slick-initialized .slide {

  24.   overflow: hidden;

  25. }

  26. 

  27. .slick--skin--3d-back .slick-initialized .slide .slide__content {

  28.   -webkit-perspective: 1500px;

  29.   -ms-perspective: 1500px;

  30.   perspective: 1500px;

  31.   -webkit-transform-style: preserve-3d;

  32.   -ms-transform-style: preserve-3d;

  33.   transform-style: preserve-3d;

  34. }

  35. 

  36. .slick--skin--3d-back .slick-initialized .slide .slide__media {

  37.   margin: 30px 0;

  38.   outline: 1px solid transparent;

  39.   -ms-transform: rotateY(25deg);

  40.   -webkit-transform: rotateY(25deg);

  41.   transform: rotateY(25deg);

  42.   -webkit-backface-visibility: hidden;

  43.   backface-visibility: hidden;

  44.   -webkit-transition: opacity 1s ease 0s, -webkit-transform 1s;

  45.   transition: opacity 1s ease 0s, transform 1s;

  46.   -webkit-transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

  47.   transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);

  48. }

  49. 

  50. .slick--skin--3d-back .slick-initialized .slide .slide__caption {

  51.   bottom: 0;

  52.   padding: 0;

  53.   position: relative;

  54.   opacity: 0;

  55.   visibility: hidden;

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

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

  58.   -webkit-backface-visibility: hidden;

  59.   -webkit-transform: scale(0);

  60.   -ms-transform: scale(0);

  61.   transform: scale(0);

  62. }

  63. 

  64. .slick--skin--3d-back .slick-initialized .slick-current ~ .slide .slide__media {

  65.   -ms-transform: rotateY(-25deg);

  66.   -webkit-transform: rotateY(-25deg);

  67.   transform: rotateY(-25deg);

  68. }

  69. 

  70. .slick--skin--3d-back .slick-initialized .slick-current.slide .slide__media {

  71.   -ms-transform: rotateY(0deg);

  72.   -webkit-transform: rotateY(0deg);

  73.   transform: rotateY(0deg);

  74. }

  75. 

  76. .slick--skin--3d-back .slick-initialized .slick-current.slide .slide__caption {

  77.   bottom: auto;

  78.   position: relative;

  79.   opacity: 1;

  80.   visibility: visible;

  81.   -webkit-transform: scale(1);

  82.   -ms-transform: scale(1);

  83.   transform: scale(1);

  84. }

  85. 

  86. .slick--skin--3d-back .slick-initialized .slick__arrow {

  87.   left: 50%;

  88.   margin-left: -25%;

  89.   width: 50%;

  90. }

  91. 

  92. .slick--skin--3d-back .slick-initialized .slick-dots {

  93.   bottom: 0;

  94. }