@import url(https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap);.navbar-brand img{height:50px}.material-symbols-outlined{font-variation-settings:"FILL" 0,"wght" 400,"GRAD" 0,"opsz" 24;float:left}body{background-color:#eee;font-family:"Open Sans",sans-serif;font-weight:lighter;overflow-x:hidden}.bg-highlight,.card-footer{background-color:#3d3b40;color:#fff}a{text-decoration:none}.card-title{font-size:1.2rem}b,h1,h2,h3,h4,h5,h6{font-weight:700}.card-image{overflow:hidden;position:relative}.card-image .caption{bottom:-35px;position:absolute;transition:all 1s ease-out;background:#000;background:linear-gradient(0deg,rgba(0,0,0,1) 0,rgba(0,0,0,0) 100%);padding:5px 10px;width:100%;color:#fff}.card-image .caption a{text-decoration:none;color:#fff}.card-image img{-webkit-transform:scale(1);transform:scale(1);-webkit-transition:1s ease-in-out;transition:1s ease-in-out}.card-image:hover img{-webkit-transform:scale(1.3);transform:scale(1.3)}.card-image:hover .caption{bottom:0}.flex-container{display:flex;align-items:flex-start}.cookie-disclaimer{position:fixed;bottom:0;left:0;width:100%;background-color:#3d3b40;color:#fff;padding:10px;text-align:center;z-index:1000}.gallery-item:hover{cursor:pointer}.modal{display:none;position:fixed;z-index:1;padding-top:60px;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgba(0,0,0,.9)}.modal-content{margin:auto;display:block;width:90%;max-width:80vw;animation-name:zoom;animation-duration:.6s}@keyframes zoom{from{transform:scale(0)}to{transform:scale(1)}}.close-btn{position:absolute;top:15px;right:35px;color:#f1f1f1;font-size:40px;font-weight:700;transition:.3s;cursor:pointer}.close-btn:focus,.close-btn:hover{color:#bbb;text-decoration:none;cursor:pointer}.next,.prev{cursor:pointer;position:absolute;top:50%;width:auto;padding:16px;margin-top:-50px;color:#fff;font-weight:700;font-size:20px;transition:.6s ease;border-radius:0 3px 3px 0;user-select:none;-webkit-user-select:none}.next{right:0;border-radius:3px 0 0 3px}.next:hover,.prev:hover{background-color:rgba(0,0,0,.8)}CSS e JavaScript para que ele funcione corretamente. O seu HTML já tem a estrutura de células (.carousel-cell) dentro de um contêiner principal (.carousel),basta adicionar os botões de navegação,e o transform: translateX no JavaScript fará o movimento de transição. CSS .carousel-container,o que facilita muito o trabalho. Código HTML O HTML já está pronto,vamos adaptar o HTML{position:relative;width:90%;max-width:1200px;margin:0 auto;overflow:hidden}.carousel{display:flex;transition:transform .5s ease-in-out}.carousel-cell{flex-shrink:0;width:33.333%;padding:0 10px;box-sizing:border-box}.carousel-cell a{text-decoration:none;color:inherit;display:block;border:1px solid #ddd;border-radius:8px;overflow:hidden;transition:transform .3s ease}.carousel-cell a:hover{transform:translateY(-5px);box-shadow:0 4px 8px rgba(0,0,0,.1)}.carousel-cell img,.carousel-cell picture{width:100%;height:auto;display:block}.carousel-cell .text{padding:15px}.carousel-cell h1{font-size:1.2em;margin-top:0}.carousel-cell p{font-size:.9em;color:#666}.next-btn,.prev-btn{position:absolute;top:50%;transform:translateY(-50%);background-color:rgba(0,0,0,.5);color:#fff;border:none;padding:15px;cursor:pointer;border-radius:50%;font-size:1.5em;z-index:10}.prev-btn{left:10px}.next-btn{right:10px}.next-btn:hover,.prev-btn:hover{background-color:rgba(0,0,0,.8)}.splide__slide__description{position:absolute;bottom:0;width:100%;background:rgba(0,0,0,.5);color:#fff;padding:10px;box-sizing:border-box}.splide__slide__image{width:100%;height:auto;display:block}