![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
現在スマホサイトを作成しているところです。
http://openers.jp/
上のサイトをスマホで見た時にタブの項目をスライドするとそれに連動して下の記事も切り替わるようにしたくてswiper.jsを使ってみたりして再現してみようとしたのですができませんでした。
ソースを見てもhtmlの範囲はわかるのですがjsがどのように機能しているのかわかりません。
上のサイトと全く同じ動作や機能でもなくてもよいので、わかる方お教えいただけないでしょうか
No.1ベストアンサー
- 回答日時:
こんにちは
>タブの項目をスライドするとそれに連動して
>下の記事も切り替わるようにしたくて~~
『下の記事』とおっしゃっているのがどの部分のことなのかよくわからないのですが、スライドする画像に重ねて表示しているキャプションのような文字の事でしょうか?
その他には、「連動して切り替わる」ものが見当たらないのですが・・・
もしも、そうであるなら「連動している」というよりも「まとめてスライドさせている」と言う方が実際に近いと思います。
>htmlの範囲はわかるのですが~~
とのことですので、ご提示のサイトを例にとれば、
スライドの動作は、Li要素を単位として動かしていますので、各々のLi要素が
<li>
<img src="~~" >
<div><div>text1</div><div>text2</div></div>
</li>
といった構成になっているのがわかると思います。
この状態で、Li要素をスライドさせてあげればご質問のような見え方になります。
それなので、フリックに対応しているスライドのライブラリであれば、同様の事が実現可能と考えられます。
ご提示のサイトでは、スクリプトの数が多い上にミニマイズしてあるものが多く、また、スクリプトから読み込んでいるスクリプトもあるようですので、ざっと見ただけではスライド処理に対応している部分がどこであるのかは特定できませんでしたけれど・・・
画像要素だけに限定したスライダーではなく、コンテンツ(DivやLiなど)をスライドできる仕組みのもので、フリック動作に対応しているものであれば、同様のことができるものと思います。
※ 『下の記事』とおっしゃっているものが違う意味だった場合は、私の勘違いですので無視してください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Chrome(クローム) 最近Win10にてブラウザが左にスッと隠れていく現象に悩まされてます 3 2023/07/22 23:11
- PowerPoint(パワーポイント) パワーポイント。2つの矢印のワイプ&消滅の順番に実施、これの繰り返し 2 2023/07/25 09:13
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- Chrome(クローム) youtubeのサムネイルを縦4列配列にしたい。 1 2023/03/09 22:35
- Ameba(アメーバブログ) アメブロは、HTMLのタグの入力を許さないブログ・サイトですか? 1 2023/06/18 18:48
- ホームページ作成・プログラミング アメーバ・ブログは"HTMLタグ"を許可してないのですか? 2 2023/06/17 21:08
- Excel(エクセル) VBA : スクレイピングできない 4 2023/05/12 22:26
- システム 古いWEBシステム。もう追加プログラムは作れない? それともできる? 6 2022/06/08 13:41
- 英語 仮定法と直接法の共存する文での使い分けの文法事項等について 1 2023/07/04 09:19
- ASP・SaaS イントラネットを構築したい 2 2022/04/24 11:08
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
jQueryでメニューの開閉スライド
-
タブをフリックでスライドでき...
-
div要素の入れ替え。半透明イメ...
-
階層別の組織図の自動作成について
-
Javascriptを使ってQRコード読...
-
jQuery,Ajaxでcgiに接続する方...
-
Doctrineのjoinについて
-
カンマ区切りのデータを配列に...
-
JScriptでDBへの接続方法について
-
アコーディオンで多階層のメニ...
-
readyStateが4にならない原因
-
jQuery を外部ファイルから呼び...
-
迷路探索プログラムを作るには...
-
AjaxでJSONを受信すると、文字...
-
ローカルでのonreadystatechang...
-
.txtファイルの読み込み
-
インラインフレームを自動更新...
-
googleマップが表示されない。
-
[jQuery UI] sortableを使いaja...
-
JavascriptでObjectからJSON形...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jQueryでメニューの開閉スライド
-
bxsliderで画像毎に表示時間を...
-
if文でelseが実行されない
-
タブをフリックでスライドでき...
-
Selenium4でボタンをクリックで...
-
JavascriptからPHPへのAjax通信...
-
Javascriptを使ってQRコード読...
-
SQLのmaxで求めた値を変数に代...
-
JavaScriptでtabindexの変更っ...
-
インラインフレームを自動更新...
-
jQueryを使いformでsubmitした...
-
同一ページ移動時ハンバーガー...
-
ドラッグ & ドロップでのド...
-
jQueryのblockUIをformのボタン...
-
FullCalendar の複数月表示につ...
-
カンマ区切りのデータを配列に...
-
階層別の組織図の自動作成について
-
AjaxでJSONを受信すると、文字...
-
jQueryでloadした部分に.jsが効...
-
要素内を常に一番下を表示させたい
おすすめ情報
自分が言いたかったのはトップの画像のスライドのことではありません
http://openers.jp/
このサイトをスマホから見ていただくとわかるのですが「下の記事」とは「ALL」「FASHION」・・・というタブの下に並ぶ記事のことです。
タブをフリックすると下の記事も連動して動いているのがわかると思います。