|
|
Linha 578: |
Linha 578: |
|
| |
|
| /* Tests */ | | /* Tests */ |
|
| |
| @keyframes tonext {
| |
| 75% {
| |
| left: 0;
| |
| }
| |
| 95% {
| |
| left: 100%;
| |
| }
| |
| 98% {
| |
| left: 100%;
| |
| }
| |
| 99% {
| |
| left: 0;
| |
| }
| |
| }
| |
|
| |
| @keyframes tostart {
| |
| 75% {
| |
| left: 0;
| |
| }
| |
| 95% {
| |
| left: -300%;
| |
| }
| |
| 98% {
| |
| left: -300%;
| |
| }
| |
| 99% {
| |
| left: 0;
| |
| }
| |
| }
| |
|
| |
| @keyframes snap {
| |
| 96% {
| |
| scroll-snap-align: center;
| |
| }
| |
| 97% {
| |
| scroll-snap-align: none;
| |
| }
| |
| 99% {
| |
| scroll-snap-align: none;
| |
| }
| |
| 100% {
| |
| scroll-snap-align: center;
| |
| }
| |
| }
| |
|
| |
|
| |
| * {
| |
| box-sizing: border-box;
| |
| scrollbar-color: transparent transparent; /* thumb and track color */
| |
| scrollbar-width: 0px;
| |
| }
| |
|
| |
| *::-webkit-scrollbar {
| |
| width: 0;
| |
| }
| |
|
| |
| *::-webkit-scrollbar-track {
| |
| background: transparent;
| |
| }
| |
|
| |
| *::-webkit-scrollbar-thumb {
| |
| background: transparent;
| |
| border: none;
| |
| }
| |
|
| |
| * {
| |
| -ms-overflow-style: none;
| |
| }
| |
|
| |
| ol, li {
| |
| list-style: none;
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
|
| |
| .carousel {
| |
| position: relative;
| |
| padding-top: 75%;
| |
| filter: drop-shadow(0 0 10px #0003);
| |
| perspective: 100px;
| |
| }
| |
|
| |
| .carousel__viewport {
| |
| position: absolute;
| |
| top: 0;
| |
| right: 0;
| |
| bottom: 0;
| |
| left: 0;
| |
| display: flex;
| |
| overflow-x: scroll;
| |
| counter-reset: item;
| |
| scroll-behavior: smooth;
| |
| scroll-snap-type: x mandatory;
| |
| }
| |
|
| |
| .carousel__slide {
| |
| position: relative;
| |
| flex: 0 0 100%;
| |
| width: 100%;
| |
| background-color: #f99;
| |
| counter-increment: item;
| |
| }
| |
|
| |
| .carousel__slide:nth-child(even) {
| |
| background-color: #99f;
| |
| }
| |
|
| |
| .carousel__slide:before {
| |
| content: counter(item);
| |
| position: absolute;
| |
| top: 50%;
| |
| left: 50%;
| |
| transform: translate3d(-50%,-40%,70px);
| |
| color: #fff;
| |
| font-size: 2em;
| |
| }
| |
|
| |
| .carousel__snapper {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| scroll-snap-align: center;
| |
| }
| |
|
| |
| @media (hover: hover) {
| |
| .carousel__snapper {
| |
| animation-name: tonext, snap;
| |
| animation-timing-function: ease;
| |
| animation-duration: 4s;
| |
| animation-iteration-count: infinite;
| |
| }
| |
|
| |
| .carousel__slide:last-child .carousel__snapper {
| |
| animation-name: tostart, snap;
| |
| }
| |
| }
| |
|
| |
| @media (prefers-reduced-motion: reduce) {
| |
| .carousel__snapper {
| |
| animation-name: none;
| |
| }
| |
| }
| |
|
| |
| .carousel:hover .carousel__snapper,
| |
| .carousel:focus-within .carousel__snapper {
| |
| animation-name: none;
| |
| }
| |
|
| |
| .carousel__navigation {
| |
| position: absolute;
| |
| right: 0;
| |
| bottom: 0;
| |
| left: 0;
| |
| text-align: center;
| |
| }
| |
|
| |
| .carousel__navigation-list,
| |
| .carousel__navigation-item {
| |
| display: inline-block;
| |
| }
| |
|
| |
| .carousel__navigation-button {
| |
| display: inline-block;
| |
| width: 1.5rem;
| |
| height: 1.5rem;
| |
| background-color: #333;
| |
| background-clip: content-box;
| |
| border: 0.25rem solid transparent;
| |
| border-radius: 50%;
| |
| font-size: 0;
| |
| transition: transform 0.1s;
| |
| }
| |
|
| |
| .carousel::before,
| |
| .carousel::after,
| |
| .carousel__prev,
| |
| .carousel__next {
| |
| position: absolute;
| |
| top: 0;
| |
| margin-top: 37.5%;
| |
| width: 4rem;
| |
| height: 4rem;
| |
| transform: translateY(-50%);
| |
| border-radius: 50%;
| |
| font-size: 0;
| |
| outline: 0;
| |
| }
| |
|
| |
| .carousel::before,
| |
| .carousel__prev {
| |
| left: -1rem;
| |
| }
| |
|
| |
| .carousel::after,
| |
| .carousel__next {
| |
| right: -1rem;
| |
| }
| |
|
| |
| .carousel::before,
| |
| .carousel::after {
| |
| content: '';
| |
| z-index: 1;
| |
| background-color: #333;
| |
| background-size: 1.5rem 1.5rem;
| |
| background-repeat: no-repeat;
| |
| background-position: center center;
| |
| color: #fff;
| |
| font-size: 2.5rem;
| |
| line-height: 4rem;
| |
| text-align: center;
| |
| pointer-events: none;
| |
| }
| |
|
| |
| .carousel::before {
| |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='0,50 80,100 80,0' fill='%23fff'/%3E%3C/svg%3E");
| |
| }
| |
|
| |
| .carousel::after {
| |
| background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='100,50 20,100 20,0' fill='%23fff'/%3E%3C/svg%3E");
| |
| }
| |
|
| |
| body{
| |
| margin:0;
| |
| padding:0;
| |
| background-color:#34495e;
| |
| }
| |
| .slidershow{
| |
| width:700px;
| |
| height:400px;
| |
| overflow:hidden;
| |
| }
| |
| .middle{
| |
| position:absolute;
| |
| top:50%;
| |
| left:50%;
| |
| transform:translate(-50%,-50%);
| |
| }
| |
| .navigation, .navigation_active{
| |
| position:absolute;
| |
| bottom:20px;
| |
| left:50%;
| |
| transform:translateX(-50%);
| |
| display:flex;
| |
| }
| |
| .bar{
| |
| width:50px;
| |
| height:10px;
| |
| border: 2px solid #fff;
| |
| margin:6px;
| |
| cursor:pointer;
| |
| transition:.4s;
| |
| background:transparent;
| |
| }
| |
| .bar:hover{
| |
| background:#fff;
| |
| }
| |
| input[name="r"]{
| |
| position:absolute;
| |
| visibility:hidden;
| |
| }
| |
| .slides{
| |
| width:500%;
| |
| height:100%;
| |
| display:flex;
| |
| }
| |
| .slide{
| |
| width:20%;
| |
| transition:.4s;
| |
| }
| |
| .slide img{
| |
| width:100%;
| |
| height:100%;
| |
| }
| |
| #r1:checked ~ .s1{
| |
| margin-left:0;
| |
| }
| |
| #r2:checked ~ .s1{
| |
| margin-left:-20%;
| |
| }
| |
| #r3:checked ~ .s1{
| |
| margin-left:-40%;
| |
| }
| |
| #r4:checked ~ .s1{
| |
| margin-left:-60%;
| |
| }
| |
| #r5:checked ~ .s1{
| |
| margin-left:-80%;
| |
| }
| |
|
| |
| #r1:checked ~ .navigation .bar:first-child,
| |
| #r2:checked ~ .navigation .bar:nth-child(2),
| |
| #r3:checked ~ .navigation .bar:nth-child(3),
| |
| #r4:checked ~ .navigation .bar:nth-child(4),
| |
| #r5:checked ~ .navigation .bar:nth-child(5){
| |
| background:#fff !important;
| |
| }
| |
| /*настройка переключения и положения для правой стрелки*/
| |
| #r1:checked ~ #controls .bar-arrow:nth-child(2),
| |
| #r2:checked ~ #controls .bar-arrow:nth-child(3),
| |
| #r3:checked ~ #controls .bar-arrow:nth-child(4),
| |
| #r4:checked ~ #controls .bar-arrow:nth-child(5),
| |
| #r5:checked ~ #controls .bar-arrow:nth-child(1){
| |
| content:'';
| |
| width: 17px;
| |
| height: 17px;
| |
| position: absolute;
| |
| right:1rem;
| |
| border-top: 3px solid #ccc;
| |
| border-right: 3px solid #ccc;
| |
| transform: rotate(45deg);
| |
| top:50%;
| |
| }
| |
|
| |
| /*настройка переключения и положения для левой стрелки*/
| |
| #r1:checked ~ #controls .bar-arrow:nth-child(5),
| |
| #r2:checked ~ #controls .bar-arrow:nth-child(1),
| |
| #r3:checked ~ #controls .bar-arrow:nth-child(2),
| |
| #r4:checked ~ #controls .bar-arrow:nth-child(3),
| |
| #r5:checked ~ #controls .bar-arrow:nth-child(4){
| |
| content:'';
| |
| width: 17px;
| |
| height: 17px;
| |
| position: absolute;
| |
| left:1rem;
| |
| border-top: 3px solid #ccc;
| |
| border-right: 3px solid #ccc;
| |
| transform: rotate(-135deg);
| |
| top:50%;
| |
| }
| |