概要
bxSliderを利用して、商品画像のスライドを作っているのですが、以下の通りスマホで表示した場合うまく動きません。
お力添えいただけると幸いです。
発生している問題・エラーメッセージ
以下のように、スマホ表示の場合、3枚目の写真が常時表示され、写真はドラッグに合わせて動くのですが、 マウスを外すと元の位置に戻り、また他の写真には切り替わりません。 ページャー等は切り替わるのですが。。。 コンソールにも何のエラーメッセージも表示されず、原因不明です。
該当のソースコード
html
1<div class="slide-wrap"> 2<ul class="bxslider"> 3 <li><img src="画像URL" alt="" title="メイン画像"></li> 4 <li><img src="画像URL" alt="" title="草履の天・鼻緒・前坪の拡大画像"></li> 5 <li><img src="画像URL" alt="" title="草履の側面"></li> 6</ul> 7</div>
javascript
1<script> 2$(document).ready(function(){ 3$('.bxslider').bxSlider({ 4touchEnabled: true 5}); 6}); 7</script>
css
1.slide-wrap{ width: 600px; margin: 0 auto; } 2 3@media screen and (max-width: 640px){ .slide-wrap{ width: 100%; } }
試したこと
1.jQueryのバージョンの変更
2.jQueryを他の場所にも記述してないかの確認
3.jQuery実行コードを書き換える $(document).ready(function(){ から jQuery(document).ready(function($){ へ
補足情報(FW/ツールのバージョンなど)
パソコン画面では問題なく表示されます。
パソコン画面上ではスワイプも可能です。
また、スマホでも、ほかのjavascriptは問題なく動きます。
====
bxSliderのコード及びjQueryは公式サイトから配布・指定のCDNを使用しています。
以下、ファイルです。
<!-- jQuery library (served from Google) --> /body 直前に記述 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- bxSlider Javascript file --> /body 直前に記述 <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.js"></script> <!-- bxSlider CSS file --> /head に記述 <link href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.15/jquery.bxslider.min.css" rel="stylesheet" />また、ファイルをサーバーアップロードしているわけではなく、
ECショップ Makeshopのクリエイターモードというものを使用し、その機能の中で記述しております。
回答1件
あなたの回答
tips
プレビュー