You are here

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

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. .slick--thumbnail.slick--skin--asnavfor .slick-list {
  16. margin: 0 auto;
  17. padding: 30px 0;
  18. }
  19. .slick--thumbnail.slick--skin--asnavfor .slide__caption p {
  20. margin: 0;
  21. }
  22. .slick--thumbnail.slick--skin--asnavfor .slick-current {
  23. background: #fff;
  24. }
  25. .slick--thumbnail.slick--skin--asnavfor .slick__slide {
  26. margin: 0 2px;
  27. overflow: visible;
  28. -webkit-backface-visibility: hidden;
  29. backface-visibility: hidden;
  30. -webkit-transition: -webkit-transform 0.4s ease-in-out 0.2s;
  31. transition: transform 0.4s ease-in-out 0.2s;
  32. }
  33. .slick--thumbnail.slick--skin--asnavfor .slick__slide img {
  34. border: 6px solid transparent;
  35. cursor: pointer;
  36. position: relative;
  37. width: 100%;
  38. }
  39. .slick--thumbnail.slick--skin--asnavfor .slick__slide.slick-current {
  40. box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
  41. -ms-transform: scale(1.3);
  42. -webkit-transform: scale(1.3);
  43. transform: scale(1.3);
  44. -webkit-transition-delay: 0s;
  45. transition-delay: 0s;
  46. z-index: 4;
  47. }
  48. .slick--thumbnail.slick--skin--asnavfor .slick__slide.slick-current::before {
  49. content: '';
  50. display: block;
  51. border: 8px solid transparent;
  52. border-top: 0;
  53. border-bottom-color: #fff;
  54. height: 0;
  55. left: 50%;
  56. margin-left: -8px;
  57. position: absolute;
  58. top: -5px;
  59. width: 0;
  60. z-index: 1;
  61. }
  62. .slick--thumbnail.slick--skin--asnavfor .slick__slide.slick-current img {
  63. border-color: #fff;
  64. }
  65. .slick--thumbnail.slick--skin--asnavfor .slick-track {
  66. padding-bottom: 40px;
  67. padding-top: 40px;
  68. }
  69. .slick--thumbnail.slick--skin--asnavfor .slick__arrow .slick-disabled {
  70. pointer-events: none;
  71. opacity: 0;
  72. }
  73. /**
  74. * Thumnails layout.
  75. */
  76. .slick-wrapper--tn-top .slick--thumbnail.slick--skin--asnavfor .slick__slide.slick-current::before {
  77. top: auto;
  78. bottom: -6px;
  79. border-top: 8px solid #fff;
  80. border-bottom: 0;
  81. }
  82. .slick-wrapper--tn-top .slick--thumbnail.slick--skin--asnavfor {
  83. margin-bottom: 0;
  84. z-index: 9;
  85. }
  86. .slick-wrapper--tn-top .slick--thumbnail.slick--skin--asnavfor .slick-list {
  87. padding-bottom: 18px;
  88. }