slickで片側だけはみ出た横スクロールを実装する

HTML

  <section class="section-slider">
    <div class="section-slider-inner">
      <div class="section-slider-inner-box">
        <ul class="js-slick">
            <li>
              <a href="#">
                <img src="./image.jpg">
              </a>
            </li>
            <li>
              <a href="#">
                <img src="./image.jpg">
              </a>
            </li>
        </ul>
      </div>
    </div>
  </section>

中央に表示する場合のCSS

.section-slider {
  overflow: hidden;
  padding: 50px 0 65px;
}
.section-slider-inner {
  margin: 0 auto;
  width: 95%;
  padding-left: 1rem;
  padding-right: 1rem;
 }
.section-slider-inner-box {
  position: relative;
}
.section-slider-inner-box li {
  text-align: center;
  margin: 0 12px; /* 画像の間隔 */
}
.section-slider-inner-box img {
  display: block;
  width:100%;
}
.section-slider .slick-list {
  overflow: visible;
}
@media (max-width: 767px) {
  .section-slider { padding: 30px 0 45px; }
  .section-slider-inner {
    width: 70%;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
  .section-slider-inner-box li { margin: 0 8px; }
}

片側だけはみ出す場合のCSS

左側は常に隠れた状態になります。

.section-slider {
  position: relative;
  padding: 50px 0 65px 40px;
}
.section-slider-inner-box li { margin-right: 25px; }
.section-slider .slick-list { padding-right: 10%; }
@media (max-width: 767px) {
  .section-slider { padding: 30px 0 45px 30px; }
  .section-slider-inner-box li { margin-right: 15px; }
  .section-slider .slick-list { padding-right: 20%; }
}

クリック時の枠線を消す

画像クリック時に枠線が出るときは、 outline: none; を設定します。

/* クリック時の枠線を消す */
.section-slider-inner-box a:focus { outline: none;}

参考

片側だけはみ出たデザインのカルーセルスライダーをslickで実装する方法