バージョン選択

フォーラム

メニュー

オンライン状況

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

PR

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

サイト内検索

質問 > フロント機能 > slickを使用して商品画像を表示

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
himoto
投稿日時: 2018/2/1 17:57
対応状況: −−−
新米
登録日: 2018/1/24
居住地:
投稿: 3
slickを使用して商品画像を表示
------------------------------------------------------------------------------------------
[EC-CUBE] 3.0.13
[レンタルサーバ] さくらインターネット
[PHP] 7.1.11
[データベース] MySQL 5.5.54-log
[WEBサーバ] Apache/2.4.29

商品詳細ページにスクリプトを導入しましたが、下の画像をクリックすると、
上に表示される画像は次の画像になっております。
slick-dotsを一度多数の画像を表示すると、次のページの画像が表示されます。

slickを導入すると、slick-trackとslick-dotsのリンクに何か影響を生じるでしょうか?
解決方法はありますでしょうか?以下導入スクリプトになります:
<script>
$(function(){
$('.slick-dots').slick({
dots: true,
arrows: false,
});
});
</script>

どうぞよろしくお願いいたします。
------------------------------------------------------------------------------------------
468
投稿日時: 2018/2/8 11:12
対応状況: −−−
登録日: 2008/10/26
居住地:
投稿: 1144
Re: slickを使用して商品画像を表示
商品詳細ページのデザインがよく分からないのですが、
ECCUBE3の商品詳細ページの商品画像は元々slickが入っていなかったでしょうか?
(clsss属性="slides"に対して、slickが指定されているかと思います)

/src/Eccube/Resource/template/default/Product/detail.twig
$('.slides').slick({
        dots: true,
        arrows: false,
        speed: 300,
        customPaging: function(slider, i) {
            return '<button class="thumbnail">' + $(slider.$slides[i]).find('img').prop('outerHTML') + '</button>';
        }
    });


$('.slick-dots').slick()を記述する事で、2重にslickのイベントが適用されているのでは無いでしょうか?

slick-dotsにslickを指定する目的が分からないので何とも言えませんが、
デフォルトの商品画像とは、別に画像を追加されていたりするのでしょうか?


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

himoto
投稿日時: 2018/2/26 19:06
対応状況: −−−
新米
登録日: 2018/1/24
居住地:
投稿: 3
Re: slickを使用して商品画像を表示
ご回答ありがとうございます。仰る通りですね。
customPaging: function(slider, i) {
  return '<button class="thumbnail">' + $(slider.$slides[i]).find('img').prop('outerHTML') + '</button>'; 
}

これがslick-dotsの画像のコードですね。
$(slider.$slides[i])を$(slider.$slides[i+'slidesToShowの数字'])に変更すると、上下の画像の連携が正常に戻りましたが、プラスした数字ほとsliderの画像が消えました。

すみません、コーディングについてはど素人でございます...
return'...' の中で'slidesToShow'と'slidesToScroll'を加えて、一行五つの画像のsliderを作ることが出来ますでしょうか?
468
投稿日時: 2018/3/9 11:06
対応状況: −−−
登録日: 2008/10/26
居住地:
投稿: 1144
Re: slickを使用して商品画像を表示
返信が遅くなりました。
1行5つの画像のsliderとは、どの動きでしょうか?
5つの画像が同時に表示されているという状態でしょうか?

slidesToShow: 5,

の記述でスライダーに表示される画像の数を変更できますが、
そのイメージでよろしかったでしょうか?


----------------
株式会社シロハチ
■ECCUBE2系、3系構築カスタマイズご相談ください。
EC-CUBE3マニュアル
blog

himoto
投稿日時: 2018/4/3 18:46
対応状況: −−−
新米
登録日: 2018/1/24
居住地:
投稿: 3
Re: slickを使用して商品画像を表示
返信ありがとうございます。

slidesToShow: 5 のイメージであってます、

理想的には左側の写真部分をtab sliderにしたいです。
以下サンプルのリンクです。
https://www.jssor.com/demos/tab-slider.slider

多彩なエフェクトは必要ありません、
ただこのように商品写真をまとめたいです。

どれくらいのコーディング変更が必要でしょうか?
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ


 



ログイン


EC-CUBEペイメント

統計情報

総メンバー数は29,843名です
総投稿数は87,055件です

投稿数ランキング

1
seasoft
7331
2
AMUAMU
2712
3
nanasess
1754
4
yuh
1504
5
red
1171
6
468
1144
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
519
18
patapata
502
19
flealog
483
20 tonton 436


ネットショップの壺

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

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