id:kaji0245
ポイントあり100ptベストアンサーあり
ウェブ制作

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

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

回答の条件
  • 1人1回まで
  • 登録：
  • 終了：2014/12/27 17:08:38
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ベストアンサー

id:a-kuma3 No.1

回答回数4974ベストアンサー獲得回数2154

ポイント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 を修正した後に、ブラウザで表示して、ブラウザの機能でページのソースを表示したときに、その修正は反映されているんでしょうか？

他4件のコメントを見る
id:kaji0245

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

2014/12/27 17:08:03
id:a-kuma3

なんか納得いかなかったので、デモページ 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

2014/12/27 17:46:53

コメント（6件)

  • id:rouge_2008
    rouge_2008 2014/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

    ------------------------------------------------------
  • id:rouge_2008
    rouge_2008 2014/12/28 11:55:15
    確認してみましたが、「data-interval」の方はなぜか動作しません・・・

    ちなみにテーマは公式からのダウンロードです。

    ・Parallax
    https://wordpress.org/themes/parallax
  • id:a-kuma3
    a-kuma3 2014/12/28 13:22:08
    ＞確認してみましたが、「data-interval」の方はなぜか動作しません・・・
    cyberchimps/lib/bootstrap/js/bootstrap.js に、data-interval を読んでるらしきコードが無いんですよね。
    手元に Bootstrap 3.0.2 があるんですが、そこにも data-interval を読んでるらしきコードが無い。

    うーん...
  • id:a-kuma3
    a-kuma3 2014/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
  • id:a-kuma3
    a-kuma3 2014/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 が有効になる。


    あー、すっきり　:-)
  • id:rouge_2008
    rouge_2008 2014/12/28 19:29:16
    「.data()」が関係ありそうだなとは思ったんですが、v2系にもあるのに動作しないし、コードの意味もさっぱり分からないのでお手上げでした・・・

    v2.2.2とv2.3.2のみ確認しましたが、「$this.data()」をv3.0.3のように「options」にそのまま入れてみたら無事に動作しました。
    おかげ様で私もすっきりです。(コードの理解はまだまだです・・・)

この質問への反応（ブックマークコメント）

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

回答リクエストを送信したユーザーはいません
ユーザー登録をして使いはじめる!無料
すでに登録されている方はこちらからログイン
この質問に含まれるキーワード
知りたいことを検索してみよう
▲ページトップへ