【再】横スライドでバナーを表示したい

Question

お世話になっております。

解決済みにしたのですが、うまくできなかったので再度質問させてください。
（前回）https://ec-masters.club/forum/post_view.php?id=2711

前の質問で聞いたツールボックスを使う方法ですと、１画像ずつしか表示できませんでした。
複数の画像をスライドさせていきたいです。

参考：http://www.rakuten.ne.jp/gold/outletshoes/?scid=af_pc_etc&sc2id=291641670

ここの新着＆人気アイテム　のところです。

商品単体であればECステーションさんのらくらくショーケースで可能なのですが、
企画ページへジャンプさせたいのです。

よろしくお願い致します。

Answer

ECマスターズの田中です。

それでは、JavaScriptを利用して
スライドさせる仕組みをご案内いたします。

FlexSlider2という、
jQuery用プラグイン（拡張機能）を利用します。
http://flexslider.woothemes.com/

GOLD内に新しいHTMLファイルをご用意いただき、
その中にFlexSlider2を利用してスライドバナーを設置し、
インラインフレームでHTMLファイルを表示させる、
という流れになります。

最初に、
http://flexslider.woothemes.com/
上記公式サイトの「DONWLOAD FLEXSLIDER」ボタンから
ダウンロードしたzipファイルの中身を、
GOLDに作成したフォルダの中にアップロードしてください。

アップロードする必要のないファイルも含まれておりますので、
最低限、下記のファイルをアップロードしていただければ結構です。

jquery.flexslider-min.js
flexslider.css
cssフォルダ
fontsフォルダ
imagesフォルダ

次に、
http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
上記URLを右クリックして保存していただき、
GOLDの同じフォルダにアップロードしてください。

無事にアップロードできましたら、
最低限の構造（・・タグ）が記述された
空白のHTMLファイルをご用意いただき、
下記ブログの記事に沿って、HTMLファイルに追記を行っていただくことで、
スライダーバナーが表示されます。
http://on-ze.com/archives/409

スライドの設定のためのコード、3行目にあります

$('.flexslider').flexslider();

の、flexslider( と ) の間にオプションを追加して
見た目を変化させることが出来ます。
たとえば常に４アイテム表示させたい場合は、

$('.flexslider').flexslider({
  minItems: 4,
  maxItems: 4
});

と記述してください。

おおまかな流れをご説明いたしましたので、
実際に設置作業を行っていただき、
不明な点がありましたらお知らせください。

Answer

田中　様

細かいところまでご指導ありがとうございます。

実際にやってみて、とりあえず動くようにはなりました。

※最初表示されなかったので、一部いじって



↓



に変更すると表示されるようになりました。

しかし、

＞$('.flexslider').flexslider({
＞minItems: 4,
＞maxItems: 4
＞});

等のflexslider()にオプションを追加すると画像が表示されなくなります。

アドバイスよろしくお願い致します。

Answer

ECマスターズの田中です。

実際のHTMLのソースを確認させていただく必要がありますので、
GOLDのどのフォルダに、どのファイル名で保存されているかを
お知らせいただけますでしょうか。

Answer

おはようございます。

slideフォルダ、test.htmlというファイルで試しに作っています。

よろしくお願い致します。

Answer

ECマスターズの田中です。

私にて確認したところ、
オプションを追加したことが原因で
画像が非表示になるような原因は
確認することができませんでした。

また、横に複数アイテムを並べるには
「animation」「itemWidth」の指定も
必要であることがわかりましたので、

$('.flexslider').flexslider();

この行を

$('.flexslider').flexslider({
animation: "slide",
itemWidth: 130,
itemMargin: 5,
minItems: 4,
maxItems: 4
});

この７行に置き換えて
動作をご確認いただけますでしょうか。

画像が表示されなくなった場合は、
原因を探る必要がありますので、
表示されない状態のまま置いておいて、
再度ご返信いただきますようお願いします。

Answer

田中　様

ありがとうございます。
正常に表示されるようになりました。

あとはオプションをいろいろ加えて希望の動作にしたいのですが、
現在、最後の画像まで行くと逆方向に戻り最初からという挙動になっています。
これを、最後の画像の次に最初の画像が来るようにして、ぐるぐる回る形にしたいのですが、
どのようにしたらよいでしょうか。

よろしくお願い致します。

Answer

ECマスターズの田中です。

