Separate Background Image Slider for Desktop, Mobile and Tab View

Question

I want to add Multiple Image for Mobile and Tab View on

<div class="slide-item large">

This is the actual code. I want to add image from another admin site.

<section class="hero-banner-section">
    <div class="hero-slider hero-slider-js">
    @foreach (var r in ViewBag.HBanner)
    {
        <div class="slide-item large">
            <a href="javascript:void(0)">
                <div class="img-wrap">
                    <img alt="new" class="lazyload ss_img" src="/assets/_blank.png" data-src="/Admin/Pictures/HBanner/@r.BannerUrl"
                         data-sizes="auto" />
                    <noscript> <img src="/Admin/Pictures/HBanner/@r.BannerUrl" /> </noscript>
                </div>
            </a>
        </div>
    }
    </div>
</section>

The main css is below

.hero-slider {
  position: relative;
}

.slide-item {
  position: relative;
  overflow: hidden;
}

.hero-slider .slider-track {
  -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
}

.ss_img {
  -webkit-transition: opacity 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87);
  transition: opacity 0.8s cubic-bezier(0.44, 0.13, 0.48, 0.87);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  z-index: 1;
  height: 100vh;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  -webkit-transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  transition: all 1s cubic-bezier(0.7, 0, 0.3, 1);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);

  transition: all 500ms ease-in-out;
  transform: scale(1.25, 1.25);
}

.slick-active .ss_img,
.no-js .ss_img {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-animation: cssAnimation 5000ms 1 ease-in-out forwards;
  animation: cssAnimation 5000ms 1 ease-in-out forwards;
}

@keyframes cssAnimation {
  from {
    -webkit-transform: scale(1) translate(0px);
  }
  to {
    -webkit-transform: scale(1.25) translate(0px);
  }
}
@-webkit-keyframes cssAnimation {
  from {
    -webkit-transform: scale(1) translate(0px);
  }
  to {
    -webkit-transform: scale(1.25) translate(0px);
  }
}

.slide-item.small {
  height: 550px;
}
.slide-item.medium {
  height: 720px;
}
.slide-item.large {
  height: 1000px;
}
.slide-item.fullscreen {
  height: 100vh;
}
@media (min-width: 1025px) and (max-width: 1300px) {
  .slide-item.large {
    height: 720px;
  }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .slide-item.small {
    height: 290px;
  }
  .slide-item.medium {
    height: 350px;
  }
  .slide-item.large {
    height: 500px;
  }
  .slide-item.fullscreen {
    height: 70vh;
  }
}
@media (max-width: 767px) {
  .slide-item.small {
    height: 290px;
  }
  .slide-item.medium {
    height: 350px;
  }
  .slide-item .ss_img{
    opacity: 0;
  }
  .slide-item.large {
    height: 800px;
  }
  .slide-item.fullscreen {
    height: 70vh;
  }
  .slide-item .tab-view {
    height: 800px;
    
  }
}

@media (max-width: 414px) {
  .slide-item.small {
    height: 234px;
  }

  .slide-item.medium {
    height: 234px;
  }

  .slide-item.large {
    height: 500px;
    width: 100%;
  }

  .slide-item.fullscreen {
    height: 40vh;
  }
}