You are here

Home » API reference » Slick Carousel 8.2

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

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

Provides basic thumbnail asNavFor skin.

Main display has class "slick--main". Thumbnail has class "slick--thumbnail".

Tips: Be sure to use odd number for slideToShow with centerMode on.

File

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

  2.  * @file

  3.  * Provides basic thumbnail asNavFor skin.

  4.  *

  5.  * Main display has class "slick--main".

  6.  * Thumbnail has class "slick--thumbnail".

  7.  *

  8.  * Tips: Be sure to use odd number for slideToShow with centerMode on.

  9.  */

  10. .slick--thumbnail.slick--skin--asnavfor {

  11.   margin-left: auto;

  12.   margin-right: auto;

  13.   padding: 0;

  14. }

  15. 

  16. .slick--thumbnail.slick--skin--asnavfor .slick-list {

  17.   margin: 0 auto;

  18.   padding: 30px 0;

  19. }

  20. 

  21. .slick--thumbnail.slick--skin--asnavfor .slide__caption p {

  22.   margin: 0;

  23. }

  24. 

  25. .slick--thumbnail.slick--skin--asnavfor .slick-current {

  26.   background: #fff;

  27. }

  28. 

  29. .slick--thumbnail.slick--skin--asnavfor .slick__slide {

  30.   margin: 0 2px;

  31.   overflow: visible;

  32.   -webkit-backface-visibility: hidden;

  33.   backface-visibility: hidden;

  34.   -webkit-transition: -webkit-transform 0.4s ease-in-out 0.2s;

  35.   transition: transform 0.4s ease-in-out 0.2s;

  36. }

  37. 

  38. .slick--thumbnail.slick--skin--asnavfor .slick__slide img {

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

  40.   border: 6px solid transparent;

  41.   cursor: pointer;

  42.   position: relative;

  43.   width: 100%;

  44. }

  45. 

  46. .slick--thumbnail.slick--skin--asnavfor .slick__slide.slick-current {

  47.   box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);

  48.   -ms-transform: scale(1.3);

  49.   -webkit-transform: scale(1.3);

  50.   transform: scale(1.3);

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

  52.   transition-delay: 0s;

  53.   z-index: 4;

  54. }

  55. 

  56. .slick--thumbnail.slick--skin--asnavfor .slick__slide.slick-current::before {

  57.   content: '';

  58.   display: block;

  59.   border: 8px solid transparent;

  60.   border-top: 0;

  61.   border-bottom-color: #fff;

  62.   height: 0;

  63.   left: 50%;

  64.   margin-left: -8px;

  65.   position: absolute;

  66.   top: -5px;

  67.   width: 0;

  68.   z-index: 1;

  69. }

  70. 

  71. .slick--thumbnail.slick--skin--asnavfor .slick__slide.slick-current img {

  72.   border-color: #fff;

  73. }

  74. 

  75. .slick--thumbnail.slick--skin--asnavfor .slick-track {

  76.   padding-bottom: 40px;

  77.   padding-top: 40px;

  78. }

  79. 

  80. .slick--thumbnail.slick--skin--asnavfor .slick__arrow .slick-disabled {

  81.   pointer-events: none;

  82.   opacity: 0;

  83. }

  84. 

  85. /**

  86.  * Thumnails layout.

  87.  */

  88. .slick-wrapper--tn-top .slick--thumbnail.slick--skin--asnavfor .slick__slide.slick-current::before {

  89.   top: auto;

  90.   bottom: -6px;

  91.   border-top: 8px solid #fff;

  92.   border-bottom: 0;

  93. }

  94. 

  95. .slick-wrapper--tn-top .slick--thumbnail.slick--skin--asnavfor {

  96.   margin-bottom: 0;

  97.   z-index: 9;

  98. }

  99. 

  100. .slick-wrapper--tn-top .slick--thumbnail.slick--skin--asnavfor .slick-list {

  101.   padding-bottom: 18px;

  102. }