You are here

Home » API reference » Slick Carousel 7.3

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

Same filename and directory in other branches
  1. 8.2 css/theme/slick.theme--asnavfor.css
  2. 8 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.   border: 6px solid transparent;

  40.   cursor: pointer;

  41.   position: relative;

  42.   width: 100%;

  43. }

  44. 

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

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

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

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

  49.   transform: scale(1.3);

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

  51.   transition-delay: 0s;

  52.   z-index: 4;

  53. }

  54. 

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

  56.   content: '';

  57.   display: block;

  58.   border: 8px solid transparent;

  59.   border-top: 0;

  60.   border-bottom-color: #fff;

  61.   height: 0;

  62.   left: 50%;

  63.   margin-left: -8px;

  64.   position: absolute;

  65.   top: -5px;

  66.   width: 0;

  67.   z-index: 1;

  68. }

  69. 

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

  71.   border-color: #fff;

  72. }

  73. 

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

  75.   padding-bottom: 40px;

  76.   padding-top: 40px;

  77. }

  78. 

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

  80.   pointer-events: none;

  81.   opacity: 0;

  82. }

  83. 

  84. /**

  85.  * Thumnails layout.

  86.  */

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

  88.   top: auto;

  89.   bottom: -6px;

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

  91.   border-bottom: 0;

  92. }

  93. 

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

  95.   margin-bottom: 0;

  96.   z-index: 9;

  97. }

  98. 

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

  100.   padding-bottom: 18px;

  101. }