slickのレスポンシブの画像切り替え方法

実現したいこと

基本的にスライドは縦に動かしたく、
pcの時は横なが画像を使用
タブレットから縦長画像に切り替えたいと考えています。

発生している問題・分からないこと

色々な方法を試してみてはいますが、なかなか思う通りに表現できません。
HTMLでスライダーをpc・tablet・psと用意しdisplay：none;でを使用して表示の切り替えを行えないか試みていました。

該当のソースコード

HTML
 <main class="main" id="main">
            <div class="sliderpc">
                <div class="slider__pc"><img src="image/1.png"></div>
                <div class="slider__pc"><img src="image/2.png"></div>
                <div class="slider__pc"><img src="image/3.png"></div>
                <div class="slider__pc"><img src="image/5.png"></div>
                <div class="slider__pc"><img src="image/6.png"></div>
                <div class="slider__pc"><img src="image/7.png"></div>
                <div class="slider__pc"><img src="image/8.png"></div>
                <div class="slider__pc"><img src="image/9.png"></div>
                <div class="slider__pc"><img src="image/10.png"></div>
                <div class="slider__pc"><img src="image/11.png"></div>
                <div class="slider__pc"><img src="image/12.png"></div>
            </div>
            <div class="slidertablet">
                <div class="slider__ps"><img src="image/tablet1.png"></div>
                <div class="slider__ps"><img src="image/tablet2.png"></div>
                <div class="slider__ps"><img src="image/tablet1.png"></div>
                <div class="slider__ps"><img src="image/tablet2.png"></div>
                <div class="slider__ps"><img src="image/tablet1.png"></div>
                <div class="slider__ps"><img src="image/tablet2.png"></div>
                <div class="slider__ps"><img src="image/tablet1.png"></div>
                <div class="slider__ps"><img src="image/tablet2.png"></div>
                <div class="slider__ps"><img src="image/tablet1.png"></div>
                <div class="slider__ps"><img src="image/tablet2.png"></div>
            </div>

            <div class="sliderps">
                <div class="slider__ps"><img src="image/gray.png"></div>
                <div class="slider__ps"><img src="image/orange.png"></div>
                <div class="slider__ps"><img src="image/gray.png"></div>
                <div class="slider__ps"><img src="image/orange.png"></div>
                <div class="slider__ps"><img src="image/gray.png"></div>
                <div class="slider__ps"><img src="image/orange.png"></div>
                <div class="slider__ps"><img src="image/gray.png"></div>
                <div class="slider__ps"><img src="image/orange.png"></div>
                <div class="slider__ps"><img src="image/gray.png"></div>
                <div class="slider__ps"><img src="image/orange.png"></div>
                <div class="slider__ps"><img src="image/gray.png"></div>
                <div class="slider__ps"><img src="image/orange.png"></div>
            </div>
        </main>

CSS
.sliderpc {
  width: 100%;
  margin: 30px auto;
  max-width: 1440px;
}

.slick-next:before,
.slick-prev:before {
  font-size: 43px;
  color: var(--black);
  opacity: 1;
}

.sliderpc .slick-arrow {
  width: initial !important;
  height: initial !important;
  z-index: 2 !important;
  transform: rotate(90deg);
  top: initial;
  left: initial !important;
  right: 0 !important;
}

.sliderpc .slick-arrow:before {
  font-size: 50px;
}

.sliderpc .slick-prev {
  top: 0;
}

.sliderpc .slick-next {
  bottom: 0;
}

.slidertablet {
  display: none;
}

.sliderps {
  display: none;
}

/* 800tablet header  */
@media screen and (max-width: 800px) {
  .sliderpc {
    display: none;
  }

  .slidertablet {
    display: block;
    width: 100%;
    margin: 0 auto;
    max-width: 1029px;
    position: relative; 
  }

  .sliderps img {
    width: 100%;
    height: auto;
  }
}

JS
$(document).ready(function () {
      $(".sliderpc").slick({
        vertical: true,
        centerMode: true,
        centerPadding: "0",
        slidesToShow: 1,
        arrows: true,
        autoplay: true,
        autoplaySpeed: 2000,
        infinite: false,
      });
    });

        // slick slider tablet
        $(document).ready(function () {
          $(".slidertablet").slick({
            vertical: true,
            centerMode: true,
            centerPadding: "0",
            slidesToShow: 1,
            autoplay: true,
            autoplaySpeed: 2000,
            infinite: false,
          });
        });