問題タブ [sliders]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
html - ウィンドウのサイズを変更するときにテキスト フィールドとスライダー バーを拡大縮小する方法 (HTML/JADE/CSS)
現在、controPanelChamber という名前の div があり、その中に他のいくつかの div がネストされており、次のようになります (フルスクリーンの場合):これは素晴らしいことです。コードは次のとおりです。
これはまさに私が望んでいる方法です。ただし、ウィンドウのサイズを変更すると、すべてがそれに応じて拡大縮小されるわけではなく、ウィンドウが十分に小さい場合、次のようになります。私が持っている CSS は次のようになります。
私はフロントエンド開発にはかなり慣れていませんが、ウィンドウのサイズに関係なく、VW 単位で指定されたサイズのオブジェクトが維持されるように、サイズがウィンドウに対して相対的に維持されるようにするために VW が使用されていることを理解しています。比較的同じ。すべてのウィンドウ サイズでコントロール パネルを最初の画像のように表示する方法を理解するのに苦労しています。
jquery - 特定の CSS および/または JQuery スライダー レイアウト効果を達成するための推奨される方法
作成中のワイヤーフレームがあります。
私はこのスライダー形式を実現する方法を探していましたが、私の検索は、私が構築しているものとは異なるように見えるカルーセル スライダーに限定されていました。
私が遭遇したいくつかのリンクには、有用と思われるものがあります。 明らかに、2つ以上のリンクを共有するには10の評判が必要なので、リンクからプレフィックスを削除しました...
-css3.bradshawenterprises.com/sliding/
-jqueryrain.com/2014/12/bee3d-slider-touch-enabled-pure-js-plugin/
-cssslider.com/carousel-slider-17.html
-jqueryrain.com/demo/3d-slider-carousel/
-codepen.io/Rowno/pen/Afykb
-desandro.github.io/3dtransforms/docs/card-flip.html
注意します:
このサイトは主に Bootstrap を使用して構築されていますが、Bootstrap にはこのスライダー形式を実現する方法がないようです。
jquery の.carousel() や .carouselSlider()など、これらのメソッドをいくつか試しましたが、jQuery がロードされていても、これらは関数ではなく、関連する要素をレンダリングできなかったというエラーが表示されました。カルーセル。
今のところ、私は振り出しに戻っており、カスタム position:absolute、top:、left:、および z-index: の CSS 値を使用してゼロからこれを構築していることに気付きました。このカスタム CSS が現在サポートしていないスライド。
また、これは今のところあまり重要ではないかもしれませんが、私はこれを構築するための最良かつ最も効率的な方法を見つけようとしていますが、これらのスライドは段階的なフォームプロセスのために連続していると考えられています. (つまり、ユーザーは現在のフォーム/スライドを完了するまで次のスライドに進むことができません)。
いくつかの質問:
-私のデザインを説明する最も適切な/関連性のある検索用語は何ですか?
- 「カルーセル スライダー」は正しい用語ですか、それともアニメーション/トランジションを探すべきですか?
私の現在のコード:
結論:
-ええ、私のコードは明らかに非効率的であり、カスタム JS/JQuery コードを統合して実際にスライダー アニメーション/機能を動作させようとすると、大きな問題になるでしょう。これを行うにはいくつかの方法がありますが、設定された方法に多くの時間を費やす前に、周りに尋ねてみるのが最善の方法のように思えます。
jquery - 編集可能な範囲スライダー
入力したValueをもとに、Sliderの値を変更したい(editable Sliders)
javascript - swiper api - スライドのオーバースクロールを止める方法
iDangerous Swiper を使用しています。デフォルトでは、最初のスライドをタッチして右にドラッグすると、iPhone ブラウザの動作と同様に、スライドを強制的に右に移動させることができます。伸縮性があり、少ししかドラッグできません。これを防ぐためのパラメータはありますか?また、最後のスライドを左にスライドできないようにしたいと思います。下にあるものが明らかになるためです。