ecツールテンプレート編集

Question

https://www.rakuten.ne.jp/gold/nafuda-factory/
こちらサイトで
「新商品はこちらで…」で使用していますスライドですが
その上にある特集などのバナーをはりつけてあるスライドの画像の左右についている矢印をつけて前に戻ったり先に進んだりと操作できるようにしたいのですがどのように編集したらよいでしょうか？
自動でスライドする動きはそのまま残したいです。
どちらもECステーションのツールのテンプレートを使用しています。
よろしくお願いします。

Answer

ECマスターズの田中です。

> 「新商品はこちらで…」で使用していますスライドですが
> その上にある特集などのバナーをはりつけてあるスライドの画像の左右についている矢印をつけて前に戻ったり先に進んだりと操作できるようにしたいのですがどのように編集したらよいでしょうか？

テンプレートの編集画面より、
controls: false,
を
controls: true,
にご変更の上、動作をご確認いただきますようお願いします。
編集箇所が見つからない場合はご返信ください。

Answer

ECマスターズの田中様
ご回答ありがとうございます





var load = function() {
$(".slider").bxSlider({
        mode: "horizontal",
        displaySlideQty:5,// ★表示するスライドの数
        moveSlideQty: 1,
        controls: true,←—――――コチラをこのように変更ということでよろしいでしょうか？
        auto: true,
        autoDirection: "next", // prev/next
        pause: 3000　// ★スライドの間隔
    });
};


プレビューで見てみたのですが
特に変化がないようです…

Answer

ECマスターズの田中です。

> controls: true,←—――――コチラをこのように変更ということでよろしいでしょうか？
はい、そのようにご変更いただければ結構です。

ですが、テンプレート上で、矢印の表示を想定していないため、
表示できないよう改造されている可能性がございます。
原因を探るには、表示できるかどうか、
実際のソースを確認させていただく必要がございます。

ご変更いただいても、既存の見た目への悪影響はございませんので、
まずは実際にご変更いただきますようお願いします。

Answer

ECマスターズの田中

こちら変更して更新してみましたが
解決に至ることができませんでした

ソースを確認いていただくには
どのようにしたらよいでしょうか？

テンプレートはECマスターズの
にぎわいRMIXの新着_よこ型_スライド750px（NW-S01white）
のテンプレートを使用させていただいております

Answer

ECマスターズの田中です。

私にて、実際のショップより状況を確認させていただきました。
やはり、左右矢印を表示させるためのスタイルシートが含まれていないようです。

MIYABIさんにて、スライドのURLを直接ご覧いただくと
左下に「prevnext」と表示されているのがおわかりいただけると思います。
これが、本来左右の矢印となるべき部分です。

そのため、左右の矢印を表示するための設定を行っていただく必要がございます。
スライドはbxSliderというjQueryプラグインによって設置されておりますので、
プラグイン用のスタイルシートから抜き出すと早いです。

最初に、
https://cdn.jsdelivr.net/bxslider/4.2.12/images/controls.png
上記画像ファイルをダウンロードし、
楽天GOLDの「ecstation」フォルダに保存してください。
（すでに「controls.png」が存在し、上書きするか聞かれた場合は、
　一旦作業を中断するか、名前を変更してアップロードして継続してください）

次に、下記スタイルシートを適用していただくことで、
左右矢印が表示されます。

= この下の行から ====================
.bx-wrapper .bx-prev {
  left: 10px;
  background: url('controls.png') no-repeat 0 -32px;
  position: absolute;
  top: 50%;
  overflow: hidden;
  text-indent: 100%;
}
.bx-wrapper .bx-prev:hover,
.bx-wrapper .bx-prev:focus {
  background-position: 0 0;
}
.bx-wrapper .bx-next {
  right: 10px;
  background: url('controls.png') no-repeat -43px -32px;
}
.bx-wrapper .bx-next:hover,
.bx-wrapper .bx-next:focus {
  background-position: -43px 0;
}
.bx-wrapper .bx-prev, .bx-wrapper .bx-next {
  position: absolute;
  top: 50%;
  margin-top: -16px;
  outline: 0;
  width: 32px;
  height: 32px;
  text-indent: -9999px;
  z-index: 9999;
}
= この上の行まで ====================

なお、MIYABIさんのトップページでは、
横幅750pxで表示すべきスライダーを690pxで表示されているため、
右の矢印は見切れて表示されません。

そのため、横幅を調整していただく必要がございます。
方法がわからない場合はお知らせいただきますようお願いいたします。