实现特定CSS和/或JQuery滑块布局效果的首选方法

Question

我正在构建一个线框。

我一直在寻找实现这种滑块格式的方法，但我的搜索仅限于旋转木马滑块，它们看起来与我正在制作的滑块不同。

我遇到的一些链接看起来很有用： 显然我需要10个声誉才能分享2个以上的链接，所以我从链接中删除了前缀...

-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，我也会收到错误，说这些不是函数和无法渲染与旋转木马相关的元素。

截至目前，我回到原点，发现自己使用自定义位置从头开始构建：绝对，顶部：，左：和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代码以使实际的滑块动画/功能工作时将成为一个主要的问题。有几种方法可以做到这一点，但在我将大量时间投入到最终发现的客观上选择不佳的方法之前，四处询问似乎是最好的举措。