flexy-slider/dist/index.css

A simple react component which makes your carousel/slider functionality so easy to integrate in your application. ## Demo

:root{--base-tile-margin: 10px }.slider-container{height:100%;overflow:hidden;overflow-x:auto;position:relative}.sliderWidthBox{display:flex;justify-content:space-between;transition:.5s linear all;height:100%}.sliderWidthBox>div{flex:1;margin:0px var(--base-tile-margin)}.sliderWidthBox img{width:100%;height:100%}.slider-container .nav-slider{position:absolute;width:40px;overflow:hidden;height:100%;display:flex;align-items:center;top:0;left:0}.nav-slider.left{background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to right,#ffffffe6 0,#fff0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#80000000",endColorstr="#00000000",GradientType=1);background-repeat:repeat-x}.nav-slider.right{right:0;left:unset;background-image:-webkit-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-o-linear-gradient(left,rgba(0,0,0,.5) 0,rgba(0,0,0,.0001) 100%);background-image:-webkit-gradient(linear,left top,right top,from(rgba(0,0,0,.5)),to(rgba(0,0,0,.0001)));background-image:linear-gradient(to left,#ffffffe6 0,#fff0);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#80000000",endColorstr="#00000000",GradientType=1);background-repeat:repeat-x}.nav-slider span{width:40px;height:40px;cursor:pointer;border-radius:30px;background-color:#555;display:flex;justify-content:center;align-items:center;opacity:1;box-shadow:0 3px 3px -2px #0003,0 3px 4px #00000024,0 1px 8px #0000001f;transition:.2s linear all}.nav-slider svg{width:20px;height:20px;fill:#ff0}.slider-container .nav-slider img{width:20px;height:20px;padding:10px;cursor:pointer}.slider-container .nav-slider span[disabled]{pointer-events:none;opacity:.1}.slider-container .nav-slider span.enabled{opacity:1}.slider-container .nav-slider span.disabled{pointer-events:none;opacity:.1}