質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

4519閲覧

ポップアップで表示できるスライドショーライブラリ

tkshp

総合スコア174

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/01/22 10:28

編集2020/01/22 11:39

前提・実現したいこと

ポップアップで表示可能なカルーセルスライダーのプラグインを、JavaScriptかjQueryで探しているのですが、
実装したい要件全てを満たすスライダーが見つからなかったので、ご教示お願いします。
下記の要件を満たしたいと思っています。

・ポップアップ表示のカルーセルスライダー。画像の左右ボタンでスライドができる。 ・画像の下中央に、カルーセルスライダーでよくある、現在の画像参照位置を示す、横に並ぶ●ボタン。●ボタンクリックでもスライドできる。 ・できれば、モバイル対応可能。 ・できれば、●ボタンの下にサムネイル表示(ただし、このサムネイル表示はあってもなくてもどちらでもよい)。  オプション指定して、サムネイルありとなし、どっちが見栄えがいいか見比べて、サムネイルを付けるかどうか決めたい。

試したこと

まず、ポップアップ表示という条件で、そんなに多くのプラグインが見つかりませんでした。
そして探した中で、1番理想に近かったのが、lightgallery.jsDynamic Modeでした。
しかし、このDynamic Modeで、●ボタン表示の方法とサムネイルの表示ができるのか不明でした。
こちらに、オプションが書かれているのですが、該当するものが見つかりませんでした。
もしくは、他のプラグインで条件が満たせそうなものがあれば、そちらも教えていただきたいです。

補足情報(FW/ツールのバージョンなど)

jQuery
JavaScript

追記

よく見たら、lightgallery.jsはライセンスの商用利用が有料でした。
無料で商用利用できるものを探しています。
lightgallery.jsは諦めて、他のプラグインを探します。
何かよいものがあればご教示お願いします。

追記②

できれば●ボタンが欲しいなと思っていたのですが、なかなか見つからないので、●ボタン無しに妥協してもいいかなと思い始めました。
プラグインを見ても、それがポップアップ表示可能かどうかわからない、ポップアップ表示可能だったとしても、どうコーディングすればいいかわからない状態なので、ポップアップ表示の実装方法がわかるプラグインをご教示いただけたらと思います。
例えば、PhotoSwipeも有名みたいですが、これがポップアップ表示可能かどうかわからず、ポップ表示するにはどう実装すればよいかわからないという状態です

追記③

slick.jsで試してみたいと思います。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/01/22 10:39

フルスクラッチではなく該当するライブラリを探しているという 認識でよろしいですね? 普通にjQueryでちょこちょこっとできそうな気もしますが・・
tkshp

2020/01/22 10:45

はい、その認識でお願いします。 自分のスキルでは、自前で作るには、かなり時間がかかってしまうので、ライブラリで探しています。
tkshp

2020/01/23 06:02

ご指摘ありがとうございます。
guest

回答1

0

自己解決

slick.jsを使うことにしました。

さらに調べたところ、magnific-popupが1番簡単に実装できました。

投稿2020/01/23 06:02

編集2020/01/23 09:49
tkshp

総合スコア174

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問