Q&A
パスがうまくいっている前提ではありますが、ご提示のコードでthumb-itemスワイプでスライドの変更、thumb-item-navをクリックで連動するthumb-itemにスライド変更という動作を確認しました。（スライドボタンは確認できませんでしたが） これは想定している動作としては違いますか？
wordpressで画像をいくつか並べてスライドさせて表示したいです。
希望は、「slick」の「サムネイル付き」のイメージになります。
■slick
http://kenwheeler.github.io/slick/
現在は下記のような状態になっているのですが、
スライドボタンなども出ずに、slickになっていないように思います。
（slick-theme.cssの矢印の位置なども変えてみました。）
デベロッパーツールで確認してみたのですが、エラーが出ていません。
cssやjsの階層は合っています。
【header.php】
<?php wp_head(); ?> <!-- スライドショーslick --> <link rel="stylesheet" type="text/css" href="/js/slick/slick.css"/> <link rel="stylesheet" type="text/css" href="/js/slick/slick-theme.css"/> </head>
【footer.php】
<?php wp_footer(); ?> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script type="text/javascript" src="/js/slick/slick.min.js"></script> <script type="text/javascript"> $(function() { $('.thumb-item').slick({ infinite: true, slidesToShow: 1, slidesToScroll: 1, arrows: false, fade: true, asNavFor: '.thumb-item-nav' //サムネイルのクラス名 }); $('.thumb-item-nav').slick({ infinite: true, slidesToShow: 4, slidesToScroll: 1, asNavFor: '.thumb-item', //スライダー本体のクラス名 focusOnSelect: true, }); }); </script> </body>
【html】
<!-- ↓スライダー本体 --> <ul class="thumb-item"> <li><a href="#"><img src="../images/hoge.jpg"></a></li> <li><a href="#"><img src="../images/hoge.jpg"></a></li> <li><a href="#"><img src="../images/hoge.jpg"></a></li> </ul> <!-- ↓サムネイル --> <ul class="thumb-item-nav"> <li><a href="#"><img src="../images/thumb_hoge.jpg"></a></li> <li><a href="#"><img src="../images/thumb_hoge.jpg"></a></li> <li><a href="#"><img src="../images/thumb_hoge.jpg"></a></li> </ul>
※その他試してみたこと。
wordpressのjqueryの競合？が関係していると思い、
http://blog.aroundit.net/wordpress-jquery/
こちらのページも参考にさせて頂きましたが、解決しませんでした。
お忙しいところ申し訳ありませんが、
ご指摘頂けますようお願い致します。
回答2件
0
WordPressでCSSを読み込む場合は相対パスで記述すると高い確率でに失敗します。（パスを設定した場合インデックスページと記事ページで階層が違う）
絶対パスにするか、wp_enqueue_style を使用することをお勧めします。
【WordPressでCSSを追加する方法！ページの種類や記事ごとに個別で読み込みも可能 | ホワイトベアー株式会社】
http://whitebear-seo.com/wordpress-add-css/
【WordPress - 独自のCSSやJSを読み込む】
http://kwski.net/wordpress/780/
投稿2017/05/30 08:07
総合スコア69407
パスについての参考サイトありがとうございます。
毎回、相対パスについて場所が違っていたりで時間が掛かっていたので、
こちらのサイトを確認して勉強させていただきます！
0
自己解決
matsu1006さんに、スワイプで動いていると確認して頂いたところから気が付きました。
画像数を増やした場合に、イメージ通りの矢印が出てきました。
<!-- ↓スライダー本体 --> <ul class="thumb-item"> <li><a href="#"><img src="../images/hoge01.jpg"></a></li> <li><a href="#"><img src="../images/hoge02.jpg"></a></li> <li><a href="#"><img src="../images/hoge03.jpg"></a></li> <li><a href="#"><img src="../images/hoge04.jpg"></a></li> <li><a href="#"><img src="../images/hoge05.jpg"></a></li> <li><a href="#"><img src="../images/hoge06.jpg"></a></li> </ul> <!-- ↓サムネイル --> <ul class="thumb-item-nav"> <li><a href="#"><img src="../images/thumb_hoge01.jpg"></a></li> <li><a href="#"><img src="../images/thumb_hoge02.jpg"></a></li> <li><a href="#"><img src="../images/thumb_hoge03.jpg"></a></li> <li><a href="#"><img src="../images/thumb_hoge04.jpg"></a></li> <li><a href="#"><img src="../images/thumb_hoge05.jpg"></a></li> <li><a href="#"><img src="../images/thumb_hoge06.jpg"></a></li> </ul>
ありがとうございます！
投稿2017/05/30 08:40
総合スコア29
僕の方も全く同じ状況にしようと画像３つで試してました；
同じようにエラーも出ないし、一応Slickとしての動作はしてるみたいなので、あとは解決した方法のような数というか表示だけだったみたいですね。
画像の幅とかにも影響するかもしれませんね。
そうですね。
スライダー本体下に収まらないサイズや枚数になった時に、
きちんと表示されるみたいです。
かなり時間を掛けてしまっていたので拍子抜けの部分もありましたが、
パスの件も勉強になりました。
そういえば、ページングとかも1ページにおさまる数のときに次ページとか出ないから同じですね（＾＾；
僕もちょっと難しいことしようとすると基本的な考え方が抜けちゃうのでまだまだ経験と勉強が必要そうです。ありがとうございました。
あなたの回答
tips
プレビュー
