<!-- ========================================  
  Slick Slide 枚数カウント
========================================  -->
<section id="SlickSlide-02">
  

  <div class="wrapper">
    <h4 class="">"SLICK-SLIDE"に枚数カウントを追加する</h4>
    <div class="slide_count">
      <div class="content">
        <figure>
          <img src="img/slick01.png" alt="slick01">
          <figcaption>はじめ</figcaption>
        </figure>
      </div>
      <div class="content">
        <figure>
          <img src="img/slick02.png" alt="slick02">
          <figcaption>途中</figcaption>
        </figure>
      </div>
      <div class="content">
        <figure>
          <img src="img/slick03.png" alt="slick03">
          <figcaption>終盤</figcaption>
        </figure>
      </div>
      <div class="content">
        <figure>
          <img src="img/slick04.png" alt="slick04">
          <figcaption>完了</figcaption>
        </figure>
      </div>
    </div>
    </div>



</section>

/* =================================== */
/*   Slick slide 枚数カウント --  */
/* =================================== */
#SlickSlide-02 {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
}
#SlickSlide-02 h4 {
  margin-bottom: 10px;
  font-size: min(6.4vw, 2.4rem) ;
  line-height: 1.5;
}
#SlickSlide-02 .wrapper{
  margin: 0 30px;
  padding: 30px 20px;
  border: 3px solid #EE847D;
}
#SlickSlide-02 .js__slick {
  width: 100%;
}
#SlickSlide-02 figcaption {
  height: 70px;
  margin-bottom: 20px;
  font-size: min(4.267vw , 1.6rem);
  line-height: 1.5;
}
#SlickSlide-02 .slick-prev:before, .slick-next:before {
  background-color: #CBCBCB;
  padding: 5px 10px;
  border-radius: 100%;
}
#SlickSlide-02 .slick-prev {
  left: -5px;
  z-index: 10;
}
#SlickSlide-02 .slick-next {
  right: 10px;
  z-index: 10;
}

/* カウントエリアの装飾 */
#SlickSlide-02 .slider-num {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 30px;
  background-color:#EE847D;
  color: #FFF;
}

// ==========================================
//   Slick slide 枚数カウント
// ==========================================
$(function() {
  $(".slide_count")
    .on("init", function(event, slick) {
          $(this).append( //.addend=指定した子要素の最後にテキストやHTMLを追加できるメソッド
            '<div class="slider-num"><span class="now-count"></span>　/　<span class="all-count"></span></div>' //HTMLに直接書く方法もあり
          );
          $(".now-count").text(slick.currentSlide + 1); //現在のスライド(+1が無いと0からスタートしてしまう)
          $(".all-count").text(slick.slideCount); //総数
        })

    .slick({   // 通常のスライダー同様、オプションを記入
        autoplay: true,
        })

    .on("beforeChange", function(event, slick, currentSlide, nextSlide)  //スライドが移動する前に次のスライドを取得し、
        {
          $(".now-count").text(nextSlide + 1); //現在のスライド番号の次のスライドになったら番号を+1
        });
});