• 文字サイズ
解決済

スマホのスライドバナーがうまくいきません

  • 相談者:非公開
  • 2017/04/06 00:44
いつもお世話になっております。

楽天大学の
【SP】【ガイド】7スマホでもスライドショーを実装!コンパクトにまとめたスライドショーの作り方①
に従って作業したつもりなのですが、その表示したい箇所が真っ白で何も表示されません。
何を直せばよいかわかりません。
教えていただけないでしょうか?
宜しくお願い致します。

1)「flexslider.css」「jquery.flexslider-min.js」「common.js」「suraide20170406.html」
 ・GOLD保存フォルダは、
  「flexslider.css」:/sp/css
  「jquery.flexslider-min.js」:/sp/js
  「common.js」:/sp/js
  「suraide20170406.html」:/sp
  「1.JPG」「2.JPG」「3.JPG」(スライドバナー使用各画像):/sp/images

 ・各内容
  ・「flexslider.css」:資料を見て以下を最下位へ貼り付け

     .slideshow2 {
      width:950px;
      }

・「common.js」:資料を見て必要コードを貼り付けました。

    $(document).ready(function() {

     $('.flexslider').flexslider({
     animation: "slide",
    ]);

    ]);

 ・「suraide20170406.html」:資料を見て作成しました。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>●スマホトップページのスライドバナー</title>
<link rel="stylesheet" href="http//www.rakuten.ne.jp/gold/SHOP-URL/sp/css/flexslider.css">
<script src="店舗URL/js/jquery.flexslider-min.js"></script>
</head>
<body>
<div class="slideshow2"><div class="flexslider"><ul class="slides">
<li><img src="http://image.rakuten.ne.jp/gold/furu2525/sp/images/1.JPG"></li>
<li><img src="http://image.rakuten.ne.jp/gold/furu2525/sp/images/2.JPG"></li>
<li><img src="http://image.rakuten.ne.jp/gold/furu2525/sp/images/3.JPG"></li>
</ul></div></div>
</body>
</html>

 ・スマホ トップ説明文(1)へ貼り付け(ECマスターズフォーラムの過去質問回答を参考に貼り付けました)

   <div style="overflow:hidden;width:304px;margin:0 auto;"     
>
<iframe     
src="http//www.rakuten.ne.jp/gold/SHOP-URL/sp/suraide20170405.html" width="100%" marginwidth="0" height="75" marginheight="0" scrolling="no" frameborder="0" hspace="0" vspace="0" style="-o-transform:scale(0.5961);-webkit-transform:scale(0.5961);-moz-transform:scale(0.5961);-ms-transform:scale(0.5961);transform:scale(0.5961);-o-transform-origin:0 0;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;">
</iframe     
>
</div     
>


2)楽天大学の参考ダウンロード資料を添付させていただきました。
  これを見て作業しました。
 ・【SP】【ガイド】7スマホでもスライドショーを実装!コンパクトにまとめたスライドショーの作り方①

投稿内容について報告する



  • 返信者:非公開
  • 2017/04/06 16:50
ECマスターズの田中です。

>何を直せばよいかわかりません。
>教えていただけないでしょうか?

複数ございますので、再発を防ぐためにも、
1つ1………(省略)………
  • 返信者:非公開(質問者)
  • 2017/04/07 00:55
どうも有り難うございます。

教えていただいた内容へ修正してみたのですが、
やはり、スマホトップページの最上部の表示したい箇所が、白紙スペースになってしま………(省略)………
  • 返信者:非公開
  • 2017/04/07 13:52
ECマスターズの田中です。

実際にGOLDにて公開されている「suraide20170406.html」を確認したところ、
http//www.raku………(省略)………
  • 返信者:非公開(質問者)
  • 2017/04/07 15:53
確認したのですが、そんなところに気づかず失礼しました。

しかし、やっぱり空白スペース表示となってしまいます。
ページ作成業者に頼むと高額なので自分でした………(省略)………
  • 返信者:非公開
  • 2017/04/07 16:35
ECマスターズの田中です。

実際にGOLDにて公開されている「suraide20170406.html」を確認したところ、
FlexSliderを動作さ………(省略)………
  • 返信者:非公開(質問者)
  • 2017/04/08 00:16
解決しました!

田中様に、一つの事にいつまでもお手数をお掛けしては、申し訳ないと思ったのですが、
親切・丁寧なご対応に感謝を申し上げます。
どうも有り………(省略)………