Slickが、スマホだと動作しない

実現したいこと

Slickのスライドショーをスマホで動かしたい。

発生している問題・分からないこと

Slickで、画像が流れるスライドショー的な物を導入しました。
PCでは動くのですが、スマホでは動かない (ただ画像が並んだ状態) です。

スマホでも動かす方法を教えて下さい。

該当のソースコード

html
1<head>
2	<link rel="stylesheet" href="https://exam.info/wp-includes/css/slick.css" media="all">
3	<link rel="stylesheet" href="https://exam.info/wp-includes/css/slick-theme.css" media="all">
4</head>
5
6
7<ul class="slider">
8    <li><img src="img1.png"></li>
9    <li><img src="img2.png"></li>
10</ul>

jQuery
1jQuery(function ($) {
2    $('.slider').slick({
3        arrows: false,
4        autoplay: true,
5        autoplaySpeed: 0,
6        speed: 12000,
7        cssEase: "linear",
8        swipe: false,
9        pauseOnFocus: false,
10        pauseOnHover: false,
11        pauseOnDotsHover: false,
12    });

JavaScript
1function add_script_before_body() {
2    echo '<script src="https://exam.com/wp-includes/js/slick.min.js"></script>';
3}
4add_action('wp_footer', 'add_script_before_body');

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

・htmlで画像リストを作り、jquery記入
・jQueryはWordPressデフォルトを使用
・slick.min.jsをフッターに挿入
・slick.cssをヘッダーに挿入

ネット情報に沿って導入しましたが、動きません。

補足

特になし

行動規範の内容に同意します

回答2件

画像を見た限り、PCでもスライドショーになっているように見えません。
参考にされたサイトと見た目は同じでしょうか？
恐らくですが、JavaScript側での構文エラー(add_script_before_bodyのecho)でSlickのライブラリ読み込みに失敗し、CSS含めた適用がされていないのかと思われます。
HTML側で<script src="https://exam.com/wp-includes/js/slick.min.js"></script>を記述し、JavaScript側のadd_script_before_bodyを削除してみてはいかがでしょうか。

また、参照しているライブラリなどについても、URL先は存在していますか？

html
1<!doctype html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <link href="https://exam.info/wp-includes/css/slick.css" rel="stylesheet">
6    <link href="https://exam.info/wp-includes/css/slick-theme.css" rel="stylesheet">
7    <script src="https://exam.com/wp-includes/js/slick.min.js"></script>
8  </head>
9  <body>
10    <ul class="slider">
11      <li><img src="img1.png"></li>
12      <li><img src="img2.png"></li>
13    </ul>
14  </body>
15</html>

javascript
1jQuery('.slider').slick({
2  autoplay: true,
3  autoplaySpeed: 0,
4  arrows: false,
5  cssEase: 'linear',
6  pauseOnDotsHover: false,
7  pauseOnFocus: false,
8  pauseOnHover: false,
9  speed: 12000,
10  swipe: false
11});

投稿2024/03/20 08:06

編集2024/03/20 09:09

Refrain

総合スコア670

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

実現したいこと

発生している問題・分からないこと

該当のソースコード

試したこと・調べたこと

上記の詳細・結果

補足

関連した質問