bxSliderのオプション一覧を確認したのですが、
いただいた機能を実現できるオプションがありませんでした。

http://cosao.net/archives/6368
上記URLで紹介されている Owl Carousel 2で、
「loop:true」「slideBy:4」といったオプションを使うことで、
ぐるぐる回るスライドバナーを実現することができますので、
導入のご検討をお願いいたします。

Answer

田中　様

ありがとうございます。
Owl Carousel 2 で再度試しました。

エンドレスで続くスライドにできました。

しかしまた問題が…
１．現在、左から右に流れていますが、逆にしたい。
２．少し進んで、一瞬止まって、また進んで…という挙動ですが、一度も止まらずにずーっと流していたい。

この２点、修正できますでしょうか。

フォルダはslide、ファイルはtest2.htmlです。

よろしくお願い致します。

Answer

ECマスターズの田中です。

＞１．現在、左から右に流れていますが、逆にしたい。

Owl Carousel 2のオプションにはありませんでしたが、
私にて試したところ、
slideByの値を-4などに設定したところ、
逆方向に動くことを確認いたしましたので、
実際に設定してお試しください。

＞２．少し進んで、一瞬止まって、また進んで…という挙動ですが、一度も止まらずにずーっと流していたい。

同じペースで延々とスクロールさせる機能は
Owl Carousel 2にはありませんので、
また別の仕組みを導入する必要があります。

下記ページで紹介されている仕組みをご参照ください。
http://black-flag.net/jquery/20110707-3305.html

この仕組みで、止まらずに流れるバナーを実現できますが、
test2.htmlを拝見させていただいたところ、
バナー一つ一つにおける写真や文字の情報量が
かなり多くなっておりました。

情報量の多いバナーが動いたままの状態だと、
内容の把握が非常に難しく、
興味をもたれたとしても希望のバナーが常に動いているため
クリックすることがとても困難です。

このまま止まらずに流すようにすると、
お客様に反応していただけなくなる可能性が高いので、
停止する時間を逆に長くするなど、
お客様が反応しやすいバナーになるよう
ご検討をお願いします。

Answer

田中　様

お世話になっています。
おかげ様でかなり希望通りの動きになってきました。

あとひとつだけ希望があります。

当店トップページにあるランキングバナーのように、スライドの下に●を付けて
他にもバナーがあるということを認識してもらいたいのですが、OwlCarouselでできますでしょうか。
dotsオプションかと思い試しましたが表示されませんでした…。

よろしくお願い致します。

追伸
ご指摘のとおり、動き続けるとクリックしにくいと思いましたので、
停止とautoplayHoverPauseのオプションを付けてみました。

Answer

ECマスターズの田中です。

確認させていただいたところ、
GOLDに設置されているowl.carousel.min.jsのバージョンが古いことが原因で、
dotsが表示されていないように見受けられます。

http://www.owlcarousel.owlgraphic.com/
上記、公式サイトより改めてダウンロードの上、
GOLDのowl.carousel.min.jsを上書きしていただけますでしょうか。

Answer

田中様

お世話になっています。

だいぶ形になったので、本日、本サイトにアップしました。

すると、右端が少しだけ、次のバナーが見えています。
格好悪いので見えないように直したいのですが、どうすればいいでしょうか。

よろしくお願い致します。

Answer

ECマスターズの田中です。

私にて確認したところ、
IEの場合、右端にスクロールバーが表示されることを予測して
画像のサイズが少し小さめに設定されるようです。

スライドバナーを埋め込んでいるタグに、
「scrolling="no"」属性を追記していただくと、
綺麗に表示されますので、お試しいただけますでしょうか。

Answer

追加で質問です。

スマホでPCページを開くとうまく表示されていませんでした（汗）
自分が確認したのはiPhone6sです。
こちらの解決策も合わせて教えて下さい。

Answer

ECマスターズの田中です。

私にて、iPhone6sでPCのトップページを開いたところ
Safari、Chrome共に問題なく表示されておりました。
問題の部分を、可能であればスクリーンショットと共に
ご教示いただけますでしょうか。

Answer

田中　様

お世話になっております。
先の質問、タイミング悪くお返事できておりませんでした…。

scrolling="no"を加えたら希望通りの表示になりました。

スマホについて、今確認したところ問題なく表示されました。

これで好きなだけバナーを加えていけます。
一週間に渡り、教えてくださりありがとうございました。