人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

1419606723
●拡大する

●質問者: kaji0245
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

1 ● a-kuma3
●100ポイント ベストアンサー

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


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

a-kuma3さんのコメント
回答に追記しました。

kaji0245さんのコメント
再度適用してみましたが、反映されませんでした。 ソース表示すると以下のように表示されておりました。 >|| <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さんのコメント
うーん、おかしいなあ... [http://themes.svn.wordpress.org/parallax/1.0.35/cyberchimps/lib/bootstrap/js/bootstrap.min.js:title=cyberchimps/lib/bootstrap/js/bootstrap.min.js] の 234行目 >|javascript| b.fn.carousel.defaults = {interval: 5000, pause: "hover"}; ||< の 5000 を、10000 に変えてみたらどうなります? >|javascript| b.fn.carousel.defaults = {interval: 10000, pause: "hover"}; ||<

kaji0245さんのコメント
ビンゴです!こちらでOKでした。 ありがとうございます、助かりました!

a-kuma3さんのコメント
なんか納得いかなかったので、デモページ https://wp-themes.com/parallax/ をローカルに保存して試してみました。 data-interval 属性は効かなかったのですが、carousel メソッドにオプションを指定する方は有効でした。 >|html| <script type="text/javascript"> jQuery(document).ready(function () { // Initialize the slider. jQuery('.carousel').carousel({interval: 200}); }); </script> ||< data-interval 属性が効かないのは、bootstrap が 3 ではなくて 2 のせいかもしれません。 >|javascript| /* =================================================== * 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
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