.wrapper{
   max-width: 1200px;
   position: relative;
}

.wrapper .slides{
   white-space: nowrap;
   cursor: pointer;
   font-size: 0px;
   overflow: hidden;
   scroll-behavior: smooth;
}

.slides img{
   height: 300px;
   border-radius: 10px;
   object-fit: cover;
   width: calc(100% / 3);
   margin-left: 10px;
}

.slides img:first-child{
   margin-left: 0px;
}

.slides .dragging{
   cursor: grab;
   scroll-behavior: auto;
}

.slides .dragging img{
   pointer-events: none;
}


.wrapper i{
   top: 50%;
   height: 46px;
   width: 46px;
   cursor: pointer;
   font-size: 1.2rem;
   text-align: center;
   line-height: 46px;
   background: #fff;
   border-radius: 50%;
   position: absolute;
   transform: translateY(-50%);
}

.wrapper i:first-child{
   left: -23px;
}

.wrapper i:last-child{
   right: -23px;
}


 
@media screen and (max-width:900px) {
   .slides img{
       width: calc(100% / 2);
   }
}

@media screen and (max-width:550px) {
   .slides img{
       width: 100%;
   }
}