#my-slider { width: 100%; /*height: 404px;*/ height: 277px; color: white; text-align: center; /*position: relative;*/ margin: auto; /*z-index: -1;*/ /*margin-top: 10px;*/ } @media (max-width:767px){ #my-slider { height: 154px; } } /*@media (max-width: 640px) {*/ /*#my-slider .crs-bar-roll-current {*/ /*width: 38px;*/ /*height: 38px;*/ /*}*/ /*#my-slider .crs-bar-roll-item {*/ /*width: 30px;*/ /*height: 30px;*/ /*}*/ /*}*/ .crs-wrap { position: relative; box-sizing: border-box; } .crs-wrap * { box-sizing: border-box; } .crs-screen { width: 100%; height: 100%; position: relative; overflow: hidden; } .crs-screen-roll { position: absolute; left: 0; top: 0; height: 100%; display: flex; flex-wrap: wrap; transition: left 0.5s; } .crs-screen-item { width: 100%; height: 100%; background-position: center; background-size: cover; } .crs-screen-item-content { width: 100%; height: calc(100% - 50px); font-family: arial; padding: 50px; } .crs-bar { width: 100%; height: 50px; position: absolute; bottom: -20px; left: 0; padding: 10px; } .crs-bar-roll-current { width: 20px; height: 10px; border-radius: 12px; border: 2px solid red; position: absolute; z-index: 1; left: 0; right: 0; margin: auto; background: red; /*top: 5px;*/ margin-top: 5px; } @media (min-width: 1024px) { .crs-bar-roll-current { margin-top: 2px; } } .crs-bar-roll-wrap { height: 30px; overflow: hidden; border-radius: 8px; position: relative; } .crs-bar-roll { height: 30px; display: inline-flex; flex-wrap: wrap; /*position: absolute;*/ left: 0; transition: left 0.2s; } .crs-bar-roll-item { width: 20px; height: 10px; border-radius: 8px; background-color: #fff; background-size: cover; background-position: center; opacity: 0.85; cursor: pointer; } .crs-bar-roll-item:not(:last-child) { margin-right: 10px; } .btn_left{ position: absolute; left: 0px; top: 50%; margin-top: -30px; } .btn_right{ position: absolute; right: 0px; top: 50%; margin-top: -30px; }