前提・実現したいこと
TumblrをCMSとして、小規模なwebページを作成しています。
テンプレートをもとにhtmlのCSSをちょっとづついじているのですが、jQueryのbxsliderでスライドショーを作ろうとしたとき躓きました。
スライドーショー自体は導入できるものの、自動で動いてくれません。ボタンを押せば動くのですが、自動で再生させるのが目的なので何とか動かしたいです。
発生している問題・エラーメッセージ
<script> $(document).ready(function(){ $('.slider').bxSlider(); auto: true }); </script>
この設定でスライドショーが動きません。また、オプションの欄に2行以上指定するとスライドショー自体が崩れてただのリストになります。
もともとのテンプレートはbodyの下ほうで、バージョン1.11.0のjQueryを読み込んでいましたが、それだとスライドショーが動かなかったので、header部分にそのまま移しています。
該当のソースコード
header
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script> <script> $(document).ready(function(){ $('.slider').bxSlider(); auto: true }); </script>
body
<ul class="slider"> <li><img src="url/bxslider/01.png"></li> <li><img src="url/bxslider/02.png"></li> <li><img src="url/bxslider/03.png"></li> </ul>
url部分は省略します。
試したこと
テンプレートを使わずに、白紙の状態から同じコードをコピーしたところ同じことが起きたのでテンプレートのせいではないかもしれません。
補足情報
頼まれている方から、tumblrを使うことを指定されているのですが、tumblrでjQuwryを使っているという情報が少ないので困っています。こうしたらいいのでは、ということでもいいのでよろしくお願いします。
回答1件
あなたの回答
tips
プレビュー