二枚目のスライドをちょっとだけ見せるスライダープログイン「slick」の使い方

二枚目のスライドがちょこっとだけ見えるようにスライダープログイン「slick」の使い方とカスタマイズ方法を自分用にまとめてみました。

-完成DEMO-

HTML

<div class="slider-wrapper">
  <div class="contents">
    <h4>二枚目のスライドをちょっとだけ見せる</h4>
    <div class="more"> <a href="#" class="btn btn-arrow">リンクボタン</a> </div>
  </div>
  <div class="slider2">
    <div class="slider-img">
      <div class="slider-table"> <img class="fadein_img" src="https://dl.easyuploader.cloud/20220207222813_4e544a4e.webp" /> </div>
    </div>
    <div class="slider-img">
      <div class="slider-table"> <img class="fadein_img" src="https://dl.easyuploader.cloud/20220207222813_4c6b7139.webp" /> </div>
    </div>
    <div class="slider-img">
      <div class="slider-table"> <img class="fadein_img" src="https://dl.easyuploader.cloud/20220207222822_58556376.webp" /> </div>
    </div>
  </div>
</div>

CSS

/*     slider(contents)
---------------------------*/
.slider-wrapper {
  background: #333333;
  padding: 3.75rem 0 3.75rem 3.75rem;
}

.contents h4 {
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding-top: 35px;
}

.more {
  line-height: 1;
}

.btn {
  position: relative;
  text-decoration: none;
  display: inline-block;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  padding: 9.5px 30px 9.5px 15px;
  margin-top: 0.75rem;
  outline: none;
  transition: ease .2s;
  font-size: 0.875rem;
}

.btn-arrow::after{
  content: '';
  position: absolute;
  top: 38%;
  right: 13px;
  width: 8px;
  height: 8px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
  transition: all .1s;
}

.slider2 {
  margin-top: 35px;
  width: 100%;
}

.slider2 .slick-list {
  padding: 0 7.5vw 0 0!important;
}

.slider-img {
  padding: 0 4.5vw 0 0; 
}
.slider-img img {
  height: auto;
  width: 100%;
}

.slider2 .slick-prev,.slider2 .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  display: block;
  top: calc(0% - +50px);
  left: initial; /* 元々のcss(.slick-prev)の解除 */
  right: calc(0% - -3.5%);
  width: 30px;
  height: 30px;
  padding: 0;
  margin-top: 0px;
  cursor: pointer;
  color: #fafafa;
  border: #f8f7f5 1px solid;
  outline: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  z-index: 2;
  -webkit-border-radius: 100%;
  border-radius: 100%;
}

.slider2 .slick-prev {
  margin-right: 40px;
}

.slider2 .slick-prev::before {
  content: "\f104";
  font-family: "Font Awesome 5 Free";
  font-size: 15px;
  font-weight: 900;
  color: #fff;
}

.slider2 .slick-next::before {
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-size: 15px;
  font-weight: 900;
  color: #fff
}

.slider-table {
  background: #fefefe;
}

.slide-txt {
  color: #fff;
  font-size: 13px;
}

JS

CDNでオンライン上のslickを使用。