バージョン選択

フォーラム

メニュー

オンライン状況

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

サイト内検索

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

フロント機能

新規スレッドを追加する

スレッド表示 | 古いものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
hi-ro
投稿日時: 2018/7/5 11:52
対応状況: −−−
半人前
登録日: 2018/3/23
居住地:
投稿: 24
Re: トップページスライドショーの左右移動ボタン
matchbou様

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

非常に助かりました。

ありがとうございました。
matchbou
投稿日時: 2018/7/5 11:38
対応状況: −−−
一人前
登録日: 2018/3/19
居住地:
投稿: 130
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:14
対応状況: −−−
半人前
登録日: 2018/3/23
居住地:
投稿: 24
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 10:55
対応状況: −−−
一人前
登録日: 2018/3/19
居住地:
投稿: 130
Re: トップページスライドショーの左右移動ボタン
ファイルはtemplate\default\index.twigとなりますが、
探すより管理画面で直すのが一番早いかと。
コンテンツ管理->ページ管理->TOPページの編集ですね。


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

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

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

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

{% block javascript %}
<script>
$(function(){
$('.main_visual').slick({
dots: true,
arrows: false,
autoplay: true,
speed: 400
});
});
</script>
{% endblock %}
スレッド表示 | 古いものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBE公式 Amazon Payプラグイン

統計情報

総メンバー数は88,820名です
総投稿数は109,982件です

投稿数ランキング

1
seasoft
7367
2
468
3217
3
AMUAMU
2712
4
nanasess
2313
5
umebius
2085
6
yuh
1819
7
h_tanaka
1646
8
red
1570
9
mcontact
1290
10
tsuji
958
11
fukap
907
12
shutta
835
13
tao_s
799
14 ramrun 789
15 karin 689
16 sumida 641
17
homan
633
18 DELIGHT 572
19
patapata
502
20
flealog
485


ネットショップの壺

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

Copyright© EC-CUBE CO.,LTD. All Rights Reserved.