You are here

Home » API reference » Slick Carousel 8

slick.thumbnail--grid.css in Slick Carousel 8

Same filename and directory in other branches
  1. 8.2 css/components/slick.thumbnail--grid.css
  2. 7.2 css/components/slick.thumbnail--grid.css

Thumbnails displayed as a static grid instead of dots.

File

css/components/slick.thumbnail--grid.css
View source 
  1. /**

  2.  * @file

  3.  * Thumbnails displayed as a static grid instead of dots.

  4.  */

  5. 

  6. .slick .slick-dots--thumbnail-grid {

  7.   bottom: 0;

  8.   padding: 15px 0;

  9.   position: relative;

  10. }

  11. 

  12. .slick .slick-dots--thumbnail-grid li {

  13.   display: inline-block;

  14.   height: auto;

  15.   vertical-align: top;

  16.   width: 120px;

  17. }

  18. 

  19. .slick .slick-dots--thumbnail-grid button {

  20.   position: absolute;

  21.   visibility: hidden;

  22. }

  23. 

  24. .slick .slick-dots--thumbnail-grid img {

  25.   border: 2px solid transparent;

  26.   -webkit-transition: 0.3s;

  27.   transition: 0.3s;

  28. }

  29. 

  30. .slick .slick-dots--thumbnail-grid li:hover img,

  31. .slick .slick-dots--thumbnail-grid .slick-active img {

  32.   border-color: #ff6d2c;

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

  34.   transition-delay: 0s;

  35. }

  36. 

  37. /**

  38.  * Enable if the grid is displayed side by side to the Main image.

  39. 

  40. .slick .slick-dots--thumbnail-grid::after,

  41. .slick .slick-dots--thumbnail-grid .slick-dots__thumbnail::after {

  42.   clear: none;

  43.   display: none;

  44. }

  45.  */