カラーミー　スマホにスライダー設置方法

Question

いつもお世話になります。
カラーミー、商品ページにてスライド表示をさせていますが、（スライド表示ページはひとつの見本として知り合いに作ってもらいました）
スマホではスライドせず、その画像が縦並びで表示されてしまします。

どのように何をすればスマホでスライドするようになるのでしょうか。


PCページにて設置しているのは



  
    
      
    
    
      
    
　　　　　　・
　　　　　　・
　　　　　　・
  





検索で、楽天でのスマホスライダー設置については下記を見つけましたが、HTMLダグなどにあまり詳しくなく、分かりません。
https://ec-masters.club/forum/post_view.php?id=4515&word[]=%E3%82%B9%E3%83%9E%E3%83%9B&word[]=%E3%82%B9%E3%83%A9%E3%82%A4%E3%83%80%E3%83%BC

出来るだけ分かりやすく教えていただけますようお願いいたします。

Answer

ECマスターズの田中です。

商品ページにて実際にスライド表示されている様子、および縦並びになる様子を
確認させていただく必要がありますので、
設置した商品ページのURLをお知らせいただけますでしょうか。
（?pid= 以降の数字だけお知らせいただいても結構です）

Answer

URLですが、?pid以降をご連絡させていただきます。
?pid=88096005


昨日、カラーミーに問い合わせをしており、先ほど、カラーミーの方から

「ご希望の運用はタグ付けのみでは実現出来かねることが判明しました。
スライド実現方法に関しましても、独自の運用であるため当サポートではご案内出来かねる内容でございます。」

と返事がきました。

タグ付けのみでは、実現しないということは、スタイルシートに表記しないといけないということでしょうか。
どこにどのように表記すればいいか教えてください。

Answer

ECマスターズの田中です。

スマートフォン用ページを確認したところ、
スライダーの動作に必要な、下記のHTMLタグが無いようです。

= この下の行から ====================



// Can also be used with 
$(document).ready()
$(window).load(function() {
  $('.flexslider').flexslider({
    animation: "slide",
    slideshowSpeed: 2500,
    controlNav: "thumbnails"
  });
});

= この上の行まで ====================
※URLを一部伏せておりますので、PC用のページより正しいURLを取得してご利用ください。

上記のタグを、
「集客」→「検索エンジン対策」→「headタグ内フリースペース設定」
にて、「スマートフォン用ショップの設定」に挿入していただくことで、
同じスライダーの仕組みを全ページでご利用いただけると思いますので、
実際に挿入していただき、動作をご確認いただけますでしょうか。

Answer

いつもお世話になります。
休日ですのに、ご返信ありがとうございます、助かります。

挿入場所は分かりました、設置しましたところ、スライダーの画像がすべて見えなくなってしまいました。
作ってもらったものは、https://file001.shop-pro.jp
から始まりますが、そのあと私が作ったものは
https://img02.shop-pro.jp/になってます。
それも原因でしょうか。

知り合いに作ってもらったhttps://file001.shop-pro.jp/から始まる画像の商品ページもスライダーの画像が
見えなくなってしまいました。

PC用のページより正しいURLというのは、その商品ページで画像のプロパティのアドレス（URL）で合ってますでしょうか？
（アルファベット２文字数字5桁/数字３桁）

Answer

ECマスターズの田中です。

改めて確認したところ、
先述のタグより前に読み込んでおく必要があるjQueryファイルが、
タグ内ではなくタグ内にあったため、
正常に動作しておりませんでした。

先述のHTMLタグの先頭に一行追加して、
下記の内容に修正していただいた上で、
動作をご確認いただけますでしょうか。

= この下の行から ====================




// Can also be used with 
$(document).ready()
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
slideshowSpeed: 2500,
controlNav: "thumbnails"
});
});

= この上の行まで ====================
※URLを一部伏せておりますので、PC用のページより正しいURLを取得してご利用ください。

＞PC用のページより正しいURLというのは、その商品ページで画像のプロパティのアドレス（URL）で合ってますでしょうか？
＞（アルファベット２文字数字5桁/数字３桁）
はい、そのURLより取得をお願いします。
現在、実際に挿入されているURLで間違いありません。

Answer

お世話になります。

試してみましたが、画像は表示されません。

Answer

ECマスターズの田中です。

確認したところ、
に入っている「jquery-1.7.2.min.js」を読み込むタグが原因で、
jQueryがリセットされ、FlexSlider用のJavaScriptが無効化されておりました。

jQueryの重複を防ぐためにJavaScriptのソースを書き換え、
下記の内容に修正していただいた上で、
動作をご確認いただけますでしょうか。
（変更箇所は、最後の〜の中身のみです）

= この下の行から ====================




var jQ = jQuery.noConflict();
jQ(function() {
jQ('.flexslider').flexslider({
animation: "slide",
slideshowSpeed: 2500,
controlNav: "thumbnails"
});
});

= この上の行まで ====================
※URLを一部伏せておりますので、PC用のページより正しいURLを取得してご利用ください。

Answer

お世話になります。

無事表示されました、ありがとうございました。

カラーミー スマホにスライダー設置方法

カラーミー　スマホにスライダー設置方法