現在、使用しているワープレのテーマのスライダーに、
タッチイベント(フリックでコンテンツをスライドさせる)を追加したいと考えています。
jsが詳しくないもので、どなたか教えていただけないでしょうか。
よろしくお願いいたします。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
何か調べた内容ややってみたことがあれば追記してください。
回答1件
0
ベストアンサー
初心者でsliderを実装したい方にはswiper.jsをオススメしています。
PC、スマホ共にタッチイベントが搭載されているので画像をはめ込むだけで実装できます。
以下からデモとソースコードが見れますので確認してみてください。
http://idangero.us/swiper/demos/#.Wa5xgdNJaRs
投稿2017/09/05 09:45
総合スコア274
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/06 04:16
アドバイスいただきありがとうございます。
下記のテーマをいじっているのですが、
すでにスライダーのjsが実装されている場合、
タッチイベントを追加する方法が知りたいです。
http://demo.themefreesia.com/freesia-empire
割と、検索もして、jsのコードを見たりしましたが、
3時間以上かかってしまい、
解決の糸口を探しています。
Higemuraさんだったら、どのようにご対応されますか?
お手数ではございますが、教えていただきたく存じます。
2017/09/06 06:06 編集
こちらのsliderの実装はJquery cycleプラグインというものを使用しています。
http://shanabrian.com/web/library/cycle.php
実際のコード
HTMLの読み込み:
<script type="text/javascript" src="http://demo.themefreesia.com/freesia-empire/wp-content/themes/freesia-empire/js/freesiaempire-slider-setting.js?ver=4.8.1"></script>
JS(cycleプラグイン本体):
http://demo.themefreesia.com/freesia-empire/wp-content/themes/freesia-empire/js/jquery.cycle.all.js?ver=3.0.3
JS(実際の動作):
http://demo.themefreesia.com/freesia-empire/wp-content/themes/freesia-empire/js/freesiaempire-slider-setting.js?ver=4.8.1
自分が調べた限りこのプラグインを使用はタッチイベント対応していないみたいです。
(もしかしたらあるかもしれません。cycle2という新しいバージョンもあるみたいですがこちらもタッチイベントはありませんでした)
なので「cycleプラグイン本体」に拡張機能を自分で追加しなくてはならなくなります。
タッチイベントには少なく見積もって3種類ありますのでそれぞれ拡張していかなくてはなりません。
https://app.codegrid.net/entry/touch-mouse
その工数を考えると自分でjsを書いて好きな動きにするか、swiper.jsにたいなタッチイベントがデフォルトでついているプラグインに切り替えることをオススメします。
(プラグインを読み込み、phpに記述してあるslider部分を書き換えるだけで済みます)
2017/09/06 08:42
ご回答いただきありがとうございます。
> 「cycleプラグイン本体」に拡張機能を自分で追加
そうなんですね、、
jsが弱くて、もしかしたら、cssのように、
タッチイベントのコードを追加すれば、
今、使われているプラグインにタッチイベントが追加できるのかなと
淡い期待をしておりました、、
> 自分でjsを書いて好きな動きにする
つまり、今、テーマで使用されているプラグインは使わずに、
一からjsファイルを作るという事ですね。
> プラグインを読み込み、phpに記述してあるslider部分を書き換えるだけで済みます
swiper jsは、凄いかっこいいですね。
cycleプラグインの読み込まないようにし、
代わりに、swiper.jsを読み込む。
さらに、swiper.js 用のcssも読み込む。
そのあと、htmlのクラス名を変えるといったイメージで大丈夫でしょうか。
2017/09/06 09:46
> 「cycleプラグイン本体」に拡張機能を自分で追加
これはプラグインの構造を確認しながらタッチイベントを追記していかなくてはいけないので、
だいぶしんどいと思いました。。
> プラグインを読み込み、phpに記述してあるslider部分を書き換えるだけで済みます
今の現状だとそれが実現しやすいと思います!
実際は使いやすいプラグインで大丈夫です。
https://liginc.co.jp/web/js/jquery/158379
> cycleプラグインの読み込まないようにし、
はい!使用しないなら以下の記述は削除して大丈夫です。
<script type="text/javascript" src="http://demo.themefreesia.com/freesia-empire/wp-content/themes/freesia-empire/js/freesiaempire-slider-setting.js?ver=4.8.1"></script>
> 代わりに、swiper.jsを読み込む。
そうですね、jsファイルを読み込んでください。
> さらに、swiper.js 用のcssも読み込む。
cssを自分で追記することも可能ですが、わからなかったら読み込んでおいたほうがいいです。
(読み込んだ後に別のcssで上書きなどすればデザイン変更可能です。)
> そのあと、htmlのクラス名を変えるといったイメージで大丈夫でしょうか。
基本的にはそうですが、タグの入れ子の構造などがあるので必要な箇所にタグを入れてください。
その中にimgなど入れてください。
以下のdemoにソースコードが書いてあるので、実現したい動きのものを参考にしてみてください。
http://idangero.us/swiper/demos/#.Wa_DztNJaRs
2017/09/12 06:24
返信が遅くなり申し訳ありません。。
ご丁寧に説明いただきありがとうございます!
これから試してみたいと思います。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。