採用サイト制作に最適なWordPressテーマ「ISSUE」の機能概要

ワードプレステーマ別

TCDテーマPrecious:商品詳細ページスライダーのエフェクト・切り替えスピードを変更する方法

Q.商品詳細ページスライダーの切り替えエフェクト・スピードを変更したい

A.下記のphpファイルの該当箇所を編集します

1. 切り替えエフェクトを変更する

編集するファイル:header.php
編集する箇所:102行目付近

jQuery('#product_image_slider').nivoSlider({
  //effect:'sliceDown',
 });

 ↓ コメントアウト「//」を外し、「sliceDown」部分を変更してください。

jQuery('#product_image_slider').nivoSlider({
  effect:'sliceDown',
 });

※設定できるエフェクト(sliceDown部分)は下記の記事をご参照くださいませ。(外部サイト)
Nivo Sliderの使い方

 

2. 切り替えスピードを変更する

編集するファイル:header.php
編集する箇所:103行目付近

jQuery('#product_image_slider').nivoSlider({
  //effect:'sliceDown',
  animSpeed:500,
  pauseTime:5000,
 });

    ↓

jQuery('#product_image_slider').nivoSlider({
  effect:'sliceDown',
  animSpeed:●,
  pauseTime:〇,
 });

※●は「アニメーションの速度」、〇は「画像の停止時間」です。任意の数値(ミリ秒)に変更してください。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事