.flex-slider { position: relative; overflow: hidden; width: 100%; height: 0; min-height: 1px; padding-top: 44%; } .flex-slider > .slides { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: 0; padding: 0; list-style-type: none; /*overflow-scrolling: auto;*/ /* hide IE scrollbar */ -ms-overflow-style: none; } /* hide WebKit scrollbar */ .flex-slider > .slides::-webkit-scrollbar { display: none; } .flex-slider.horizontal > .slides { bottom: -12px; /* scrollbar fix */ display: flex; scroll-snap-type: x mandatory; -ms-scroll-snap-type: x mandatory; overflow-x: scroll; overflow-y: hidden; } .flex-slider.vertical > .slides { right: -12px; /* scrollbar fix */ scroll-snap-type: y mandatory; -ms-scroll-snap-type: y mandatory; overflow-y: scroll; overflow-x: hidden; } .flex-slider .slides > li { position: relative; margin: 0; padding: 0; scroll-snap-align: start; /* for background-image */ background-repeat: no-repeat; background-size: cover; background-position: center; } .flex-slider.horizontal .slides > li { width: 100%; height: auto; display: inline-block; flex-shrink: 0; } .flex-slider.vertical .slides > li { height: 100%; width: auto; } .flex-slider > .slides > li > img { width: 100%; height: auto; } .flex-slider > .controls { right: 0; } .flex-slider.horizontal > .controls { position: absolute; left: 0; bottom: 15px; text-align: center; } .flex-slider.vertical > .controls { position: absolute; top: 50%; right: 25px; transform: translate(0, -50%); display: block; } .flex-slider.vertical > .controls::after { display: table; content: ''; clear: both; } .flex-slider.horizontal > .controls.thumbs { height: 10%; } .flex-slider.vertical > .controls.thumbs { width: 10%; } .flex-slider > .controls > li { display: inline-block; outline: none; background-color: #fff; opacity: 0.8; cursor: pointer; } .flex-slider.horizontal > .controls > li { display: inline-block; margin: 0 5px; } .flex-slider.vertical > .controls > li { display: block; margin: 5px 0; } .flex-slider > .controls.bubbles > li { border: 1px solid #000; transition: border 500ms ease-out; width: 0.85em; height: 0.85em; border-radius: 50%; } .flex-slider > .controls.thumbs > li { border: 2px solid #000; transition: border 500ms ease-out; } .flex-slider > .controls.bubbles > li.active { background-color: #000; } .flex-slider > .controls.thumbs > li.active { border-color: #fff; } .flex-slider > .controls.thumbs > li { position: relative; background-repeat: no-repeat; background-size: cover; background-position: center; } .flex-slider.horizontal > .controls.thumbs > li { width: 10%; height: 100%; } .flex-slider.vertical > .controls.thumbs > li { padding-top: 44%; width: 100%; } .flex-slider > .prev, .flex-slider > .next, .flex-slider > .play, .flex-slider > .pause { cursor: pointer; position: absolute; } .flex-slider.horizontal > .prev, .flex-slider.horizontal > .next { top: 50%; transform: translate(0, -50%); } .flex-slider.vertical > .prev, .flex-slider.vertical > .next { left: 50%; transform: translate(-50%, 0); } .flex-slider.horizontal > .prev { left: 15px; } .flex-slider.horizontal > .next { right: 15px; } .flex-slider.vertical > .prev { top: 15px; } .flex-slider.vertical > .next { bottom: 15px; } .flex-slider > .prev.hidden, .flex-slider > .next.hidden { display: none; } .flex-slider > .prev::after, .flex-slider > .next::after, .flex-slider > .play::after, .flex-slider > .pause::after { display: inline-block; color: #fff; font-size: 2em; } .flex-slider.horizontal > .prev::after { content: '\140a'; } .flex-slider.horizontal > .next::after { content: '\1405'; } .flex-slider.vertical > .prev::after { content: '\1403'; } .flex-slider.vertical > .next::after { content: '\1401'; } .flex-slider > .play, .flex-slider > .pause { top: 50%; left: 50%; transform: translate(-50%, -50%); } .flex-slider:hover > .play::after { content: '\23EF'; } .flex-slider:hover > .pause::after { content: '\23f8'; }