@keyframes splide-loading { 0% {transform: rotate(0) } to { transform: rotate(1turn) } } /* ---- Basic Setup ---- */ .splide__container { position: relative; box-sizing: border-box } .splide { width: 100%; float: left; margin: 0; padding: 0; visibility: hidden; position: relative; outline: none; } .splide__list { margin: 0!important; padding: 0!important; width: 100%!important; will-change: transform ; } .widget .splide__slide { width: 100%!important; } .splide__slide { width: 100%; float: left; margin: 0; padding: 0; position: relative; outline: none; box-sizing: border-box; list-style-type: none!important; flex-shrink: 0; } .splide__slide img { width: 100%; margin: 0; padding: 0; vertical-align: bottom; } .splide.is-active .splide__list { display: flex; } .splide__pagination { display: inline-flex; align-items: center; width: 95%; flex-wrap: wrap; justify-content: center; margin: 0; } .splide__pagination li { list-style-type: none; display: inline-block; line-height: 1; margin: 0; } .splide__slider { position: relative; } .splide__spinner { display: inline-block; width: 20px; height: 20px; margin: auto; padding: 0; border: 2px solid #20b2aa; border-left-color: transparent; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; border: 2px solid #999; animation: splide-loading 1s linear infinite; } .splide__track { position: relative; z-index: 0; overflow: hidden; } /* ---- Navigation Arrows ---- */ .splide__arrow { position: absolute; z-index: 1; top: 50%; transform: translateY(-50%); border: none; padding: 0; background: transparent; } .splide__arrow svg { width: 20px; height: 20px; fill: #20b2aa; transition: fill .2s linear; } .splide__arrow:hover { cursor: pointer; } .splide__arrow:hover svg { fill: #57e1d9; } .splide__arrow:focus { outline: none; } .splide__arrow--prev { left: 5px; } .splide__arrow--prev svg { transform: scaleX(-1); } .splide__arrow--next { right: 5px; } .splide--draggable>.splide__track>.splide__list>.splide__slide { -webkit-user-select: none; user-select: none; } .splide--fade>.splide__track>.splide__list { display: block; } .splide--fade>.splide__track>.splide__list>.splide__slide { position: absolute; top: 0; left: 0; z-index: 0; opacity: 0; } .splide--fade>.splide__track>.splide__list>.splide__slide.is-active { position: relative; z-index: 1; opacity: 1; } .splide--rtl { direction: rtl; } .splide--ttb>.splide__track>.splide__list { display: block; } .splide--ttb>.splide__pagination { width: auto; } .splide__pagination { position: absolute; z-index: 1; bottom: 5px; left: 50%; transform: translateX(-50%); padding: 0; } .widget .splide__pagination { position: absolute; z-index: 1; bottom: 20px; left: 50%; transform: translateX(-50%); padding: 0; } .splide__pagination__page { display: inline-block; width: 15px; height: 4px; background:rgba(255,255,255,.4); margin: 3px; padding: 0; transition: all .2s linear; border: none; } .splide__pagination__page.is-active { background: #20b2aa; } .splide__pagination__page:hover { cursor: pointer; background: #57e1d9; } .splide__pagination__page:focus { outline: none; } .splide__progress__bar { width: 0; height: 3px; background: #20b2aa; } .splide--nav>.splide__track>.splide__list>.splide__slide { border: 3px solid #fff; cursor: pointer; opacity: .7; border-radius: 4px; } .splide--nav>.splide__track>.splide__list>.splide__slide.is-active { border-color: #20b2aa; opacity: 1; } .splide--nav>.splide__track>.splide__list>.splide__slide:focus { outline: none; } .splide--rtl>.splide__arrows .splide__arrow--prev, .splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev { right: 1em; left: auto; } .splide--rtl>.splide__arrows .splide__arrow--prev svg, .splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg { transform: scaleX(1); } .splide--rtl>.splide__arrows .splide__arrow--next, .splide--rtl>.splide__track>.splide__arrows .splide__arrow--next { left: 1em; right: auto; } .splide--rtl>.splide__arrows .splide__arrow--next svg, .splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg { transform: scaleX(-1); } .splide--ttb>.splide__arrows .splide__arrow, .splide--ttb>.splide__track>.splide__arrows .splide__arrow { left: 50%; transform: translate(-50%); } .splide--ttb>.splide__arrows .splide__arrow--prev, .splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev { top: 1em; } .splide--ttb>.splide__arrows .splide__arrow--prev svg, .splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg { transform: rotate(-90deg); } .splide--ttb>.splide__arrows .splide__arrow--next, .splide--ttb>.splide__track>.splide__arrows .splide__arrow--next { top: auto; bottom: 1em; } .splide--ttb>.splide__arrows .splide__arrow--next svg, .splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg { transform: rotate(90deg); } .splide--ttb>.splide__pagination { display: flex; flex-direction: column; bottom: 50%; left: auto; right: 1em; transform: translateY(50%); } .splide--ttb>.splide__pagination .splide__pagination__page { width: 5px; height: 20px; } .splide-caption { position: absolute; top: 16px; left: 30px; background: rgba(0,0,0,.3); color: #ffffff; }