バージョン選択

フォーラム

メニュー

オンライン状況

40 人のユーザが現在オンラインです。 (32 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 40
もっと...

PR

先着1,000社 プラグインダウンロード&お申込で1,000円分Amazonギフト券プレゼント amazon pay
広告掲載について

サイト内検索

質問 > フロント機能 > トップページスライドショーの左右移動ボタン

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
hi-ro
投稿日時: 2018/7/5 10:47
対応状況: −−−
半人前
登録日: 2018/3/23
居住地:
投稿: 21
トップページスライドショーの左右移動ボタン
トップページのスライドショーの左右移動ボタンはデフォルトでは非表示になっていると思います。

以下JSのarrows部分を"true"に変更すれば表示されますが、ボタンをカスタマイズする上でHTMLがどこに書いてあるのか見つけられません。

ご存知の方いらっしゃいましたら、ご教授の方、よろしくお願い致します。

{% block javascript %}
<script>
$(function(){
$('.main_visual').slick({
dots: true,
arrows: false,
autoplay: true,
speed: 400
});
});
</script>
{% endblock %}
matchbou
投稿日時: 2018/7/5 10:55
対応状況: −−−
一人前
登録日: 2018/3/19
居住地:
投稿: 118
Re: トップページスライドショーの左右移動ボタン
ファイルはtemplate\default\index.twigとなりますが、
探すより管理画面で直すのが一番早いかと。
コンテンツ管理->ページ管理->TOPページの編集ですね。


----------------
アイフォーコム株式会社
お問い合わせ URL:https://www.iforcom.jp/ec/
tel:045-412-3010
EC-CUBEの構築・カスタマイズは有償で承ります。ご相談下さい

hi-ro
投稿日時: 2018/7/5 11:14
対応状況: −−−
半人前
登録日: 2018/3/23
居住地:
投稿: 21
Re: トップページスライドショーの左右移動ボタン
matchbou様

早急にご回答いただき、ありがとうございます。

今回修正したいのは、以下のコードになります。
<button type="button" data-role="none" class="slick-prev" aria-label="previous" style="display: inline-block;">Previous</button>

<button type="button" data-role="none" class="slick-next" aria-label="next" style="display: inline-block;">Next</button>

ご教授頂いた、コンテンツ管理->ページ管理->TOPページには
上記コードは記載されておりません。

この場合、どのように処置したらよろしいでしょうか?
matchbou
投稿日時: 2018/7/5 11:38
対応状況: −−−
一人前
登録日: 2018/3/19
居住地:
投稿: 118
Re: トップページスライドショーの左右移動ボタン
slickの内でprevArrowとnextArrowを追加すれば、指定したボタンに書き換わりますが。例えば、
$(function(){
    $('.main_visual').slick({
        dots: true,
        arrows: true,
        autoplay: true,
        speed: 300,
        prevArrow: '<button type="button" data-role="none" class="slick-prev" style="display: inline-block;">Previous</button>',
        nextArrow: '<button type="button" data-role="none" class="slick-next" style="display: inline-block;">Next</button>'
    });
});

とすれば標準のボタンから「aria-label」を削除することも可能ですし、画像を使いたいようなら、「<img src="前への矢印画像のパス" class="prev-arrow">」等も指定可能ですが。

それともJS内に指定されている標準のボタン自体をカスタマイズしたいということでしょうか?


----------------
アイフォーコム株式会社
お問い合わせ URL:https://www.iforcom.jp/ec/
tel:045-412-3010
EC-CUBEの構築・カスタマイズは有償で承ります。ご相談下さい

hi-ro
投稿日時: 2018/7/5 11:52
対応状況: −−−
半人前
登録日: 2018/3/23
居住地:
投稿: 21
Re: トップページスライドショーの左右移動ボタン
matchbou様

ご教授頂いた方法でJSに追加したところ、思い通りにカスタマイズできました。

非常に助かりました。

ありがとうございました。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBEペイメント

統計情報

総メンバー数は28,660名です
総投稿数は86,774件です

投稿数ランキング

1
seasoft
7331
2
AMUAMU
2712
3
nanasess
1752
4
yuh
1500
5
red
1165
6
468
1085
7
umebius
1007
8
fukap
907
9
shutta
827
10
tsuji
815
11 ramrun 789
12
tao_s
651
13 karin 650
14 sumida 641
15
homan
633
16 DELIGHT 571
17
h_tanaka
508
18
patapata
502
19
flealog
483
20 tonton 436


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© LOCKON CO.,LTD. All Rights Reserved.