Swiperで途中のスライドへ直接リンクを貼る

Question

前提・実現したいこと

swiperを利用し、画像+テキストのボックスをスライドさせるコンテンツスライダーを作りました。

例として下記の3つがスライドするページで、

<div class="swiper-slide" id="#no1">コンテンツ1</div> <div class="swiper-slide" id="#no2">コンテンツ2</div> <div class="swiper-slide" id="#no3">コンテンツ3</div>

ページAからアクセスした場合#no1から、
ページBからアクセスした場合は#no2からスライドが始まるという仕様にしたいのです。

スライダーを作るまではなんとか出来たのですが、途中へリンクを貼る方法が解りませんでした。

どなたかご教授願えませんでしょうか。

Answer 1

設定で「Hash Navigation」を使えば出来ると思います。

【Swiper API】
http://idangero.us/swiper/api/#hash-navigation

Hash Navigation
Hash navigation is intended to have a link to specific slide that allows to load page with specific slide opened.

To make it work, you need to enable it by passing hashNavigation:true parameter and adding slides hashes in data-hash attribute:

【Swiper demo】
http://idangero.us/swiper/demos/330-hash-navigation.html#slide3

Comments

[neri]

ご回答ありがとうございます。
まさにこれを知りたかったのです。
早速試してみます。

[neri]

確認したところ動作いたしました。
お二人ともご回答ありがとうございました！

Answer 2

恐らく直接リンクを貼る、ということは難しいです。

リンクとしてクエリパラメータ等を付与して、カルーセルを表示するページ側でswiperの初期化時にそのパラメータを見て初期表示するスライドを変えるというような方法であれば可能だと思います。

回答不足でしたらコード追記致します。

Comments

[isoppp]

swiperがサポートしていたようですのでkei344さんの回答を参照ください！

[neri]

ご回答ありがとうございます。
Swiperがサポートしていたのですね、見落としておりました。試してみます！