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

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

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

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

Q&A

解決済

2回答

14682閲覧

swiper.jsで、ページネーションとは別に、任意の番号のスライダーを表示させるリンクをつけたい

isobel

総合スコア18

JavaScript

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

0グッド

1クリップ

投稿2017/05/29 02:23

編集2017/06/01 09:25

###前提・実現したいこと
swiper.jsを利用して、月ごとのカレンダーを表示させています。
「●」…の連続で表示されるページネーションとは別に、「1月」「2月」…のようなリンクを作成し、それぞれの月に該当するスライダー内のコンテンツを表示させるようにしたいのですが…。
javascriptの知識があまりに乏しく、どこをどうすればよいのかわかりません。

###発生している問題・エラーメッセージ
「●」…の連続で表示されるページネーションをCSSで「1月」「2月」…のようにCSSで書き換える方法も考えましたが、うまくいきませんでしが。

エラーメッセージ

###該当のソースコード
スライダー内の基本的な構成は以下のようになっています。

<!-- スライダー全体 --> <div class="swiper-container"> <!-- スライダーに含まれるコンテンツ全体 --> <div class="swiper-wrapper"> <!-- スライダーの中身① --> <div class="swiper-slide"> <section id="2017_janu"> 1月のカレンダー </section> </div> <!-- スライダーの中身② --> <div class="swiper-slide"> <section id="2017_feb"> 2月のカレンダー </section> </div> </div> <!-- ページネーション --> <div class="swiper-pagination"></div> </div>
<!-- javascript部分 --> <script> var swiper = new Swiper('.swiper-container', { nextButton: '.swiper-button-next , .link_next , .next_allow', prevButton: '.swiper-button-prev , .link_prev , .prev_allow', initialSlide: new Date().getMonth(), }); </scirpt> <!-- javascript部分終わり --> ###補足情報 <a href="#janu">1月のカレンダー</a> のようなリンクを作って、スライダーの中身を指定して表示させることはできますでしょうか? わかりにくい質問で恐縮ですが、ご教授頂けますと幸いです。 どうぞよろしくお願い致します。

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

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

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

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

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

kei344

2017/05/29 02:43

質問文のコードはコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
isobel

2017/05/29 10:04

<code>を使えばよかったのですね、失礼いたしました…。先ほど質問文を編集致しました!以後注意致します、ありがとうございました。
guest

回答2

0

メソッドがあるのでそれを利用すればよいと思います。

JavaScript

1var index = 1; 2var mySwiper = new Swiper('.swiper-container', { 3 speed: 400, 4 spaceBetween: 100 5}); 6mySwiper.slideNext(); 7mySwiper.slidePrev(); 8mySwiper.slideTo( index );

【Swiper API】
http://idangero.us/swiper/api/

投稿2017/05/29 14:41

kei344

総合スコア69364

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

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

isobel

2017/06/01 00:28

ありがとうございます。 APIを確認しました。 mySwiper.slideTo( index );を使うことで、任意の番号のスライダーを取得できるのですね。 非常に初歩的な質問で恐縮なのですが、これを利用して、実際にどうリンクを作成すればいいのかがわかりません…。 HTML部分を含めて、ご教授頂けますと幸いです。 どうぞ宜しくお願い致します。
kei344

2017/06/01 01:07

> 実際にどうリンクを作成すればいいのかがわかりません クリックするHTML要素を書いて、その要素にクリックイベントを付ければ良いです。 <span class="swiper-mypagination" data-month="1">1月</span> これを1年分作って、 $( document ).on( 'click', '.swiper-mypagination', function() { mySwiper.slideTo( ( $( this ).attr( 'data-month' ) - 1 ) ); } ); こんなかんじでクリックイベントを割り当てる。
m.ts10806

2017/06/01 01:18 編集

僕の方でも勝手にご提示の方法利用して書いてしまいましたが、ごちゃごちゃこねくり回してしまったので、kei344さんの書き方のほうがシンプルで分かりやすそうですね。
guest

0

ベストアンサー

※あくまでswiperの機能を使った実現方法です。

下記のようなオプションを加えてみてください。

JavaScript

1 pagination: '.swiper-pagination', 2 paginationClickable: true, 3 paginationType : 'bullets', 4 paginationBulletRender: function (swiper, index, className) { 5 return '<span class="' + className + '">' + (index + 1) + '月</span>'; 6 },

「月」と全角文字が入るため、見た目のところは多少調整する必要がありそうです。
ボタン感を出したかったりデザイン的な調整をしたい場合は任意のClass名をあたえて操作してください。

swiper.js使ってみたからそのオプションについて

ざっくりサンプル(kei344さん提示のやり方から)

Swiperの設定、HTML,JavaScript,CSSについては適宜、ご自分で調整してください。

HTML

1<div class="swiper-container"> 2 <div class="swiper-wrapper"> 3 <div class="swiper-slide"> 4 <section id="2017_01"> 5 1月のカレンダー 6 </section> 7 </div> 8 <div class="swiper-slide"> 9 <section id="2017_02"> 10 2月のカレンダー 11 </section> 12 </div> 13 </div> 14</div> 15<ul id="month_list"> 16 <li class="active"><a href="#!">1月</a></li> 17 <li><a href="#!">2月</a></li> 18</ul>

