タブをフリックでスライドできるようにする方法

現在スマホサイトを作成しているところです。

http://openers.jp/
上のサイトをスマホで見た時にタブの項目をスライドするとそれに連動して下の記事も切り替わるようにしたくてswiper.jsを使ってみたりして再現してみようとしたのですができませんでした。

ソースを見てもhtmlの範囲はわかるのですがjsがどのように機能しているのかわかりません。

上のサイトと全く同じ動作や機能でもなくてもよいので、わかる方お教えいただけないでしょうか

質問者からの補足コメント

• 

  自分が言いたかったのはトップの画像のスライドのことではありません
  http://openers.jp/
  このサイトをスマホから見ていただくとわかるのですが「下の記事」とは「ALL」「FASHION」・・・というタブの下に並ぶ記事のことです。
  タブをフリックすると下の記事も連動して動いているのがわかると思います。

    補足日時：2015/11/20 16:18

No.1 ベストアンサー 回答者： fujillin 回答日時： 2015/11/20 13:07

こんにちは

＞タブの項目をスライドするとそれに連動して
＞下の記事も切り替わるようにしたくて～～
『下の記事』とおっしゃっているのがどの部分のことなのかよくわからないのですが、スライドする画像に重ねて表示しているキャプションのような文字の事でしょうか？
その他には、「連動して切り替わる」ものが見当たらないのですが・・・
もしも、そうであるなら「連動している」というよりも「まとめてスライドさせている」と言う方が実際に近いと思います。

＞htmlの範囲はわかるのですが～～
とのことですので、ご提示のサイトを例にとれば、
スライドの動作は、Li要素を単位として動かしていますので、各々のLi要素が
<li>
　<img src="～～"　>
　<div><div>text1</div><div>text2</div></div>
</li>
といった構成になっているのがわかると思います。
この状態で、Li要素をスライドさせてあげればご質問のような見え方になります。
それなので、フリックに対応しているスライドのライブラリであれば、同様の事が実現可能と考えられます。

ご提示のサイトでは、スクリプトの数が多い上にミニマイズしてあるものが多く、また、スクリプトから読み込んでいるスクリプトもあるようですので、ざっと見ただけではスライド処理に対応している部分がどこであるのかは特定できませんでしたけれど・・・
画像要素だけに限定したスライダーではなく、コンテンツ（DivやLiなど）をスライドできる仕組みのもので、フリック動作に対応しているものであれば、同様のことができるものと思います。

※ 『下の記事』とおっしゃっているものが違う意味だった場合は、私の勘違いですので無視してください。