.w-scroller {
position: fixed;
top: 50%;
z-index: 90;
transform: translateY(-50%);
}
.w-scroller.pos_left {
left: 1%;
}
.w-scroller.pos_right {
right: 1%;
}
.w-scroller:not(.with_dots) .w-scroller-dots {
display: none;
}
.w-scroller-dots {
transition: transform 0.3s;
}
.w-scroller.pos_left .w-scroller-dots {
transform: translateX(-100%);
}
.w-scroller.pos_right .w-scroller-dots {
transform: translateX(100%);
}
.w-scroller-dots.show {
transform: none !important;
}
.w-scroller-dot {
overflow: hidden;
cursor: pointer;
}
.w-scroller-dot span {
display: block;
opacity: 0.4;
transition: opacity 0.2s, box-shadow 0.2s, background 0.2s, transform 0.2s;
background: currentColor;
box-shadow: 0 0 0 2px currentColor;
}
.w-scroller-dot.active span,
.no-touch .w-scroller-dot:hover span {
opacity: 1;
} .w-scroller.style_1 .w-scroller-dot span,
.w-scroller.style_2 .w-scroller-dot span {
height: 1em;
width: 1em;
margin: 0.8em;
}
.w-scroller.style_1 .w-scroller-dot span {
border-radius: 50%;
}
.w-scroller.style_1 .w-scroller-dot:not(.active) span,
.w-scroller.style_2 .w-scroller-dot:not(.active) span {
box-shadow: 0 0 0 2px transparent !important;
}
.w-scroller.style_1 .w-scroller-dot.active span,
.w-scroller.style_2 .w-scroller-dot.active span {
background: none !important;
} .w-scroller.style_3 .w-scroller-dot span {
height: 2px;
width: 3em;
margin: 0.8em;
box-shadow: none !important;
transform: scaleX(0.5);
}
.w-scroller.style_3.pos_left .w-scroller-dot span {
transform-origin: left;
}
.w-scroller.style_3.pos_right .w-scroller-dot span {
transform-origin: right;
}
.w-scroller.style_3 .w-scroller-dot.active span {
transform: none;
} .w-scroller.style_4 .w-scroller-dot span {
height: 3em;
width: 0.5em;
margin: 0.2em 0.8em;
box-shadow: none !important;
}