[大野浩靖]

【お使いの Snow Monkey のバージョン】16.0.5
【お使いの Snow Monkey Blocks のバージョン】14.0.1
【お使いの Snow Monkey Editor のバージョン】7.0.0
【お使いのブラウザ】Chrome

【当該サイトのURL】ローカルのため無し

### 実現したいこと

vegas background slideshowというスライダーを実装したいのですが、CDNの読み込みとjsファイルの読み込みがよくわかりません。

### 発生している問題

### 試したこと

まだまだ経験が浅いので、理論がわからずにフォーラムを見ながらコードを書いているので全然違ったら申し訳ありません。

add_action(
‘wp_enqueue_scripts’,
function() {

wp_enqueue_style(
‘msm_style’,
MY_SNOW_MONKEY_URL . ‘/style.css’,
[],
filemtime( MY_SNOW_MONKEY_PATH . ‘/style.css’ )
);

if( is_front_page() ) {
wp_enqueue_style(
‘vagas_style’, //
‘https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.css’,
[],
);

wp_enqueue_script(
‘vagas_js’, // vegas
‘https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.js’,
[‘jquery’],
);

wp_enqueue_script(
‘vagas_function’,
MY_SNOW_MONKEY_URL . ‘/js/main.js’,
[‘vagas’],
filemtime( MY_SNOW_MONKEY_PATH . ‘/js/main.js’ ),
true
);
}

});

このように記述したのですが上手く作動しませんでした。修正箇所を教えてくれたら幸いです。よろしくお願いします。

♥ 0

いいねをした人: 居ません

[GONSY]

こんばんは。
このトピックをご覧になって試されていると思います。

vegas background slideshowの実装について

このトピックには4件の返信、2人の参加者があり、最後に藤田裕貴により5ヶ月前に更新されました。 5件の投稿を表…

snow-monkey.2inc.org

このように記述したのですが上手く作動しませんでした。修正箇所を教えてくれたら幸いです。よろしくお願いします。

動かない状態が掴めません。
ご提示のコードだけではスライドショーは表示されません。
CDNが読み込まれていないのか、ほかに読み込むべきコードが不足しているのか、コードの記述以外でおこなったことなどもできる限り詳細に書かれたほうが良いと思います。

【当該サイトのURL】ローカルのため無し

ローカルとのことですが、サイトを共有されたほうが確実です。

まだまだ経験が浅いので、理論がわからずにフォーラムを見ながらコードを書いているので全然違ったら申し訳ありません。

はじめはみんなそうです。どんどん聞きましょう！

♥ 2

いいねをした人:

[Olein_jp]

過去トピックの存在をあさらず配信ネタのために実験してしまったのでソースコードだけ置いておきます。供養させてください…。。

add_action(
	'wp_enqueue_scripts',
	function() {
		wp_enqueue_style(
			'vagas_css',
			'https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.css'
		);

		wp_enqueue_script(
			'vagas_js',
			'https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.js',
			['jquery'],
			null,
			true
		);

		wp_enqueue_script(
			'vagas_function',
			MY_SNOW_MONKEY_URL . '/js/main.js',
			['jquery'],
			filemtime( MY_SNOW_MONKEY_PATH . '/js/main.js' ),
			true
		);
	}
);

Vegas Background Slider を利用するために必要なソースコード（ js/main.js 含む）となりますので、別途スタイルなどは読み込んでくださいね。

ちなみに実験がてら書いた main.js のコードも供養させてください。

jQuery(function($){
  $(".vegas-background-demo").vegas({
    slides: [
      { src: "https://images.unsplash.com/photo-1511884642898-4c92249e20b6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" },
      { src: "https://images.unsplash.com/photo-1501785888041-af3ef285b470?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" },
      { src: "https://images.unsplash.com/photo-1434725039720-aaad6dd32dfe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1642&q=80" },
      { src: "https://images.unsplash.com/photo-1604537466573-5e94508fd243?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" }
    ]
  });
});

任意のセレクタを指定してあげれば実験にでも使えるかもしれません。画像はUnsplashに直リンクしているのでよろしくはないです。

以上、よかったら参考にしてみてください。（過去トピックあるかどうか先に探せばよかった…

♥ 4

いいねをした人:

[大野浩靖]

返信ありがとうございます。

アドバイス頂いたことを元になんとか作動することができました。

また、何かわからないことがあれば質問させていただくのでその時はよろしくお願いします

♥ 1

いいねをした人:

[投稿者]

投稿