Skip to content

Instantly share code, notes, and snippets.

@alexandr-kazakov
Last active April 3, 2018 16:48
Show Gist options
  • Save alexandr-kazakov/86af21fc6717518cb870011e4b9e1ebc to your computer and use it in GitHub Desktop.
Save alexandr-kazakov/86af21fc6717518cb870011e4b9e1ebc 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 {
width: 100%;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.product-slider.rsFullscreen .product-slider-custom-nav {
display: block;
}
.product-slider.rsFullscreen .product-slider-custom-close {
display: block;
}
.product-slider.rsFullscreen .rsFullscreenBtn {
display: none;
}
.product-slider.rsFullscreen .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.product-slider-custom-close_active {
opacity: 1;
}
.product-slider-custom-close:focus {
outline: none;
}
.product-slider-custom-close:hover:before {
opacity: 1;
}
.product-slider-custom-close:before {
content: "×";
color: #fff;
font-size: 3rem;
font-weight: 300;
left: 50%;
opacity: 0.75;
position: absolute;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.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%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
width: 60px;
z-index: 10;
}
.product-slider-custom-nav.product-slider-custom-nav_active {
opacity: 1;
}
.product-slider-custom-nav:focus {
outline: none;
}
.product-slider-custom-nav:hover:before {
opacity: 1;
}
.product-slider-custom-nav: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;
}
.product-slider-custom-nav.product-slider-custom-nav-prev:before {
background-position: -64px -32px;
}
.product-slider-custom-nav.product-slider-custom-nav-next:before {
background-position: -64px -64px;
}
/* -------------------------------------------------------------------------
end Product slider
* ------------------------------------------------------------------------- */
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment