Slider knapper

PHOTO EMBED

Wed Apr 28 2021 07:36:02 GMT+0000 (UTC)

Saved by @distance #css

// 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

// 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;
                }
            }
        }
    }
content_copyCOPY

https://gyazo.com/4cbcec3800f84ba7e837d7c542ad8949