現在スマホサイトを作成しているところです。
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ランキング
-
GASに文字列として関数を入れる...
-
jsで質問です。 ボタンが二つ存...
-
追加ボタンを押した際に ok ボ...
-
プログラムについて。
-
出発駅A、到着駅Bを選択すると...
-
スマホ上で、左右スワイプで次...
-
ジャバスクリプトについて。
-
Q&A掲示板の入力フォームに文字...
-
メールフォームの日付入力フォ...
-
React hooksが値を返して配列変...
-
フロントエンドフレームワーク...
-
画面遷移を行わずに同一ページ...
-
特定の文字列を複数抜き出した...
-
オブジェクトから任意のプロパ...
-
React と Electron でデスクト...
-
二次元配列を使って順位をだす...
-
iOSのみダブルタップが必要
-
jsで質問です。 displayプロパ...
-
var exports = exports || {}; ...
-
HTMLタグに複数のクラスを設定...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
bxsliderで画像毎に表示時間を...
-
bxsliderで巻き戻しにする方法
-
タブをフリックでスライドでき...
-
JavascriptからPHPへのAjax通信...
-
Javascriptを使ってQRコード読...
-
Selenium4でボタンをクリックで...
-
要素内を常に一番下を表示させたい
-
jQueryを使いformでsubmitした...
-
同一ページ移動時ハンバーガー...
-
階層別の組織図の自動作成について
-
JavaScriptでtabindexの変更っ...
-
Googleマップに複数のピンを立...
-
SQLのmaxで求めた値を変数に代...
-
パソコンで動くjavascriptがス...
-
readyStateが4にならない原因
-
AjaxでJSONを受信すると、文字...
-
変数にドットをいれることはか...
-
Selenium Basicの件
-
IndexedDB を使ってファイルア...
-
インラインフレームを自動更新...
おすすめ情報
自分が言いたかったのはトップの画像のスライドのことではありません
http://openers.jp/
このサイトをスマホから見ていただくとわかるのですが「下の記事」とは「ALL」「FASHION」・・・というタブの下に並ぶ記事のことです。
タブをフリックすると下の記事も連動して動いているのがわかると思います。