Webプロデューサー 松前 浩志 このような無限ループスライダー画像ができます
6時間格闘して、やっと納得行く無限ループするアニメーションのスライダー画像がやっとで、で、できた。
しかもレスポンシブWebデザインでね。
本当にいろんな手法を試しました。
HTML, CSS, Javascript, jQuery, WordPressプラグイン・・・結果、ベタ打ちの手法で。
というのも、いろんなブログサイトの情報は古かったり、カクカクしていたり、表示されなかったり、マジでダメなのばっか。
そのくせ、解説者は10人くらいしかおらず。
ってことで、コピペして使ってね。
制作環境
WordPress
テーマ：SnowMonkey
ブロックエディタ
条件
・1番カクカクしない
・スマホでも表示される
・PCとスマホで表示枚数とスピード変化できる
バグ
なお、1ページ内に同じHTMLコードを記述したら、PCサイトでは表示されるけど、SPサイトでは表示されない、SPにしかCSSが適用されない、超カクカクするなど、バグだらけなのでお勧めしません。
どうしても、上段スマホ版、下段PC版のようにブロックエディタで分けたければ、上段がCSS、下段がJSと全く別の種類で分けて制作しないとバグる確率が一気に上がります。
それでかなり時間を消耗しました by 僕の大量の実装失敗経験談
具体的な方法
WordPressブロックエディタ
□ スマホ表示
□ PC表示
HTMLコード 両方表示
□ スマホ表示
□ PC表示
HTML
<div class="scroll-infinity">
<div class="scroll-infinity__wrap">
<!-- 画像修正や追加 -->
<ul class="scroll-infinity__list scroll-infinity__list--right">
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
</ul>
<!-- 必ず！上記と同じ画像を下記にコピペ -->
<ul class="scroll-infinity__list scroll-infinity__list--right">
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
<li class="scroll-infinity__item"><img src="https://via.placeholder.com/300x200" alt="placeholder image" /></li>
</ul>
</div>
</div>
CSS
/* Infinity scroll animation left to right */
@keyframes infinity-scroll-right {
0% {
transform: translateX(-100%);
}
100% {
transform: translateX(0%);
}
}
.scroll-infinity__list--right {
animation: infinity-scroll-right 200s infinite linear!important;
}
.scroll-infinity__wrap {
display: flex;
overflow: hidden;
width: 100%;
}
.scroll-infinity__list {
display: flex;
list-style: none;
padding: 0!important;
margin: 0!important;
}
.scroll-infinity__item {
width: calc(100vw / 6);
margin-bottom: 40px;
}
.scroll-infinity__item > img {
width: 100%;
height: 200px;
}
@media screen and (max-width: 640px) {
/* SP直下に置く！１番下はNG */
.scroll-infinity__list--right {
animation: infinity-scroll-right 80s infinite linear;
will-change: transform;
}
.scroll-infinity__item {
width: calc(100vw / 3);
margin-bottom: 20px;
}
.scroll-infinity__item > img {
width: 100%;
height: 140px;
}
・・・略・・・
}JS
カスタムCSS＆JS プラグインにて、外部ファイルとして追加
目的：上が無限ループ画像のLazy Loadを無効化で、下がスライダー画像を最優先読み込みする
document.querySelectorAll('.scroll-infinity__item img').forEach(function(img) {
img.setAttribute('loading', 'eager');
});
function preloadImage(url) {
const img = new Image();
img.src = url;
}
document.querySelectorAll('.scroll-infinity__item img').forEach(function(img) {
preloadImage(img.getAttribute('src')); // 画像のURLをプリロード
});こんなん簡単だろ！って思うでしょ？
いやいや、多くの参考サイトで試しまくったけれど、僕の環境下では挙動がおかしいのよ。
原因はプラグイン？LazyLoad？WP？テーマ？複合的に絡んでいるのがWebサイトだからしゃーないんだけどさ、他の要因が干渉して上手く機能しないってことは。
だから、苦戦したな～今回は。
でも、まぁ、しかし、これでスキルアップできたので、流れるアニメスライダーをオプションでクライアントから頂けるので良しとしよう。
みなさんも、このコードだけで、クライアントからオプション追加で制作費いただけるようになるかと思います。
あ、なお、セキュリティ強い・広告剥がすブラウザで見ると、上手く画像を読み込まれないなど発生することが多いです。
もうね、それは、ブラウザのせいでしかありません。
僕もいろいろChatGPTと対話したけれど、なかなか完璧に納得行くスムーズに流れる画像スライダーはできませんでした。
一般的にPCならChrome、SPならSafari、Chromeで表示されれば大体はカバーできるかなと。
いや～、しかし、納期に追われるって精神的にしんどいっす。
でも、やらねばならぬ。
ここで逃げたらスキルアップにもならんし、お金も早く頂けないし。