サポート » プラグイン » スライダーについて

スライダーについて

  • hachikuma

    (@hachikuma)


    3年、 8ヶ月前

    スクロールでページがめくれるようなスライダーなどのプラグインを探しています。
    下記にようなサイトの感じです。
    http://www.haluta.jp/365/special/vol020/

    どなたかご存知であればお教えください。
    よろしくお願いします。

4件の返信を表示中 - 1 - 4件目 (全4件中)
  • ishitaka

    (@ishitaka)

    3年、 8ヶ月前

    こんにちは

    公式ディレクトリのプラグインをざっと探してみましたが見つかりませんでした。
    プラグインではないのですが、ほぼ同様の機能を jQuery スクリプトで作成してみました。試してみてはと思います。

    トピック投稿者 hachikuma

    (@hachikuma)

    3年、 8ヶ月前

    ishitakaさん、こちらの件もありがとうございます。
    jQuery スクリプトで見事な再現力ですね。
    是非使わせていただきたいです。

    後ほど試してみます！
    分からないことが出ましたらまた教えていただければ幸いです。
    よろしくお願いいたします。

    トピック投稿者 hachikuma

    (@hachikuma)

    3年、 8ヶ月前

    ishitakaさん、やってみましたが上手くいきませんでした。
    というか自分の知識不足で設置方法が間違えてるのだと思います。

    行ったことは、

    ・子テーマのフォルダにbookslider.cssを配置

    ・子テーマのフォルダにjsフォルダを作り、その中にbookslider.jsを配置

    ・該当ページ用のheader.phpの<head>～</head>の中に下記を記載

    <link rel='stylesheet' id='bookslider-css'  href='/wp-content/themes/sydney-child/bookslider.css' media='all' />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src='/wp-content/themes/sydney-child/js/bookslider.js?ver=5.4.2'></script>

    ・該当ページにご掲示されてるhtmlを記載。こちらはウィジェットでSiteOrigin Editorを使ってるのでそちらに記載

    ・スライドを実行するスクリプト。こちらがSiteOrigin Editorに記載するとエラーになるため、ご掲示されてるhtmlの直下に書けず。そこで、header.phpやfooter.phpのbody内に記載したりして試しましたがダメでした。

    以上の結果、該当ページに空欄の枠みたいなものは表示されましたが、富士山の画像などは出てこず。という状態です。
    初歩的な質問で申し訳ありませんが、どうぞよろしくお願いします。

    ishitaka

    (@ishitaka)

    3年、 8ヶ月前

    CSS と JS は、jQuery、bookslider.js と HTML の読み込み後に実行する必要があります。下記のようにするといいかと思います。

    子テーマの functions.php に、

    function bookslider_enqueue_scripts() {

	if ( ! is_page( 123 ) ) return;

	wp_enqueue_style( 'bookslider', get_stylesheet_directory_uri() . '/bookslider.css' );
	wp_enqueue_script( 'bookslider', get_stylesheet_directory_uri() . '/js/bookslider.js', array( 'jquery' ) );

	$script = <<<SCRIPT
jQuery(function($) {
  $("#bookslider-1").bookslider();
});
SCRIPT;

	wp_add_inline_script( 'bookslider', $script );
}
add_action( 'wp_enqueue_scripts', 'bookslider_enqueue_scripts' );

    コードの、is_page( 123 ) の条件は適当に変更してください。

    富士山の画像などは出てこず。という状態です。

    HTML の画像 (slide1.jpg) はご自身で用意した画像の URL に書き換えてください。

    • この返信は3年、 8ヶ月前にishitakaが編集しました。
4件の返信を表示中 - 1 - 4件目 (全4件中)
  • トピック「スライダーについて」には新たに返信することはできません。

表示