Slider knapper
Wed Apr 28 2021 07:36:02 GMT+0000 (Coordinated Universal Time)
// i custom.js $('.sliderBig').owlCarousel({ loop: true, stagePadding: 0, margin: 0, autoWidth: false, lazyLoad: true, autoplay: true, nav: true, navContainer: '.customNav', navText: ["<i class='fal fa-long-arrow-left'></i>", "<i class='fal fa-long-arrow-right'></i>"], dots: true, dotsContainer: '.customDots', autoplayHoverPause: true, smartSpeed: 1000, onLoadLazy: lazySrcset, onInitialize: showSlider, responsive: { 0: { items: 1 } } }); // slut // Reset button styling input, button { all: unset } // Slider dots i bunden .owl-dots { display: block; height: 0px !important; left: 50%; transform: translateX(-50%); position: absolute; margin-top: -45px; outline-style: none; &:focus { outline: none; box-shadow: none; } } .owl-dot { width: 10px; height: 10px; background-color: #bbb !important; border-radius: 50%; display: inline-block !important; margin: 2.5px; outline-style: none; &:focus { outline: none; box-shadow: none; } } button.owl-dot.active { background-color: #ffbc00 !important; outline-style: none; &:focus { outline: none; box-shadow: none; } } //slut // SliderDots i højre side .slider .customDots { position: absolute; bottom: 30px; z-index: 5; counter-reset: dots; height: 10px; width: 10px; color: #f00; right: 66px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); } // //Streger i højre side. .customDots { position: absolute; bottom: 30px; z-index: 5; counter-reset: dots; height: 114px; width: 10px; color: #f00; right: 46px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); &.hidden { display: none; } button { position: relative; background-color: transparent; background-image: none; border: none; box-shadow: none; outline: none; &:after { -moz-transition: 200ms all ease-in-out; -o-transition: 200ms all ease-in-out; -webkit-transition: 200ms all ease-in-out; transition: 200ms all ease-in-out; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; content: ""; width: 3px; height: 30px; background-color: rgba(255,255,255, 0.5); display: inline-block !important; outline-style: none; } /* &:before { @include transition(); counter-increment: dots; content: "0" counter(dots); @include fontStyle(16px, $color-fontlight, 600); opacity: 0.7; }*/ &.active, &:hover { &:after { -moz-transition: 200ms all ease-in-out; -o-transition: 200ms all ease-in-out; -webkit-transition: 200ms all ease-in-out; transition: 200ms all ease-in-out; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; content: ""; width: 3px; height: 30px; background-color: white !important; display: inline-block !important; outline-style: none; } } } }
https://gyazo.com/4cbcec3800f84ba7e837d7c542ad8949
Comments