「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

TCDテーマPrecious:商品ページの自動スライドショーを停止する方法

Q.商品ページのスライドショーを停止したい

商品ページでは複数枚の商品画像を投稿した際に自動でスライドショーが設定されますが、これを停止して画像のクリックで表示を切り替える方法を教えてください。

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

編集するファイル:header.php
編集する箇所:

<?php
     if(is_single() && get_post_type() == 'product') {
      global $post;
      if(get_post_meta($post->ID,'product_image1',true)){
?>
<script type="text/javascript" src="<?php bloginfo('template_url');
?>/js/jquery.nivo.slider.pack.js<?php version_num(); ?>"></script>
<link rel="stylesheet" href="<?php bloginfo('template_url');
?>/js/nivo-slider.css<?php version_num(); ?>" type="text/css" />
<script type="text/javascript">
jQuery(window).on('load',function() {
 jQuery('#product_image_slider').nivoSlider({
  effect:'fade',
  animSpeed:500,
  pauseTime:6000,
  manualAdvance:true,
  directionNav:false,
  controlNav:true,
  controlNavThumbs:true,
  afterLoad: function(){ jQuery('#loader').fadeOut(500); }
 });
});
</script>

※ハイライト部分の「manualAdvance:true,」を追加します。

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

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

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