1

作成中のワイヤーフレームがあります。

ここに画像の説明を入力

私はこのスライダー形式を実現する方法を探していましたが、私の検索は、私が構築しているものとは異なるように見えるカルーセル スライダーに限定されていました。

私が遭遇したいくつかのリンクには、有用と思われるものがあります。 明らかに、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 が現在サポートしていないスライド。

また、これは今のところあまり重要ではないかもしれませんが、私はこれを構築するための最良かつ最も効率的な方法を見つけようとしていますが、これらのスライドは段階的なフォームプロセスのために連続していると考えられています. (つまり、ユーザーは現在のフォーム/スライドを完了するまで次のスライドに進むことができません)。

いくつかの質問：

-私のデザインを説明する最も適切な/関連性のある検索用語は何ですか?

  • 「カルーセル スライダー」は正しい用語ですか、それともアニメーション/トランジションを探すべきですか?

私の現在のコード:

.tab{
	height:1em;
	width:5%;
	background-color: rgba(16, 185, 228, 0.8);
}

.rectangle {
	position: absolute;
	left:25%;
	top:40%;
	/*width: 641px;*/
	width: 50%;
	/*height: 250px;*/
	height: 18em;
	border-radius: 4px;
	margin-top: 1em;
	background-color: #f3f0f0;
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}

.rectangle-copy {
	position: absolute;
	left:-22%;
	top:-95%;
	width: 144%;
	height: 18em;
	z-index: -2;
	margin: 0 auto;
	border-radius: 4px;
	background-color: rgba(243, 239, 239, 0.6);
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}
.rectangle-copy2 {
	position: absolute;
	left:-19%;
	top:-108%;
	width: 138%;
	height: 18em;
	z-index: -4;
	margin: 0 auto;
	border-radius: 4px;
	background-color: rgba(243, 239, 239, 0.6);
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}
.rectangle-copy3 {
	position: absolute;
	left:-16%;
	top:-119%;
	width: 132%;
	height: 18em;
	z-index: -6;
	margin: 0 auto;
	border-radius: 4px;
	background-color: rgba(243, 239, 239, 0.6);
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}

.rectangle-copy4 {
	position: absolute;
	left:-16%;
	top:-119%;
	width: 128%;
	height: 18em;
	z-index: -6;
	margin: 0 auto;
	border-radius: 4px;
	background-color: rgba(243, 239, 239, 0.6);
	box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.5);
}



   fieldset {
      border: 0;
    }
    label {
      display: block;
      margin: 30px 0 0 0;
    }
    .overflow {
      height: 200px;
    }
  <!-- for the blue tabs/dots -->
  <!-- <div id="tab-container">
    <div id="tab1" class="tab"></div>
    <div id="tab2" class="tab"></div>
    <div id="tab3" class="tab"></div>
    <div id="tab4" class="tab"></div>
    <div id="tab5" class="tab"></div>
    <div id="tab6" class="tab"></div>
    <div id="tab7" class="tab"></div>
    <div id="tab8" class="tab"></div>
  </div> -->

  <div class="rectangle">

    <div class="form-group col-xs-8 col-xs-offset-2" style="margin-top:5em;">
      <center><label>Select your job</label></center>

      <select class="form-control">
        <option>&nbsp;</option>
        <option class="form-control">option 1</option>
        <option>option 2</option>
        <option>option 3</option>
        <option>option 4</option>
        <option>option 5</option>
      </select>
      <div id="rect2" class="rectangle-copy"></div>
      <div id="rect3" class="rectangle-copy2"></div>
      <div id="rect4" class="rectangle-copy3"></div>
      <div id="rect4" class="rectangle-copy4"></div>
      <div id="rect4" class="rectangle-copy5"></div>
    </div>

 </div>

結論：

-ええ、私のコードは明らかに非効率的であり、カスタム JS/JQuery コードを統合して実際にスライダー アニメーション/機能を動作させようとすると、大きな問題になるでしょう。これを行うにはいくつかの方法がありますが、設定された方法に多くの時間を費やす前に、周りに尋ねてみるのが最善の方法のように思えます。

4

0 に答える 0