Coder Wrap provides free to use snippets

/**Typeo CSS Start (Note if is not need so remove)**/
body{
     font-family:Verdana, Geneva, sans-serif;
}
 *{
     padding:0px;
     margin:0px;
     list-style:none;
     text-decoration:none;
     box-sizing:border-box;
}
/**Typeo CSS End (Note if is not need so remove)**/

 .cw-slider-main{
     width:1000px;
     margin:auto;
}
 img{
     max-width:100%;
}
 .cw-clear{
     clear:both;
}
 .cw-slider{
     overflow:hidden;
     height:400px;
     position:relative;
     width:100%;
     display: flex;
     flex-flow: row wrap;
}
 .cw-slide-arrow{
     position:absolute;
     left:0px;
     top:50%;
     display: flex;
     flex-flow: row wrap;
     justify-content: space-between;
     width:100%;
     margin-top: -30px;
}
 .cw-slide-arrow span{
     display: inline-block;
     width: 30px;
     height: 30px;
     border-bottom: #fff 2px solid;
     border-left: #fff 2px solid;
     cursor: pointer;
}
 .cw-slide-arrow span.cw-prev-arrow{
    transform: rotate(45deg);
     -webkit-transform: rotate(45deg);
     margin-left: 20px;
}
 .cw-slide-arrow span.cw-next-arrow{
    transform: rotate(-135deg);
     -webkit-transform: rotate(-135deg);
     float:right;
     margin-right: 20px;
}
 .cw-slider-item{
     transition:all 0.5s ease 0s;
     top:0px;
     position:absolute;
     opacity:0;
     display: flex;
     flex-flow: row wrap;
     height: 100%;
     width: 100%
}
.cw-slider-item>img {
  height: 100%; 
  object-fit: cover;
  width: 100%;
}
 .cw-slider-item.cw-current-item{
     opacity:1;
}
 .cw-slider-comm-hd {
     font-size:18px;
     text-transform:uppercase;
     font-weight:bold;
     padding: 10px;
    background:rgba(0, 0, 0, 0.5);
    position: absolute;
     color:#fff;
    left: -100%;
}
 .cw-current-item .cw-slider-b-hd{

    top: 80px;
     -webkit-animation: leftSlideHD 1s linear both;
     animation: leftSlideHD 1s linear both;
     z-index:9;
}
 .cw-current-item p.cw-slider-b-test{
     top: 140px;
     z-index:8;
     font-size:14px;
    padding: 10px;
     background:rgba(0, 0, 0, 0.5);
    position: absolute;
     color:#fff;
     -webkit-animation: rightSlidePG 1s linear both;
     animation: leftSlideHD 1s linear both;
}
 .cw-current-item .cw-slider-b-btn{
     font-size:14px;
    padding: 10px;
     background:rgba(0, 153, 255, 0.7);
    position: absolute;
     color:#fff;
    bottom: 0;
     -webkit-animation: bottomSlideBtn 1s linear both;
     animation: bottomSlideBtn 1s linear both;
     z-index:9;
}

@-webkit-keyframes leftSlideHD {
  0% {
    left: 0;
  }
  50% {
    left: 50px;
  }
  100% {
    left: 100px;
  }
}

@-webkit-keyframes bottomSlideBtn {
  0% {
    bottom: -200px;
    left: 100px;
  }
  50% {
    bottom: 40px;
    left: 100px;
  }
  100% {
    bottom: 170px;
    left: 100px;
  }
}

@media (max-width: 767px) {
  .cw-slider-main { 
    max-width: 100%;
  }
  .cw-slider{ 
    height: 300px;
  }
  .cw-slide-arrow span { 
    width: 16px; 
    height: 16px;
  }
  .cw-slide-arrow span.cw-prev-arrow {
    margin-left: 10px;
  }
  .cw-slide-arrow span.cw-next-arrow {
    margin-right: 10px;
  }
  .cw-current-item p.cw-slider-b-test {
    top: 110px;
    width: calc(100% - 80px);
  }
  .cw-current-item .cw-slider-b-hd {
    top: 65px;
  }
  .cw-current-item .cw-slider-b-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
  @-webkit-keyframes leftSlideHD {
    0% {
      left: 0;
    }
    50% {
      left: 20px;
    }
    100% {
      left: 40px;
    }
  }
  @-webkit-keyframes bottomSlideBtn {
    0% {
      bottom: -200px;
      left: 40px;
    }
    50% {
      bottom: 40px;
      left: 40px;
    }
    100% {
      bottom: 80px;
      left: 40px;
    }
  }
}