質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

EC-CUBE

EC-CUBEは、主に日本国内で開発されているECコンテンツ管理システムです。ロックオン社のECKitを元にしてオープンソース化され、商品管理・受注管理・顧客管理・売上集計などECに特化した様々な機能を備えています。

Q&A

解決済

1回答

2169閲覧

EC-CUBE3系内での商品管理カルーセルでslick.jsの前後ボタンのナビゲーションの有無

Ykn

総合スコア9

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

EC-CUBE

EC-CUBEは、主に日本国内で開発されているECコンテンツ管理システムです。ロックオン社のECKitを元にしてオープンソース化され、商品管理・受注管理・顧客管理・売上集計などECに特化した様々な機能を備えています。

0グッド

0クリップ

投稿2018/03/16 05:44

編集2018/03/16 06:01

たびたびお世話になります。よろしくお願いします。
EC-CUBE3系で商品のピックアップカルーセルを作成しているのですが、前後ボダンのナビゲーションの画像が置き換わってくれなくて困っております。何か策はありますでしょうか。

<div id="item_list"> <div class="title-green pickup-text"> <img src="{{ app.config.front_urlpath }}/img/top/pickupitem.png" alt="PickUpItem"> <p>ピックアップ</p> </div> <script> $(function() { $('.slick-slider').slick({ arrows: true, appendArrows: $('#arrows'), infinite: true, slidesToShow: 5, //スライドを一度に表示する枚数 slidesToScroll: 1 //スライドを一度にスクロールする数 }); }); </script> <div class="container"> <div class="slick-slider"> {% for RecommendProduct in recommend_products %} <div class="pickup_item-box"> <div class="pickup_item"> <a href="{{ url('product_detail', {'id': RecommendProduct.Product.id}) }}"> <div class="item_photo slider-img"><img src="{{ app.config.image_save_urlpath }}/{{ RecommendProduct.Product.mainFileName|no_image_product }}" class="shadow pickup_item-img"></div> <p class="item_comment">{{ RecommendProduct.comment|raw|nl2br }}</p> <dl> <dt class="item_name pickup_name">{{ RecommendProduct.Product.name }}</dt> <dd class="item_price"> {% if RecommendProduct.Product.hasProductClass %} {% if RecommendProduct.Product.getPrice02Min == RecommendProduct.Product.getPrice02Max %} {{ RecommendProduct.Product.getPrice02IncTaxMin|price }} {% else %} {{ RecommendProduct.Product.getPrice02IncTaxMin|price }} ~ {{ RecommendProduct.Product.getPrice02IncTaxMax|price }} {% endif %} {% else %} {{ RecommendProduct.Product.getPrice02IncTaxMin|price }} {% endif %} </dd> </dl> </a> </div> </div> {% endfor %} </div> <div id="arrows"> <!--カルーセルの矢印を画像に差し替え---> <div class="slick-next"> <img src="{{ app.config.front_urlpath }}/img/top/right-slider.png" alt="→"> </div> <div class="slick-prev"> <img src="{{ app.config.front_urlpath }}/img/top/left-slider.png" alt="←"> </div> </div> </div> </div>

よろしくお願いいたします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

すいません。自己解決しました。
id="arrows"で画像を指定できなかったので(CSSでも指定しようとしましたが質問した段階と同じく二十に表示されてしまったため)scriptでデフォルト設定を直接変更しました。それぞれ画像を指定してあげることで変更することができました。

<div id="item_list"> <div class="title-green pickup-text"> <img src="{{ app.config.front_urlpath }}/img/top/pickupitem.png" alt="PickUpItem"> <p>ピックアップ</p> </div> <script> $(function() { $('.slick-slider').slick({ prevArrow: '<img src="{{ app.config.front_urlpath }}/img/top/left-slider.png" class="slide-arrow prev-arrow">',//この項目を追加しました nextArrow: '<img src="{{ app.config.front_urlpath }}/img/top/right-slider.png" class="slide-arrow next-arrow">',//この項目を追加しました infinite: true, slidesToShow: 5, //スライドを一度に表示する枚数 slidesToScroll: 1 //スライドを一度にスクロールする数 }); }); </script> <div class="container"> <div class="slick-slider"> {% for RecommendProduct in recommend_products %} <div class="pickup_item-box"> <div class="pickup_item"> <a href="{{ url('product_detail', {'id': RecommendProduct.Product.id}) }}"> <div class="item_photo slider-img"><img src="{{ app.config.image_save_urlpath }}/{{ RecommendProduct.Product.mainFileName|no_image_product }}" class="shadow pickup_item-img"></div> <p class="item_comment">{{ RecommendProduct.comment|raw|nl2br }}</p> <dl> <dt class="item_name pickup_name">{{ RecommendProduct.Product.name }}</dt> <dd class="item_price"> {% if RecommendProduct.Product.hasProductClass %} {% if RecommendProduct.Product.getPrice02Min == RecommendProduct.Product.getPrice02Max %} {{ RecommendProduct.Product.getPrice02IncTaxMin|price }} {% else %} {{ RecommendProduct.Product.getPrice02IncTaxMin|price }} ~ {{ RecommendProduct.Product.getPrice02IncTaxMax|price }} {% endif %} {% else %} {{ RecommendProduct.Product.getPrice02IncTaxMin|price }} {% endif %} </dd> </dl> </a> </div> </div> {% endfor %} </div> <!---id="arrows"の項目は不要なので削除しました。-----------> </div> </div>

以上です。EC-CUBEのデフォルトをテンプレート化していじっているため、前提条件をすべて把握できていません。いろいろ試して研究あるのみかと思います。

投稿2018/03/16 05:59

Ykn

総合スコア9

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問