WordPress：右から左に流れる画像スライダーJavascript スマホ対応 コピペOK！

いやはや、これ制作するのに３時間かかったよ（汗）
バグばっかでさ。
誰かの役に立つため、そしれ俺の備忘録のために記述しておく。
クライアントワークの開発の一貫で制作しているので、著作権違反にならないようにplaceholder画像で代替しておく。

これも全てChatGPT4Vとの対話のおかげ！
たぶん、ChatGPT4Vがこの世になかったら、俺挫折しているな。
確実にこのおかげで３ヶ月で5万円は稼がせてもらっている。
なぜなら、今までならできません！や外注して制作してもらっていたのに、ChatGPT4Vのおかげで断らずに生成することができている。
マジですごい時代。

まぁ、それでもプロンプトエンジニアばりに対話しまくっているからこその成果物なんだよな。
AI活用できるやつが、まずはAI活用できないデザイナーやプログラマーの仕事を奪うって記事読んだけど、まさにそれを実感したわ。
だって、俺がChatGPT４V活用できなければ、かなりの機会損失、謝罪、外注、利益損失出しているからさ。
逆にできれば、効率アップ、生産アップ、利益増大！

右から左に流れる画像スライダーJavascript スマホ対応

ってことで、俺のおしゃべりな前置きはココまでにして、下記にコードそっと置いておく。

AIが生成したもんだから著作権もなし！
どうぞ俺のメモなんでご自由にｗ

WordPress　プラグイン　カスタムCSS&JS
HTML追加

<meta name="google-site-verification" content="b2bQhLlXDXDFeQDU9XWR-CtIhPalXdmUwWKozLErYd8" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

右側bodyタグの後　にチェック
☑

↓

SPサイト　HTMLコード挿入
<div class="slider-container">
<div class="slider">   
    <div><img src="https://kunitaseitai.com/wp-content/uploads/2024/01/slider1.jpg"></div>
    <div><img src="https://kunitaseitai.com/wp-content/uploads/2024/01/slider2.jpg"></div>   
    <div><img src="https://kunitaseitai.com/wp-content/uploads/2024/01/slider3.jpg"></div>
    <div><img src="https://kunitaseitai.com/wp-content/uploads/2024/01/slider4.jpg"></div>
    <div><img src="https://kunitaseitai.com/wp-content/uploads/2024/01/slider5.jpg"></div>   
    <div><img src="https://kunitaseitai.com/wp-content/uploads/2024/01/slider6.jpg"></div>
    <div><img src="https://kunitaseitai.com/wp-content/uploads/2024/01/slider7.jpg"></div>
    <div><img src="https://kunitaseitai.com/wp-content/uploads/2024/01/slider8.jpg"></div>
    <div><img src="https://kunitaseitai.com/wp-content/uploads/2024/01/slider9.jpg"></div>
</div>
</div>

<script>
$(document).ready(function(){
    $('.slider').slick({
        autoplay: true,         // 自動再生をオン
        autoplaySpeed: 0,       // 自動再生のスピード
        speed: 4000,            // スライドのスピード
        slidesToShow: 6,        // デフォルトのスライド表示数（PC）
        cssEase: "linear",      // スライドの動きをリニアに
        pauseOnHover: false,    // ホバーしても止まらない
        pauseOnFocus: false,    // フォーカスしても止まらない
        responsive: [           // レスポンシブ設定
            {
                breakpoint: 768, // 768px以下の場合
                settings: {
                    slidesToShow: 2 // スライドの表示数を2に
                }
            }
        ]
    });
});
</script>


↓

PCサイト　HTMLコード挿入
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>

<style>
    .slider{
        width:100%;
        margin:0 auto;
box-sizing: border-box;
height: 180px;
    }
    .slider img{
        width:240px;
height: auto;
    }
    .slider .slick-slide{
        height:auto!important;
    }
.slider-container {
	background-color: white;
	  width: 100%;
  position: relative;
}
.slider {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}
</style>

<div class="slider-container">
<div class="slider">   
    <div><img src="https://kunitaseitai.com/wp-content/uploads/2024/01/slider1.jpg"></div>
    <div><img src="https://kunitaseitai.com/wp-content/uploads/2024/01/slider2.jpg"></div>   
    <div><img src="https://kunitaseitai.com/wp-content/uploads/2024/01/slider3.jpg"></div>
    <div><img src="https://kunitaseitai.com/wp-content/uploads/2024/01/slider4.jpg"></div>
    <div><img src="https://kunitaseitai.com/wp-content/uploads/2024/01/slider5.jpg"></div>   
    <div><img src="https://kunitaseitai.com/wp-content/uploads/2024/01/slider6.jpg"></div>
    <div><img src="https://kunitaseitai.com/wp-content/uploads/2024/01/slider7.jpg"></div>
    <div><img src="https://kunitaseitai.com/wp-content/uploads/2024/01/slider8.jpg"></div>
    <div><img src="https://kunitaseitai.com/wp-content/uploads/2024/01/slider9.jpg"></div>
</div>
</div>

<script>
$(document).ready(function(){
    $('.slider').slick({
        autoplay: true,         // 自動再生をオン
        autoplaySpeed: 0,       // 自動再生のスピード
        speed: 4000,            // スライドのスピード
        slidesToShow: 6,        // デフォルトのスライド表示数（PC）
        cssEase: "linear",      // スライドの動きをリニアに
        pauseOnHover: false,    // ホバーしても止まらない
        pauseOnFocus: false,    // フォーカスしても止まらない
        responsive: [           // レスポンシブ設定
            {
                breakpoint: 768, // 768px以下の場合
                settings: {
                    slidesToShow: 2 // スライドの表示数を2に
                }
            }
        ]
    });
});
</script>



■解説
共通コードがバッティングして、PC版でバグった。
縦１列にLPみたく並んでしまった。

スマホにCSS追加しても良いけど、なくても機能するのでカット

JSにてレスポンシブ設定したけど、両方にないとやはりPCでバグったので
念のため両方に記述しておく、まぁ間違いはないので。