【SWELLカスタマイズ】任意の場所へのスライダーを設置する

SWELLのテーマにて作成しているこのサイト。最初はデフォルトで使用していましたが、慣れていくうちにだんだんと「ああしたい」「こうしたい」の欲が出てきました。自分の思い描いたサイトにするにはやはり「カスタマイズ」に挑戦するしかないですね。
今回挑戦するには、スラーダーを任意の場所に設置する方法です。

SWELLのスライダーはトップページの一番上にしか設置出来ないようで、私としては、色んな所に設置したいとの思いから色々とググってみました。

SWELLを色々研究なさっているブロガーさんがたくさんいらっしゃるので、すぐに参考になるサイトをみつけました。
こちらです。

参考サイト:https://tecchan.jp/entry/200610-swiper/ 
(SWELLカスタマイズ】任意の場所へのスライダー(Swiper.js)の実装方法)

STEP
メディアライブラリに画像をアップしておきます

スライドしたい画像をあらかじめメディアライブラリにアップロードします。

STEP
カスタムHTMLブロックにスライダーのHTMLを書きます

カスタムHTMLブロックを使用して、スライダーのHTMLを書きます

STEP
Swiper基本設定のJavaScriptを書く

【SWELL】カスタムCSS & JSJSの部分に、下記の通りにSwiper基本設定のJavaScriptを書きます。
(参考サイトより抜粋)

以上です

上記サイトを参考にやってみました。が・・・うまくいきません・・・
この画像がスライドしてほしいのだが・・・
暫く研究してみます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

CAPTCHA

目次