// 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;
}
}
}
}
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter