お世話になっております。

商品詳細の商品画像スライドをカスタマイズしたいです。

デフォルトでは、フリックやマウスで画像を切り替えられますが、左右の矢印アイコンを表示して切り替えたり、PCサイズでもドットを表示したり、オートスクロールしたりカスタマイズしたいです。

default_frame.twigを見る限り、「slick」を使っていると思い、下記のようなオプションをjavascript管理に設定しましたが、反映されませんでした。

ご教授よろしくお願いします。




■javascript
$('.slide-item').slick({
autoplay: true,
autoplaySpeed: 3000,
dots: true,
arrows: true,
});


■商品詳細の該当部分

{% for ProductImage in Product.ProductImage %}
<div class="slide-item"><img src="{{ asset(ProductImage, 'save_image') }}"></div>
{% else %}
<div class="slide-item"><img src="{{ asset(''|no_image_product, 'save_image') }}"/></div>
{% endfor %}




▼テンプレート
[EC-CUBE4]新規インストール
[レンタルサーバ]エックスサーバー
[OS]WIN10
[PHP]7.4.13
[データベース]MySQL 5.7.30
[WEBサーバ]Apache
[ブラウザ]FireFox、Chrome、safari
[導入プラグインの有無]関連商品プラグイン、おすすめ商品管理プラグイン、商品レビュー管理プラグイン
[カスタマイズの有無]特になし