react-slides-z/build/styles.css

React slides simple. (Swipe and responsive) Hook

@media screen and (max-width:1280px){.slide-container .slide-swiper-current{width:88%!important}.slide-container .slide-fl{width:92%!important}}@media screen and (min-width:700px){.slide-container .slide-swiper-current{width:90%!important}.slide-container .slide-fl{width:94%!important}}.slide-container .slide-swiper-item{position:relative;width:100%;min-height:240px;margin:8px;background:#fff;border-radius:8px;box-shadow:0 0 8px rgba(0,0,0,.16)}.slide-container .slide-swiper-single{width:calc(100% - 16px)!important}.slide-container .slide-swiper-previous{width:104%!important;margin-right:10px!important}.slide-container .slide-swiper-forward{width:104%!important;margin-left:0!important}.slide-container .slide-flex-center{display:flex;justify-content:center;align-items:center;gap:8px}.slide-container .slide-target-point{cursor:pointer;user-select:none;border-radius:100%;width:16px;height:16px;opacity:.2;background:#3f50b5}.slide-container .slide-target-point-active{opacity:1}.slide-container .slide-nav-container{width:100%;margin-top:8px}.slide-container .slide-nav-container .slide-bf{min-width:40px;height:24px;font-size:16px;border-radius:8px;background:#fff;color:#3f50b5;border:1px solid #3f50b5;user-select:none}.slide-container .slide-nav-container .slide-bf.disabled{pointer-events:auto;opacity:.4}.slide-container .slide-nav-container .slide-bf.activated{cursor:pointer}