CSSで画像を
横スクロールさせる方法

<script src="https://cdn.jsdelivr.net/npm/simplebar@5.3.6/dist/simplebar.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simplebar@5.3.6/dist/simplebar.min.css"/>

//特になし

.p-slide {
  padding-left: 15px;
  padding-right: 15px;
}

.p-slide__inner {
  position: relative;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden; /*-- はみ出した要素を非表示にする --*/
}

.p-slide-mask { /*-- ドロップシャドウ用 --*/
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /*-- 下にある要素をクリックできるようにする --*/
  box-shadow: 10px 0 14px -14px black inset, -10px 0 14px -14px black inset;
  z-index: 1;
}

.p-slide__main {
  display: flex; /*-- 横に並べるのに必要 --*/
  margin-left: -10px;
  padding-bottom: 17px;
}

.p-slide__block {
  flex: 0 0 calc(30% - 10px); /*-- 横に並べるのに必要 --*/
  margin-left: 10px;
}

.p-slide__img img {
  width: 100%;
}

.simplebar-scrollbar::before { /*-- スクロールバー自体の色を変更 --*/
  background-color: #debc00;
}

/*-- スクロールバーが動く領域の背景色の変更 お好みで
.simplebar-track {
   background-color: #f6f6f6;
 }
--*/

.simplebar-content-wrapper::-webkit-scrollbar { /*-- iOSでデフォルトのスクロールバーを非表示 --*/
  display: none;
  -webkit-appearance: none;
}

<div class="p-slide">
  <div class="p-slide__inner" >
    <div class="p-slide-mask"></div>
      <div class="p-slide-scroll" data-simplebar data-simplebar-auto-hide="false">
        <div class="p-slide__main">
          <!-- 画像1枚分 -->
          <a href="#" class="p-slide__block">
            <div class="p-slide__img">
              <img src="https://yumegori.com/wp-content/uploads/2021/11/scrollbar01.jpg" alt="" />
            </div>
          </a>
          <!-- 画像1枚分 -->
          <a href="#" class="p-slide__block">
            <div class="p-slide__img">
              <img src="https://yumegori.com/wp-content/uploads/2021/11/scrollbar02.jpg" alt="" />
            </div>
          </a>
           <!-- 2枚目以降は省略 -->
      </div>
    </div>
  </div>
</div>