グノシーやスマートニュース、日経電子版などのニュース系アプリでよく使われているUIで、スワイプで記事一覧が横スライドしていくものがあります。 大量の更新記事をカテゴリ毎に効率よく見せるのに非常に効果的なUIです。 webサイトではあまり使われている場面は多くないですが、ヤフーのニュース部分ではこのUIが採用されています。 今回はこのUIを、jQueryプラグインのbxSliderをうまく活用しながら実装してみようと思います。 完成系はこちらになります。GitHub上でコードも公開しておりますのでよければ使ってください。 ※iOS8.13以上 safari対応 ※Andoroid4.2.2以上 chrome・Android標準ブラウザ対応 DEMO ソース ポイントはタブの横スクロールの調整です。 タブが1画面におさまっていないため、コンテンツのスライド部分に合わせて表示位置を微妙に調整して
![スマートニュースやグノシーのような、スワイプタブ切替機能を実装する | Tips Note by TAM](https://cdn-ak-scissors.b.st-hatena.com/image/square/8f567b19a281763bb07c460442ecc57a3350f2d6/height=288;version=1;width=512/https%3A%2F%2Fwww.tam-tam.co.jp%2Ftipsnote%2Fwpdata%2Fwp-content%2Fuploads%2F2016%2F04%2FpageVisual-1.jpg)