CSS

1#month_list li a{ 2 color:#ccc; 3} 4#month_list li.active a{ 5 color:#f00; 6}

JavaScript

1$(function(){ 2 var swiper = new Swiper('.swiper-container'); 3 4 $("#month_list li a").on('click',function(){ 5 $("#month_list li").removeClass("active");//activeを解除 6 var index = $("#month_list li").index($(this).parent()); //クリックしたaの親(li)のインデックスを取得 7 swiper.slideTo( index ); //指定のスライドを呼び出し 8 $(this).parent().addClass("active");//指定月をactiveに 9 }); 10});

なぜこれで実現可能なのかざっくり解説:

このSwiperは上のスライドから0,1,2...とスライドに連番がつけられています。○を押したときに対応するスライドを呼び出せるのも裏ではslideTo( index )が動作しているものと思われます。
そのため、1月,2月~~のように連番で出来るものについてはリストタグなど要素を順番に並べるものを利用することで「何番目をクリックした」というのがとりやすくなります。
プログラム言語において連番の開始は基本的に0です。そのため、スライドとの連動が容易に可能となっています。
もちろん、divでも何でも同タグ(または同要素)が同階層に並んでいれば何番目かとるのは可能です。

jQueryでクリックされた要素が何番目か取得する
jqueryで特定の要素の順番を取得する方法

投稿2017/05/29 04:28

編集2017/06/01 01:41
m.ts10806

総合スコア80765

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

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

isobel

2017/05/29 10:36

早速の回答ありがとうございます! トライしてみます。 後ほどあらためて評価をうけさせて頂きます。 場合によっては追加質問させていただくかもしれません…。 どうぞよろしくお願い致します。
isobel

2017/06/01 00:32

リンク自体はうまく表示することができました! ありがとうございました。 一点、見た目をCSSで調整しようと思うのですが、「bullets」で作成した丸いページネーションと「1月」などの文字が、どうしても同じクラス内に入ってしまい、分離してスタイルを調整することができません…。 丸いページネーションを<span></span>で独立させ、その下に<div class="month_name">1月</div>などのように、独立させて月の名前を挿入することはできるのでしょうか…。 ややこしい質問で申し訳ありません。 可能であればご教授頂けますと幸いです。 どうぞよろしくお願い致します。
m.ts10806

2017/06/01 01:17 編集

ん~~自動で挿入されるCSSクラスを同名のクラスを自分で定義して指定要素の設定を上書きしていけばいい感じにできそうな気はするんですけどね・・。 Chromeのツールで色々いじったらまあまあ見れるようにはなってきました。(角丸をなしにしたりactiveスライドのアイコンを指定したり) おそらく独立させようと思ったらkei344さんのやり方がよさそうです。 ざっくり作ってみますので少々お待ちください。
isobel

2017/06/01 00:52

本当にありがとうございます! どうぞ宜しくお願い致します。
kei344

2017/06/01 01:33

To: matsu1006さん 「active」に対応するならswiper側のイベントとったほうがいいと思いますよ。 swiper.on( 'slideChangeStart', function( mySwiper ) { console.log( mySwiper.activeIndex ); } );
m.ts10806

2017/06/01 01:42 編集

kei344さん 確かに! Swiper離れてごにょごにょ作りこんでしまってました。 ご指摘ありがとうございます。 isobelさん kei344さん提示の方法含めて色々とやってみてください。 オプションが多いので多少重めのカスタマイズにも発想次第で幾らでも対応できそうです。 僕が提示したのもあくまでひとつのやり方(少しSwiperから離れたけど)でしかありませんので。
isobel

2017/06/01 09:30

ありがとうございます! 無事にテキストリンクをつけることができました!! もう一点、本当に初歩的でお恥ずかしいのですが…。 質問文の中にコードを追記しましたが、 initialSlide: new Date().getMonth(), を使って、現在の月のカレンダーをデフォルト表示するようにしています。 ご教授頂いたリンクの、デフォルトでactiveに設定した番号を、このinitialSlideで取得した月と連動させることは可能でしょうか…。 つまり、現在は6月なので、initialSlideで6月のカレンダーがデフォルト表示されている。 その場合、<li>6月</li>の<li>に自動的に class="active"を付与する。 本当に何度も恐れ入りますが、よろしければご教授頂けますと幸いです。 どうぞよろしくお願い致します。
m.ts10806

2017/06/01 11:45

可能です。 new Date().getMonth()は「0を1月とした現在の月」が取得できるので、 $(function(){ //←これはDOM生成時の処理なのでHTMLを全て読み込んだあとに処理が走る の中に同じように月を取得しといて、あとはactive消して、該当番号のliにactiveつけて、ですね。 超ざっくりですが。。。。
isobel

2017/06/02 06:43

ありがとうございました。 私の知識ではうまくjavascriptを追記できなかったので、とりあえずご教授頂いた方法と、 paginationで生成される丸いページネーションを組み合わせて使おうと思います。 本当に助かりました、ありがとうございます。
m.ts10806

2017/06/02 06:49

了解です。またチャレンジしてみてください。 おおよそこちらの質問・回答で培った技術で実現が可能と思いますので。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問