react-modern-slider/dist/style.css

A modern image carousel component built with react that supports boxes with different sizes. Demo: https://shamouni.github.io/shop-react

body{margin:0}.slider{display:block;margin:0 auto;height:100vh;max-height:42vw;min-height:500px;width:100vw;overflow:hidden;background-color:#000;color:#fff;position:relative}.container-full{max-width:1920px;margin-left:auto;margin-right:auto}@media (min-width: 2000px){.slider{max-width:1920px;max-height:807px;margin-top:2rem;margin-bottom:2rem;border:1px solid #ddd}.offers.bg-white{border-top:1px solid #eee}.banner{border-bottom:0}.container-full>div.flex,.main .container-full{padding-left:5px!important;padding-right:5px!important}.main .container-full{padding-left:0!important;padding-right:0!important}}.slider *{box-sizing:border-box}.slider .indiana-scroll-container--hide-scrollbars{height:100%}.slider .slider-container{display:flex;height:100%}.scroll-container{display:flex;scroll-behavior:smooth}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:scroll}body.indiana-dragging #slides{cursor:grabbing}.col-group{display:flex}.col-group .box{height:100%;flex-basis:0;flex-grow:1;text-align:center}.slider .col{flex-basis:0;flex-grow:1;text-align:center}.slider .h-100{height:100%}.slider .col-3{flex:0 0 23%;max-width:23%;min-width:315px}.slider .col-4{flex:0 0 33.33%;max-width:30.33%;min-width:350px}.slider .col-5{flex:0 0 48%;max-width:48%;min-width:550px}.slider .col-6{flex:0 0 50%;max-width:50%;min-width:600px}.slider .h-5{height:50%}.slider .h-7{height:66.666%}.slider .h-6{height:64%}.slider .h-4{height:36%}.slider .h-3{height:33.333%}.slider img{width:100%;height:100%;object-fit:cover}.brd{border:solid 0px white}.brd-top{border-top-width:2px}.brd-bottom{border-bottom-width:2px}.brd-left{border-left-width:2px}.brd-right{border-right-width:2px}.slider .box{position:relative}.slider .text{position:absolute;max-width:100%;left:0;bottom:0;z-index:1;text-align:left;color:#fff;padding:8px 18px 15px;cursor:default;text-shadow:1px 1px 3px #000;cursor:grab}.slider a,.slider a:hover{color:inherit;text-decoration:none}.slider .text h4{line-height:1.4em;margin:0 0 2px;font-weight:700;font-weight:500;font-weight:400;font-size:1.2rem;cursor:pointer}.slider .text p{font-size:.85rem;margin-top:.4rem;cursor:pointer}.slider .box-large .text h4{font-size:1.8rem;line-height:1.35em}.slider .box-large .text p{font-size:1.03rem;margin-bottom:.5rem}.slider .box:after{position:absolute;top:0;left:0;width:100%;height:100%;content:"";z-index:0;background:linear-gradient(to bottom,#0000 0% 50%,#0006 75%,#000000d9);background:-moz-linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.4) 75%,rgba(0,0,0,.85) 100%);background:-webkit-gradient(linear,left to bottom,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(50%,rgba(0,0,0,0)),color-stop(75%,rgba(0,0,0,.4)),color-stop(100%,rgba(0,0,0,.85)));background:-webkit-linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.4) 75%,rgba(0,0,0,.85) 100%);background:-o-linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.4) 75%,rgba(0,0,0,.85) 100%);background:-ms-linear-gradient(to bottom,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,.4) 75%,rgba(0,0,0,.85) 100%)}.arrow-slide{position:absolute;top:50%;transform:translateY(-50%);background:#111;padding:24px;cursor:pointer;z-index:2;display:none!important}.arrow-slide:hover{display:block;background-color:#333}.slider:hover .arrow-slide{display:block}.arrow-slide:before{content:"";display:inline-block;width:24px;height:24px;background-size:100% 100%}#next-slide{right:0;padding-right:3px;border-right:0;border-radius:46px 0 0 46px}#prev-slide{left:0;padding-left:3px;border-left:0;border-radius:0 46px 46px 0}.slider .link{position:absolute;left:0;top:0;width:100%;height:100%;z-index:1;cursor:grab}.slider .box:hover .link{background:#ffffff12}.slider .lbl{display:inline-block;color:#fff;padding:0 5px 1px;font-size:.75rem;font-weight:400;margin-bottom:9px;margin-right:5px;text-shadow:0px 0px 0px transparent;pointer-events:all;border-radius:2px;pointer-events:none}.lbl:hover{opacity:.8}.lbl.blue{background-color:#057feab3;border-color:#2e6da4}.lbl.sky{background-color:#2ca4e0d9;border-color:#2e6da4}.lbl.pink{background:#d81961d9;border-color:#c80000}.lbl.red{background:#bb0000d9;border-color:red}.lbl.green{background:#39ad39d9;border-color:#93c23dbf}.lbl.purple{background:#5245b7d9;border-bottom-color:#4c3dbf}@media (max-width: 1200px){#slides{overflow:auto}.slider .lbl{display:none}.slider .text{padding-bottom:15px}.slider .text h4{font-size:1rem;margin-bottom:0}.slider .box-large .text h4{font-size:1.1rem;margin-bottom:0}.slider .box-large .text p{font-size:.8rem;margin-bottom:.1rem;margin-top:.5rem}.brd-top{border-top-width:3px}.brd-bottom{border-bottom-width:3px}.brd-left{border-left-width:3px}.brd-right{border-right-width:3px}}@media (max-width: 1366px){.slider{max-height:43vw;max-height:42.5vw}.arrow-slide{padding:22px 20px}}@media (max-width: 991.98px){.slider{max-height:60vw}}@media (max-width: 767.98px){.slider{max-height:75vw}}