Slick Sliderの各種設定をコメントアウトで補足

レスポンシブスライダーで１枚１枚の写真移り変わり時間を個別に設定したいと要望を受けて、Slickの設定値を書き出しました。最初に、jQueryとSlickを読み込んでください。読み込む際のHTMLは以下の通りです。

<!-- CSS -->
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<!-- JS -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>

以下javascript/jQueryのコードです。最下段にあるHTML5の<picture>タグで、レスポンシブ対応のために<source>タグと<img>タグを使っています。また、<source>タグのsrcset属性と<img>タグのsrc属性には、URL無記載ですので何か画像を入れてください。

<script>
jQuery(function(){

    $(".slider").slick({
    // アクセシビリティ。左右ボタンで画像の切り替えをできるかどうか
    accessibility: true,
    // 自動再生。trueで自動再生される。
    autoplay: true,
    // 自動再生で最初のスライドの切り替えをする時間
    autoplaySpeed: 3000,
    // 自動再生や左右の矢印でスライドするスピード
    speed: 400,
    // 自動再生時にスライドのエリアにマウスオンで一時停止するかどうか
    pauseOnHover: true,
    // 自動再生時にドットにマウスオンで一時停止するかどうか
    pauseOnDotsHover: true,
    // 切り替えのアニメーション。ease,linear,ease-in,ease-out,ease-in-out
    cssEase: 'ease-in',
    // 画像下のドット（ページ送り）を表示
    dots: false,
    // ドットのclass名をつける
    dotsClass: 'dot-class',
    // ドラッグができるかどうか
    draggable: true,
    // 切り替え時のフェードイン設定。trueでon
    fade: false,
    // 左右の次へ、前へボタンを表示するかどうか
    arrows: true,
    // 無限スクロールにするかどうか。最後の画像の次は最初の画像が表示される
    infinite: true,
    // 最初のスライダーの位置
    initialSlide: 0,
    // 画像の遅延表示。‘ondemand’or'progressive'
    lazyLoad: 'ondemand',
    // スライドのエリアにマウスオーバーしている間、自動再生を止めるかどうか
    pauseOnHover: true,
    // スライドのエリアに画像がいくつ表示されるかを指定
    slidesToShow: 1,
    // 一度にスライドする数
    slidesToScroll: 1,
    // タッチスワイプに対応するかどうか
    swipe: true,
    // 縦方向へのスライド
    vertical: false,
    // 表示中の画像を中央へ
    centerMode: true,
    // 中央のpadding
    centerPadding: '0px',
    
    //レスポンシブでの動作を指定
    responsive: [
    {
      breakpoint: 640,  //ブレイクポイントを指定
      settings: {centerPadding:'0px'}
    },{
      breakpoint: 480,
      settings: {
        centerMode: false,
      }
    }]
    
    })
    .on("afterChange", function(event, slick, currentSlide, nextSlide) {
      switch (currentSlide){
        case 0:
          // 1枚目のスライドのオートプレイスピード
          $(this).slick("slickSetOption", "autoplaySpeed", 7000);
          break;
        case 1:
          // 2枚目のスライドのオートプレイスピード
          $(this).slick("slickSetOption", "autoplaySpeed", 10000);
          break;
        default:
          // その他のスライドのオートプレイスピード
          $(this).slick("slickSetOption", "autoplaySpeed", 3500);
          break;
      }
    });

});
</script>
<div class="slider">
  <picture>
     <source media="(max-width: 768px)" srcset=""><!--スマホやタブレット-->
     <img src="" alt="image02"><!--パソコン-->
  </picture>
  <picture>
     <source media="(max-width: 768px)" srcset=""><!--スマホやタブレット-->
     <img src="" alt="image02"><!--パソコン-->
  </picture>
  <picture>
     <source media="(max-width: 768px)" srcset=""><!--スマホやタブレット-->
     <img src="" alt="image02"><!--パソコン-->
  </picture>
  <picture>
     <source media="(max-width: 768px)" srcset=""><!--スマホやタブレット-->
     <img src="" alt="image02"><!--パソコン-->
  </picture>
</div>