kaji0245回答ポイント 100ptウォッチ 1

wordpressのparallaxテーマについて教えて下さい。

画像スライダーの間隔（秒数）を変更したいのですが設定箇所を教えて下さい。数ページにて「duration」記述を探したのですが見つかりませんでした。

• はてなアカウントでログイン
• 無料ユーザー登録

ベストアンサー

• a-kuma32014/12/27 13:12:16

  満足100pt

  スライダーの部分には、jCarousel というライブラリが使われているようです。
  http://themes.svn.wordpress.org/parallax/1.0.35/cyberchimps/lib/js/jquery.jcarousel.js
  
  本家のサイトがこちら。
  http://sorgalla.com/jcarousel/
  
  このライブラリのプラグインにAutoscroll Pluginというのがあって、interval というオプションで時間間隔を変更できそうです。
  http://sorgalla.com/jcarousel/docs/plugins/autoscroll/reference/configuration.html
  
  jCarousel の初期化をやっているのは elements/slider-lite.php の末尾の方です。

      <script type="text/javascript">
          jQuery(document).ready(function () {
  
              // Initialize the slider.
              jQuery('.carousel').carousel();
          });
      </script>
              
  <?php
  }
  
  ?>
  

  ここを、以下のように書き換えてあげれば良いんじゃないかと思います。

      <script type="text/javascript">
          jQuery(document).ready(function () {
  
              // Initialize the slider.
              jQuery('.carousel').carousel({
                  interval: 10000     /* 10秒間隔 */
              });
          });
      </script>
              
  <?php
  }
  
  ?>
  

  
  
  
  

  ---

  追記です。
  ごめんなさい、使われているのは Bootstrap の carousel みたいです。
  
  http://bootstrapbay.com/blog/bootstrap-3-carousel-tutorial/
  でも、carousel メソッドのオプション指定は、interval のはずなんですけどね。
  data-interval 属性で指定してみたら、どうなりますか？
  
  http://themes.svn.wordpress.org/parallax/1.0.35/elements/slider-lite.php

      <div class="row-fluid">
      <div id="slider_lite" class="carousel slide">
          <div class="carousel-inner">
              <?php foreach ($slides as $slide): ?>
              <?php if ($slide['img'] != ''): ?>
  

  の部分を

      <div class="row-fluid">
      <div id="slider_lite" class="carousel slide" data-interval="10000">
          <div class="carousel-inner">
              <?php foreach ($slides as $slide): ?>
              <?php if ($slide['img'] != ''): ?>
  

  としてみたら、どうなりますか？
  
  
  ちなみに、elements/slider-lite.php を修正した後に、ブラウザで表示して、ブラウザの機能でページのソースを表示したときに、その修正は反映されているんでしょうか？

  スター

  • 

    6件のコメントを見る

  • kaji0245 2014/12/27 13:37:41

    適用してみましたが反映されませんでした。
    10000を変えてみても変化なしです。

    スター

  • a-kuma3 2014/12/27 15:00:02

    回答に追記しました。

    スター

  • kaji0245 2014/12/27 15:18:51

    再度適用してみましたが、反映されませんでした。
    ソース表示すると以下のように表示されておりました。

    <div class="container-full-width" id="slider_lite_section">
    					<div class="container">
    						<div class="container-fluid">
    								<div class="row-fluid">
    	<div id="slider_lite" class="carousel slide" data-interval="10000">
    		<div class="carousel-inner">
    												<div class="active item">
    									<a href="http://www.abc.com/beginner/">
    						<img src="http://www.abc.com/wp-content/uploads/2014/12/top_003.jpg" alt="Slider"/>
    					</a>
    				</div>
    

    スター

  • a-kuma3 2014/12/27 16:40:42

    うーん、おかしいなあ...
    cyberchimps/lib/bootstrap/js/bootstrap.min.js の 234行目

        b.fn.carousel.defaults = {interval: 5000, pause: "hover"};
    

    の 5000 を、10000 に変えてみたらどうなります？

        b.fn.carousel.defaults = {interval: 10000, pause: "hover"};
    

    スター

  • kaji0245 2014/12/27 17:08:03

    ビンゴです！こちらでOKでした。
    ありがとうございます、助かりました！

    スター

  • a-kuma3 2014/12/27 17:46:53

    なんか納得いかなかったので、デモページ https://wp-themes.com/parallax/ をローカルに保存して試してみました。
    data-interval 属性は効かなかったのですが、carousel メソッドにオプションを指定する方は有効でした。

        <script type="text/javascript">
            jQuery(document).ready(function () {
    
                // Initialize the slider.
                jQuery('.carousel').carousel({interval: 200});
            });
        </script>
    

    data-interval 属性が効かないのは、bootstrap が 3 ではなくて 2 のせいかもしれません。

    /* ===================================================
     * bootstrap-transition.js v2.2.2
     * http://twitter.github.com/bootstrap/javascript.html#transitions
     * ===================================================
     * Copyright 2012 Twitter, Inc.
    

    http://php-fan.org/sample_code_demo/bootstrap-js.html#carousel

    スター

その他の回答

この質問へのコメント

• rouge_20082014/12/28 11:42:00
  気になったので少し調べてみました。
  「jquery.jcarousel.min.js」と「bootstrap.min.js」内の「bootstrap-carousel.js」の記述がバッティングしているのが原因のようです。(※先に読み込まれる「jquery.jcarousel.min.js」が呼ばれていて、「bootstrap-carousel.js」が正常に動作しない？設定変更は反映されないのに、初期状態で動作しているのが不思議です・・・)
  
  
  対策：
  「wp-content/themes/parallax/cyberchimps/functions.php」の59行目を次のようにコメントアウトして無効にします。
  
  // Load library for jcarousel
  //wp_enqueue_script( 'jcarousel', $js_path . 'jquery.jcarousel.min.js', array( 'jquery' ), '1.0' );
  
  上記の対策によって、a-kuma3さんの回答にあるどちらの方法(※「carousel()」へのオプション指定 or HTMLへの「data-interval」のようなdata attributes追加)でも設定変更が可能になると思います。
  
  
  ※2系でもdata attributesによるオプション指定は可能なようです。(以下はv2.3.2のドキュメントですが、v2.2.2同梱ドキュメントにも同じ記述がありました。)
  
  ・Javascript · Bootstrap
  http://getbootstrap.com/2.3.2/javascript.html#carousel
  
  
  ※リリースノートにはv1.4.0で追加とありますが、ここで追加？
  
  ・Releases · twbs/bootstrap · GitHub
  https://github.com/twbs/bootstrap/releases
  ------------------------------------------------------
  v1.4.0
  ...
  ・Added more data attribute controls to our plugins
  
  ------------------------------------------------------
• rouge_20082014/12/28 11:55:15
  確認してみましたが、「data-interval」の方はなぜか動作しません・・・
  
  ちなみにテーマは公式からのダウンロードです。
  
  ・Parallax
  https://wordpress.org/themes/parallax
• a-kuma32014/12/28 13:22:08
  ＞確認してみましたが、「data-interval」の方はなぜか動作しません・・・
  cyberchimps/lib/bootstrap/js/bootstrap.js に、data-interval を読んでるらしきコードが無いんですよね。
  手元に Bootstrap 3.0.2 があるんですが、そこにも data-interval を読んでるらしきコードが無い。
  
  うーん...
  
• a-kuma32014/12/28 17:00:12
  jQuery のバージョンと、Bootstrap のバージョンの組み合わせが良くないんだと思います。
  
  Parallax テーマに含まれているものは、jQuery v1.11.1 + Bootstrap v2.2.2 のようです。
  この組み合わせだと、Carousel の簡単なサンプルすら data-interval 属性が効きません。
  
  同じコードを jQuery v1.11.1 + Bootstrap v3.0.3 だと、data-interval 属性の指定が効きます。
  
  jquery-migrate.js に期待してるんでしょうが、それがきちんと動いていないのかな。
  Bootstrap v2.2.2 のデモページを見ると、jQuery v1.8.1 を使っているのですが、その組み合わせでも data-interval 属性が効きません。
  http://bootstrapdocs.com/v2.2.2/docs/examples/carousel.html
  
  
  data-interval を読み込むところが明示的に書かれていないのは、jQuery の .data() メソッドが data- で始まる属性を取り込んでくれるからなんですね（知らんかった）。
  http://api.jquery.com/data/#data
  
• a-kuma32014/12/28 17:37:06
  違う。
  組み合わせじゃなくて、Bootstrap のバージョンだ。
  
  Bootstrap v2.2.2
  >>
  　　/* CAROUSEL PLUGIN DEFINITION
  　　 * ========================== */
  
  　　var old = $.fn.carousel
  
  　　$.fn.carousel = function (option) {
  　　　　return this.each(function () {
  　　　　　　var $this = $(this)
  　　　　　　　　, data = $this.data('carousel')
  　　　　　　　　, options = $.extend({}, $.fn.carousel.defaults, typeof option == 'object' && option)
  　　　　　　　　, action = typeof option == 'string' ? option : options.slide
  <<
  
  Bootstrap v3.0.3
  >>
  
  // CAROUSEL PLUGIN DEFINITION
  // ==========================
  
  var old = $.fn.carousel
  
  $.fn.carousel = function (option) {
  return this.each(function () {
  var $this = $(this)
  var data = $this.data('bs.carousel')
  var options = $.extend({}, Carousel.DEFAULTS, $this.data(), typeof option == 'object' && option)
  var action = typeof option == 'string' ? option : options.slide
  <<
  
  v2.2.2 では、デフォルトと carousel メソッドのパラメータで jQuery.extends() してるだけ。
  v3.0.3 では、$(this).data() も jQuery.extends() の中に入ってる。
  だから、data-interval が有効になる。
  
  
  あー、すっきり　:-)
  
• rouge_20082014/12/28 19:29:16
  「.data()」が関係ありそうだなとは思ったんですが、v2系にもあるのに動作しないし、コードの意味もさっぱり分からないのでお手上げでした・・・
  
  v2.2.2とv2.3.2のみ確認しましたが、「$this.data()」をv3.0.3のように「options」にそのまま入れてみたら無事に動作しました。
  おかげ様で私もすっきりです。(コードの理解はまだまだです・・・)

質問の情報

登録日時

2014-12-27 00:12:03

終了日時

2014-12-27 17:08:38

回答条件

1人1回まで

この質問のカテゴリ

• ウェブ制作

この質問に含まれるキーワード

人気の質問

• この英文どうなってますか？ The boy seemed to be waiting for his mother to come.（その少年は母親が来…匿名質問者112日前
• 不定詞の形容詞的用法らしいんですけど、副詞的用法と書いたら✖️ですか？ I want to buy a book to read …匿名質問者112日前
• 日向陽葵という○V女優が好きなのですが似ている○V女優はいますか匿名質問者21時間前
• 共通テストで使われるプログラミング言語は共通テスト特有の言語と聞いたのですが、受験勉強で身につけたプ…匿名質問者121時間前
• 内定してほしいポケモンはいますか？匿名質問者21時間前

メニュー

• 質問一覧
• カテゴリ一覧
• 無料ユーザー登録
• 人力検索はてなトップ

PC版

• お問い合わせ
• ヘルプ
• お知らせ
• はてなトップ