dポイントプレゼントキャンペーン実施中！

詳しい人求む！

swiper

解決済

  • 質問者：uver-shinya
  • 質問日時：
  • 回答数：3件

https://www.wwdjapan.com/　（スマホ版　https://www.wwdjapan.com/sp/）
このサイトをスマホ表示で見るとNEWSとRANKINGの二つのタブがあり、タブをクリックすると下の記事がスライドして入れ替わり、また記事をフリックしてスライドさせると上のタブの色が変わるという連動した動きを実現したいのですがソースを見ても方法がわかりません。

Chromeのデベロッパーツールでスマホ表示にしてソースを見るとswiperをこの部分に使っているようですが、swiperで作ろうとしてもタブと下の記事の連動のさせ方がわかりません。

解決方法をご存知の方、教えていただけないでしょうか。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3ベストアンサー

  • 回答者： fujillin
  • 回答日時：

ANo2です。



ご質問のポイントが「連動のさせ方」なので、それに関しての簡単なサンプルを作ってみました。
方法はANo2に記した通りで、swiperの機能をそのまま利用しているだけとも言えます。
swiperのドキュメントを斜め読みしただけで作っているので、全体にテキトーです。特に、CSSは超テキトーなので、正しく設定してください。

あくまでも考え方としての一例なのでミニチュア版（幅320px固定）です。
動作はPC環境でクリック（=タップ）、ドラッグ（=スワイプ）として試しています。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<title>sample</title>
<style type="text/css">
.swiper-wrapper { position:absolute; }
.swiper-slide { float: left; }

#panel {
position:relative; margin:0; padding:0;
width:320px; height:400px;
overflow:hidden;
}
#panel .swiper-wrapper { width:1400px; }
#panel .swiper-slide { width:320px; height:400px; }
#panel .swiper-slide p { margin:20px; font-size:40px; }

#navi span {
display:inline-block; width:65px; padding: 5px 0;
font-weight:bold; font-size:16px; text-align:center;
}
#navi .swiper-pagination-bullet-active { color: #F00; }
</style>
</head>

<body>
<div id="navi"></div>

<div id="panel">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background-color: #FBB"><p>Panel 1</div>
<div class="swiper-slide" style="background-color: #BFB"><p>Panel 2</div>
<div class="swiper-slide" style="background-color: #BBF"><p>Panel 3</div>
<div class="swiper-slide" style="background-color: #FFB"><p>Panel 4</div>
</div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3. …
<script type="text/javascript">
(function(){
var naviRenderer = function(index, cls){
return "<span class='" + cls + "'>Panel" + (index+1) + "</span>";
}

var swiper = new Swiper("#panel", {
paginationClickable: true,
spaceBetween: 3,
pagination: "#navi",
paginationBulletRender: naviRenderer
});
})();
</script>
</body>
</html>



※ メニュー下部にスライダーも設置する場合は以下を追加。
＜ＨＴＭＬ＞
<div id="slider"></div>

＜ＣＳＳ＞
#slider {
position:relative; width:260px; height:2px;
overflow:hidden; margin-bottom:10px;
}
#slider .swiper-wrapper { width:1000px; }
#slider .swiper-slide { width:65px; height:2px; }
#slider .marker { background-color: #F00; }

＜ＳＣＲＩＰＴ＞
var i, n = swiper.slides.length;
var div = document.createElement("div");
var d = div.cloneNode(true);
div.className = "swiper-wrapper";
d.className = "swiper-slide";
document.querySelector("#slider").appendChild(div);

for(i = 0; i<n; i++){
d = d.cloneNode(true);
div.appendChild(d);
}
d.className += " marker";

var slider = new Swiper("#slider", {
spaceBetween: 0,
slidesPerView: n,
slidesOffsetAfter: 65 * (n-1),
onlyExternal: true
});

slider.slideTo(n-1, 0);
swiper.params.onSlideChangeStart = function(s){
slider.slideTo(n - 1 - s.activeIndex);
};
    • good
    • 0
    • 件
通報する
この回答へのお礼

サンプルコードまで載せていただいたおかげで、無事に自分のイメージしていたものを作ることができました。
今回はメニュー下部のスライダーは使用しないのですが参考にさせていただきます。
回答ありがとうございました。

