slick.module.css in Slick Carousel 8.2
Same filename and directory in other branches
Provided basic layout for the Slick based on custom settings.
File
css/layout/slick.module.cssView source
- /**
- * @file
- * Provided basic layout for the Slick based on custom settings.
- */
-
- /**
- * Complex layout needs custom refinement for mobile, hence it is reasonable
- * to apply for Desktop up. Adjust mobile version accordingly.
- */
- @media (min-width: 64em) {
-
- /* Fixed FireFox draggable issue, avoid asNavFor thumbnails. */
- .slick--main .slick__slide img {
- pointer-events: none;
- }
-
- .slide__caption {
- left: 0;
- padding: 20px;
- top: 10%;
- }
-
- .slide--caption--center .slide__caption,
- .slide--caption--center-top .slide__caption,
- .slide--caption--left .slide__caption,
- .slide--caption--right .slide__caption {
- width: 42%;
- }
-
- .slide--caption--center .slide__caption {
- margin-top: -16%;
- position: absolute;
- top: 50%;
- }
-
- .slide--caption--center .slide__caption,
- .slide--caption--center-top .slide__caption {
- left: 50%;
- padding: 0;
- position: absolute;
- text-align: center;
- transform: translateX(-50%);
- }
-
- .slide--caption--center .slide__caption {
- transform: translate(-50%, -50%);
- }
-
- .slide--caption--left .slide__caption {
- position: absolute;
- }
-
- .slide--caption--right .slide__caption {
- left: auto;
- position: absolute;
- right: 0;
- }
-
- .slide--caption--top .slide__caption,
- .slide--caption--bottom .slide__caption {
- position: absolute;
- width: 100%;
- }
-
- .slide--caption--top .slide__caption {
- top: 0;
- }
-
- .slide--caption--bottom .slide__caption {
- bottom: 0;
- top: auto;
- }
-
- .slide--caption--stage-left .slide__caption,
- .slide--caption--stage-right .slide__caption,
- .slide--caption--stage-zebra .slide__caption {
- left: 50%;
- padding: 0;
- position: absolute;
- transform: translateX(-50%);
- width: 82%;
- }
-
- .slick--thumbnail .slide__caption,
- .slide--caption--below .slide__caption {
- padding: 20px 0;
- position: relative;
- top: auto;
- width: 100%;
- }
-
- .slick--thumbnail .slide__caption {
- padding: 5px 6px;
- }
-
- .slick--multiple-view .slide--caption--center .slide__caption,
- .slick--multiple-view .slide--caption--center-top .slide__caption {
- left: 0;
- margin-left: auto;
- width: 100%;
- }
-
- /** Thumbnail position */
- .slick-wrapper--tn-left .slick--thumbnail {
- float: left;
- left: 0;
- width: 20%;
- }
-
- .slick-wrapper--tn-left .slick--main {
- margin-left: 20%;
- }
-
- .slick-wrapper--tn-right .slick--thumbnail {
- float: right;
- right: 0;
- width: 20%;
- }
-
- .slick-wrapper--tn-right .slick--main {
- margin-right: 20%;
- }
-
- .slick-wrapper--tn-overlay .slick--main {
- margin-left: auto;
- margin-right: auto;
- }
-
- .slick-wrapper--tn-overlay .slick--thumbnail {
- height: 100%;
- max-height: 90%;
- overflow: hidden;
- position: absolute;
- top: 0;
- z-index: 9;
- }
-
- .slick-wrapper--tn-over-top .slick--thumbnail {
- height: auto;
- max-height: none;
- width: 100%;
- }
-
- div[class*="slick-wrapper--tn"] .slick__slider::after {
- clear: none;
- }
- }