- このトピックには4件の返信、2人の参加者があり、最後に
により3年、 2ヶ月前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】15.7.0
【お使いの Snow Monkey Blocks のバージョン】12.3.1
【お使いの Snow Monkey Editor のバージョン】6.0.1
【お使いのブラウザ】Chrome
【当該サイトのURL】ローカル環境のため無し### 実現したいこと
vegas background slideshowというスライダーを実装したいのですが、CDNの読み込みとjsファイルの読み込みがよくわかりません。
### 発生している問題
### 試したこと
まだまだ経験が浅いので、理論がわからずにフォーラムを見ながらコピペをしている形なので、全然違ったら大変すみません。
swiper.jsの読み込みを見ながら参考にしたのですが、違うでしょうか？
add_action( 'wp_enqueue_scripts', function() { /** * vegas.js読み込み */ wp_enqueue_script( 'vagas_js', 'https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.js' ); /** * js読み込み */ wp_enqueue_script( 'my-snow-monkey-js', MY_SNOW_MONKEY_URL . '/scripts/main.js', [ 'jquery', 'swiper_js', Framework\Helper::get_main_script_handle() ], filemtime(MY_SNOW_MONKEY_PATH . '/scripts/main.js'), true ); } );いつもお世話になりっぱなしですみません。
よろしくお願いいたします。
いいねをした人: 居ません藤田裕貴さん、こんばんは。
以前、静的なサイトに組み込んだことがありましたので、それをもとにデモサイトに実装してみました。
参考になれば幸いです。my-snow-monkey.phpに以下を記述
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() ) { // トップページのみでvegasを使用する場合 wp_enqueue_style( 'vagas_style', // vegas用のCSS 'https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.css', [], ); wp_enqueue_script( 'vagas', // vegas 'https://cdnjs.cloudflare.com/ajax/libs/vegas/2.5.4/vegas.min.js', ['jquery'], ); wp_enqueue_script( 'vagas_function', // vegasの設定 MY_SNOW_MONKEY_URL . '/scripts/main.js', ['vagas'], filemtime( MY_SNOW_MONKEY_PATH . '/scripts/main.js' ), true ); } });wp_enqueue_scriptsについては、こちらの記事がくわしく書かれていると思います。my-snow-monkey/scripts/main.jsには以下を記述jQuery(function($){ $('#vegas_slider').vegas({ timer: false, overlay: true, transitionDuration: 2000, delay: 6000, animation: 'kenburns', animationDuration: 6000, shuffle: true, transition: 'flash', slides: [ // 画像は環境に合わせてください { src: 'https://example.com/wp-content/plugins/my-snow-monkey/img/img001.jpg' }, { src: 'https://example.com/wp-content/plugins/my-snow-monkey/img/img002.jpg' }, { src: 'https://example.com/wp-content/plugins/my-snow-monkey/img/img003.jpg' } ] }); });いいねをした人:
GONSYさん
ありがとうございます！
vegasスライダーを読み込むことできました！
情報もありがとうございます。助かります。
少しずつ理解していきたいと思います。
スライダーは読み込めたんですが、今度は画像幅が上手くいきません…
#sliderに対して、width:100%;にすると↓
width: 100vw;にすると↓
これはどうしたら画面幅いっぱいになるでしょうか？
度々すみません。
よろしくお願いいたします。
いいねをした人: 居ませんこれはどうしたら画面幅いっぱいになるでしょうか？
自分のデモの場合は、
<div id="slider"></div>をカスタムHTMLブロックで設置して、そのブロックを【グループ化】してから、【全幅】にしています。
お試しください。いいねをした人:
- トピック「vegas background slideshowの実装について」には新しい返信をつけることはできません。