Skip to content

Instantly share code, notes, and snippets.

@alexandr-kazakov
Last active April 3, 2018 17:18
Show Gist options
  • Save alexandr-kazakov/7cb22b66be72e109ddac776290d786f5 to your computer and use it in GitHub Desktop.
Save alexandr-kazakov/7cb22b66be72e109ddac776290d786f5 to your computer and use it in GitHub Desktop.
/* -------------------------------------------------------------------------
begin Product slider
* ------------------------------------------------------------------------- */
.slider-wrapper {
max-width: 700px;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.product-slider {
user-select: none;
width: 100%;
&.rsFullscreen {
.product-slider-custom-nav {
display: block;
}
.product-slider-custom-close {
display: block;
}
.rsFullscreenBtn {
display: none;
}
.rsArrow {
display: none !important;
}
}
}
.product-slider-custom-close {
background-color: transparent;
border: none;
cursor: pointer;
display: none;
height: 40px;
position: absolute;
padding: 0;
outline: none;
opacity: 0;
width: 40px;
z-index: 10;
&.product-slider-custom-close_active {
opacity: 1;
}
&:before {
content: "×";
color: #fff;
font-size: 3rem;
font-weight: 300;
left: 50%;
opacity: 0.75;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
&:hover {
&:before {
opacity: 1;
}
}
&:focus {
outline: none;
}
}
.product-slider-custom-nav {
background-color: transparent;
border: none;
cursor: pointer;
display: none;
height: 400px;
position: absolute;
padding: 0;
outline: none;
opacity: 0;
top: 50%;
transform: translateY(-50%);
width: 60px;
z-index: 10;
&.product-slider-custom-nav_active {
opacity: 1;
}
&.product-slider-custom-nav-prev:before {
background-position: -64px -32px;
}
&.product-slider-custom-nav-next:before {
background-position: -64px -64px;
}
&:before {
border-radius: 2px;
background: url(https://erweb.ru/wp-content/uploads/2018/04/rs-default.png);
background-color: rgba(0, 0, 0, 0.75);
content: "";
height: 32px;
left: 50%;
margin-top: -16px;
margin-left: -16px;
position: absolute;
opacity: 0.7;
top: 50%;
width: 32px;
}
&:hover {
&:before {
opacity: 1;
}
}
&:focus {
outline: none;
}
}
/* -------------------------------------------------------------------------
end Product slider
* ------------------------------------------------------------------------- */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment