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

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

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

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

目次

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

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

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

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版でバグった。
縦1列にLPみたく並んでしまった。

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

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

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

売れる仕組みを創り、Webで売上アップさせる
株式会社WebSanta 代表取締役
 
幼少期、何も誇れる能力も無く、自分に自信が無い日々を過ごす。
小中高校時代、父の3億の借金、生死をさまよう交通事故、大火傷、彼女の死にも遭う。
それらをキッカケに「たった一度の人生、悔いなく生きたい!」と心に決める。
しかし、大学時代、バレンタインデーに当時の彼女にフラれ、自殺しようと銃社会アメリカに渡るもシリコンバレーのIT革命に魅せられ帰国。
 
ケンブリッジ大学語学留学、東京理科大学経営学部経営学科、すごい起業塾、ビジネスコンテスト優勝を経て、株式会社WebSantaを設立。
総額600万円の詐欺やうつ病に遭いながらも、起業12年・相談1000人・サイト制作100件・セミナー100回・総売上3億に貢献。
 
使命は「起業家に未来を届ける」
ビジョンは「Webマーケティングで起業家のビジネスを革新させる」
夢は「悲しい倒産を無くす」こと。

コメント

コメントする

目次