通報する
お礼日時：2015/11/29 15:34

No.2

  • 回答者： fujillin
  • 回答日時：

こんにちは



swiperはまったく知らないのと、PC環境からなのでご提示のサイトのスマホ版のソースは見られないので、そのサイトでどのように実現しているのかは不明ですが・・・
swiperのドキュメントをざっと見てみると、機能が豊富で大変便利にできているようです。
http://www.idangero.us/swiper/api/#.VlT7JpMxR1E

ご質問の内容に限って言えば、そのままのswiperの機能で実現可能と思われます。
ご提示のサイトの上部のメニュー部分（＝タブとおっしゃっているところ?）を、swiperのpaginationと考えればよろしいかと。
（paginationはデモでは小さな〇印で、表示中のパネルを青色で示しているもの）

デフォルトでは〇印のようですが、この部分は任意の文字にも画像などにも替えられるようになっているようですので（HTMLの文字列で指定可能）、表示を文字等に変え、色を赤等にして位置を上部に表示するようにすれば、あとはそのままswiperの機能に任せればご質問のような連動をしてくれます。（…というか、もともとが連動するようになっていますので）


ご質問文では触れていらっしゃいませんが、参考サイトではメニュー部分のすぐ下に連動するマーカーのスライダーが設置されています。
これも含めて実現したいのであれば、スライダーは別に設置して連動するように制御してあげる必要がありそうです。
swiperではonSlideChangeStart等のイベントが取得できるようになっていますので、これを利用してスライダーを移動させることで可能と考えられます。
スライダー自体は出来合いのものを利用するのが簡単だと思いますが、swiperを工夫してもできないことはなさそうですね。

ただし、swiperを利用する場合は、単純に連動させてもメニューのマーカーのような動きにはなりませんので、考え方のアイデアの一つとして、
高さの小さいブロック要素をスライドさせることにして、固定のマーカーを一か所用意しておきます。
　例）　　□□□■□□□
■の部分が移動するマーカーで、□の部分はスペースのみ（見えない）
これをslidesPerViewでメニューの数と同じだけ表示するようにしておいてswiperで動かしてあげれば良いわけですが、本体とは逆の動きをする必要があるので指定にはちょっと工夫が必要です。
デモを見るとRTL（左右逆転）というものがありますので、これを利用してもよいですし、普通の状態なら（n-index）をスライダ部分のswiperのindexとして指定するようにしてあげれば良さそうですね。


※ PC環境での確認だけですので、実際にスマホでの確認してはいませんが、多分、大丈夫と推測します。
    • good
    • 0
    • 件
通報する

No.1

こんにちは。


単品のswiper設置は理解しているという前提での回答ですが。
2つswiperを作って、初期化のところでコントロールの記述を追記してあげれば良いと思います。

【HTML】
<div class="swiper-container swiper1">
　<div class="swiper-wrapper">
　　<div class="swiper-slide">Slide 1</div>
　　<div class="swiper-slide">Slide 2</div>
　　<div class="swiper-slide">Slide 3</div>
　</div>
</div>
<div class="swiper-container swiper2">
　<div class="swiper-wrapper">
　　<div class="swiper-slide">Slide 1</div>
　　<div class="swiper-slide">Slide 2</div>
　　<div class="swiper-slide">Slide 3</div>
　</div>
</div>

【初期化・実行】
<script>
var swiper1 = new Swiper('.swiper1', {
pagination: '.swiper-pagination1',
paginationClickable: true,
spaceBetween: 30,
　　//適宜オプション
});
var swiper2 = new Swiper('.swiper2', {
pagination: '.swiper-pagination2',
paginationClickable: true,
spaceBetween: 30,
　　//適宜オプション
});

//各swiperのコントロール。たぶんここのことを求めているのでは？
swiper1.params.control = swiper2;
swiper2.params.control = swiper1;
</script>


CSSは省略します。

頑張ってください。
    • good
    • 0
    • 件
通報する
この回答へのお礼

連動のコントロールの部分、参考にさせていただき無事に自分の思っていたものを実現できました。
回答していただきありがとうございました。

通報する
お礼日時：2015/11/29 15:37

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報