You are here

Home » API reference » Slick Carousel 7.2

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

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.3 css/theme/slick.theme--asnavfor.css

asNavFor. Main display has class "slick--display--main". Thumbnail has class "slick--display--thumbnail". Tips: make sure to use odd number for slideToShow with centerMode on.

File

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

  2.  * @file

  3.  * asNavFor.

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

  5.  * Thumbnail has class "slick--display--thumbnail".

  6.  * Tips: make sure to use odd number for slideToShow with centerMode on.

  7.  */

  8. 

  9. .slick--display--thumbnail.slick--skin--asnavfor {

  10.   margin-left: auto;

  11.   margin-right: auto;

  12.   padding: 0;

  13.   width: 96%;

  14. }

  15. 

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

  17.   margin: 0 -20px;

  18.   padding: 30px 40px;

  19. }

  20. 

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

  22.   margin: 0;

  23. }

  24. 

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

  26.   background: #fff;

  27. }

  28. 

  29. .slick--display--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--display--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--display--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: 3;

  53. }

  54. 

  55. .slick--display--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--display--thumbnail.slick--skin--asnavfor .slick__slide.slick-current img {

  71.   border-color: #fff;

  72. }

  73. 

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

  75.   padding-bottom: 40px;

  76.   padding-top: 40px;

  77. }

  78. 

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

  80.   pointer-events: none;

  81.   opacity: 0;

  82. }

  83. 

  84. .slick--display--thumbnail.slick--skin--asnavfor .slick__arrow .slick-prev {

  85.   left: -20px;

  86. }

  87. 

  88. .slick--display--thumbnail.slick--skin--asnavfor .slick__arrow .slick-next {

  89.   right: -20px;

  90. }